diff --git a/docs/app/components/Buttons/NavButton.css.ts b/docs/app/components/Buttons/NavButton.css.ts index 97cff24ec1..954d90f68f 100644 --- a/docs/app/components/Buttons/NavButton.css.ts +++ b/docs/app/components/Buttons/NavButton.css.ts @@ -74,7 +74,7 @@ export const navAnchor = recipe({ variants: { active: { true: { - background: '$redYellowGradient100', + background: vars.colors.redYellowGradient100, }, false: { backgroundColor: '$white', diff --git a/docs/app/components/Header/Header.css.ts b/docs/app/components/Header/Header.css.ts index cee102903f..9d0a4bebe1 100644 --- a/docs/app/components/Header/Header.css.ts +++ b/docs/app/components/Header/Header.css.ts @@ -10,6 +10,7 @@ export const desktopHeight = createVar() export const header = style({ width: '100%', paddingTop: vars.space['15'], + paddingBottom: vars.space['15'], zIndex: vars.zIndices['1'], '@media': { @@ -19,6 +20,17 @@ export const header = style({ [`screen and ${BREAKPOINTS.tabletUp}`]: { paddingTop: vars.space['25'], + paddingBottom: vars.space['25'], + }, + }, +}) + +export const headerSpacing = style({ + height: mobileHeight, + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + height: desktopHeight, }, }, }) diff --git a/docs/app/components/Header/Header.tsx b/docs/app/components/Header/Header.tsx index c27e469c61..b099e9d1f0 100644 --- a/docs/app/components/Header/Header.tsx +++ b/docs/app/components/Header/Header.tsx @@ -27,6 +27,7 @@ import { headerScrolledDown, headerTransparentBackground, headerAddMarginToMain, + headerSpacing, } from './Header.css' import clsx from 'clsx' @@ -43,7 +44,7 @@ interface HeaderProps { } export const getHeaderHeights = (): [desktop: number, mobile: number] => [ - 89, 63, + 114, 78, ] export const Header = ({ @@ -72,41 +73,54 @@ export const Header = ({ const [desktopHeight, mobileHeight] = headerHeights return ( - 0 || (scrollTop > 20 && direction === 'up')) && - headerScrolledDown, - transparentBackground && headerTransparentBackground, - addMarginToMain && headerAddMarginToMain, - className + <> + {isStuck && ( +
)} - style={{ - ...styles, - position, - ...assignInlineVars({ - [mobileHeightVar]: `${mobileHeight}px`, - [desktopHeightVar]: `${desktopHeight}px`, - }), - }} - > -
- - - - - - - - - - -
- + 0 || (scrollTop > 20 && direction === 'up')) && + headerScrolledDown, + transparentBackground && headerTransparentBackground, + addMarginToMain && headerAddMarginToMain, + className + )} + style={{ + ...styles, + position, + ...assignInlineVars({ + [mobileHeightVar]: `${mobileHeight}px`, + [desktopHeightVar]: `${desktopHeight}px`, + }), + }} + > +
+ + + + + + + + + + +
+ + ) } diff --git a/docs/app/components/Select.css.ts b/docs/app/components/Select.css.ts new file mode 100644 index 0000000000..f7ee4886d9 --- /dev/null +++ b/docs/app/components/Select.css.ts @@ -0,0 +1,83 @@ +import { style } from '@vanilla-extract/css' +import { vars } from '../styles/theme-contract.css' +import { BREAKPOINTS } from '../styles/breakpoints.css' +import { darkThemeClass } from '../styles/dark-theme.css' +import { recipe } from '@vanilla-extract/recipes' + +export const controlDiv = recipe({ + base: { + background: 'transparent', + fontWeight: vars.fontWeights.default, + cursor: 'pointer', + }, + variants: { + isFocused: { + true: { + borderBottom: `solid 2px ${vars.colors.red100}`, + }, + false: { + borderBottom: `solid 2px ${vars.colors.black}`, + }, + }, + }, +}) + +export const placeholderSpan = style({ + fontSize: vars.fontSizes.XXS, + lineHeight: vars.lineHeights.XXS, + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + fontSize: vars.fontSizes.XS, + lineHeight: vars.lineHeights.XS, + }, + }, +}) + +export const menuBackground = style({ + backgroundColor: vars.colors.white, + opacity: 0.2, + position: 'absolute', + inset: 0, + zIndex: vars.zIndices['1'], +}) + +export const menu = style({ + position: 'absolute', + zIndex: vars.zIndices['2'], + background: vars.colors.codeBackground, + color: vars.colors.black, + fontSize: vars.fontSizes.XXS, + lineHeight: vars.lineHeights.XXS, + overflow: 'hidden', + boxShadow: + 'rgba(27,31,36,0.12) 0px 1px 3px, rgba(66,74,83,0.12) 0px 8px 24px', + width: '100%', + borderTopRightRadius: vars.radii.r8, + borderTopLeftRadius: vars.radii.r8, + bottom: 0, + left: 0, + + [`${darkThemeClass} &`]: { + boxShadow: + 'rgba(27,31,36,0.5) 0px 1px 3px, rgba(18 21 23 / 40%) 0px 8px 24px', + }, + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + bottom: 'unset', + borderRadius: vars.radii.r8, + width: 200, + fontSize: vars.fontSizes.XS, + lineHeight: vars.lineHeights.XS, + }, + }, +}) + +export const option = style({ + cursor: 'pointer', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + padding: `${vars.space['10']} ${vars.space['40']} ${vars.space['10']} ${vars.space['20']}`, +}) diff --git a/docs-old/app/components/Select.tsx b/docs/app/components/Select.tsx similarity index 66% rename from docs-old/app/components/Select.tsx rename to docs/app/components/Select.tsx index b9de88f251..2e50604e01 100644 --- a/docs-old/app/components/Select.tsx +++ b/docs/app/components/Select.tsx @@ -6,8 +6,13 @@ import ReactSelect, { MultiValue, OptionProps, } from 'react-select' - -import { dark, styled } from '~/styles/stitches.config' +import { + controlDiv, + menu, + menuBackground, + option, + placeholderSpan, +} from './Select.css' export interface SelectProps { options?: { value: string; label: string }[] @@ -58,7 +63,6 @@ export const Select = ({ container: () => ({ display: 'inline-block', margin: '0 6px', - '@media(min-width: 768px)': { position: 'relative', }, @@ -73,41 +77,25 @@ const SelectControl = (props: ControlProps) => { const { children, isFocused, innerRef, innerProps } = props return ( - {children} - +
) } -const ControlDiv = styled('div', { - background: 'transparent', - fontWeight: '$default', - cursor: 'pointer', -}) - const SelectPlaceholder = ({ children, }: Pick) => ( - {children} + {children} ) -const PlaceholderSpan = styled('span', { - fontSize: '$XXS', - lineHeight: '$XXS', - - '@tabletUp': { - fontSize: '$XS', - lineHeight: '$XS', - }, -}) - const SelectValueContainer = ({ children, placeholder, @@ -116,78 +104,39 @@ const SelectValueContainer = ({ if (placeholderChild.key !== 'placeholder') { return ( - +
{placeholder} {menu} - +
) } - return {children} + return
{children}
} -const ValueContainerDiv = styled('div', {}) - const SelectMenu = (props: MenuProps) => { const { children, innerRef, innerProps } = props return ( <> - +
{/* @ts-ignore */} - +
{children} -
+
) } -const MenuBackground = styled('div', { - backgroundColor: '$white', - opacity: 0.2, - position: 'absolute', - inset: 0, - zIndex: '$1', -}) - -const Menu = styled('div', { - position: 'absolute', - zIndex: '$2', - background: '$codeBackground', - color: '$black', - fontSize: '$XXS', - lineHeight: '$XXS', - overflow: 'hidden', - boxShadow: - 'rgba(27,31,36,0.12) 0px 1px 3px, rgba(66,74,83,0.12) 0px 8px 24px', - width: '100%', - borderTopRightRadius: '$r8', - borderTopLeftRadius: '$r8', - - bottom: 0, - left: 0, - - [`.${dark} &`]: { - boxShadow: - 'rgba(27,31,36,0.5) 0px 1px 3px, rgba(18 21 23 / 40%) 0px 8px 24px', - }, - - '@tabletUp': { - bottom: 'unset', - borderRadius: '$r8', - width: 200, - fontSize: '$XS', - lineHeight: '$XS', - }, -}) - const SelectOption = (props: OptionProps) => { const { children, isFocused, isSelected, innerRef, innerProps } = props return ( - + ) } - -const Option = styled('div', { - cursor: 'pointer', - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - padding: '$10 $40 $10 $20', -}) diff --git a/docs/app/routes/docs.components.parallax-layer.mdx b/docs/app/routes/docs.components.parallax-layer.mdx index 1a89c78443..1df38c2086 100644 --- a/docs/app/routes/docs.components.parallax-layer.mdx +++ b/docs/app/routes/docs.components.parallax-layer.mdx @@ -67,3 +67,13 @@ type StickyConfig = { start?: number; end?: number } | undefined ## Examples Can't find what you're looking for? Check out all our [examples!](/examples) + +import { ExampleGrid } from '../components/Grids/ExampleGrid' + + diff --git a/docs/app/routes/docs.components.parallax.mdx b/docs/app/routes/docs.components.parallax.mdx index b40c4fdc90..2f8a669362 100644 --- a/docs/app/routes/docs.components.parallax.mdx +++ b/docs/app/routes/docs.components.parallax.mdx @@ -77,3 +77,13 @@ interface IParallax { ## Examples Can't find what you're looking for? Check out all our [examples!](/examples) + +import { ExampleGrid } from '../components/Grids/ExampleGrid' + + diff --git a/docs/app/routes/examples.tsx b/docs/app/routes/examples.tsx new file mode 100644 index 0000000000..728d719c71 --- /dev/null +++ b/docs/app/routes/examples.tsx @@ -0,0 +1,262 @@ +import { useRef, useState } from 'react' +import { MultiValue } from 'react-select' +import { + ActionFunction, + json, + LoaderFunction, + MetaFunction, + redirect, +} from '@vercel/remix' +import { + useLoaderData, + Form, + useFetcher, + useNavigation, + useSearchParams, +} from '@remix-run/react' + +import { Header } from '~/components/Header/Header' +import { CardExample } from '~/components/Cards/CardExample' +import { Heading } from '~/components/Text/Heading' +import { Copy } from '~/components/Text/Copy' +import { Anchor } from '~/components/Text/Anchor' +import { Select } from '~/components/Select' + +import { SANDBOXES } from '~/data/sandboxes' + +import { fetchSandbox, getTagsAndComponents } from '~/helpers/sandboxes' +import { WidgetCarbon } from '../components/Widgets/WidgetCarbon' +import { + copy, + exampleFilters, + flex, + h2, + main, + sandboxesList, + xlHeading, +} from '../styles/routes/examples.css' + +export const loader: LoaderFunction = async ({ request }) => { + try { + const url = new URL(request.url) + + const tagsParam = url.searchParams.get('tags')?.split(',') ?? [] + const componentsParam = url.searchParams.get('components')?.split(',') ?? [] + + const sandboxes = await Promise.all( + Object.values(SANDBOXES).map(fetchSandbox) + ).then(boxes => boxes.sort((a, b) => a.title.localeCompare(b.title))) + + const filteredSandboxes = sandboxes.filter(sandbox => { + if (tagsParam.length === 0 && componentsParam.length === 0) { + return sandbox + } + + const tags = sandbox.tags.filter(tag => tagsParam.includes(tag)) + const components = sandbox.tags.filter(tag => + componentsParam.includes(tag) + ) + + if (tags.length > 0 || components.length > 0) { + return sandbox + } + }) + + const [tags, components] = getTagsAndComponents(sandboxes) + + return json( + { + sandboxes: filteredSandboxes, + tags, + components, + }, + { + headers: { + 'Cache-Control': 'public, max-age=60, s-max-age=60', + }, + } + ) + } catch (err) { + console.error(err) + return redirect('/500') + } +} + +export const action: ActionFunction = async ({ request }) => { + const form = await request.formData() + + const tags = form.get('tags') ?? '' + const components = form.get('components') ?? '' + + if (tags !== '' || components !== '') { + return redirect( + `/examples?${tags !== '' ? `tags=${tags}` : ''}${ + components !== '' ? `&components=${components}` : '' + }` + ) + } + + return redirect(`/examples`) +} + +export const meta: MetaFunction = () => { + return [ + { + title: 'Examples | React Spring', + }, + { + name: 'description', + content: `The home of examples using react-spring to bring naturally fluid animations elevating UI & interactions`, + }, + { property: 'og:title', content: 'Examples | React Spring' }, + { + name: 'og:description', + contnet: + 'The home of examples using react-spring to bring naturally fluid animations elevating UI & interactions', + }, + { + name: 'og:url', + content: 'https://www.react-spring.dev/examples', + }, + { + name: 'twitter:url', + content: 'https://www.react-spring.dev/examples', + }, + { + name: 'twitter:title', + content: 'Examples | React Spring', + }, + { + name: 'twitter:description', + content: + 'The home of examples using react-spring to bring naturally fluid animations elevating UI & interactions', + }, + ] +} + +export interface Sandbox { + urlTitle: string + title: string + tags: string[] + screenshotUrl: string + description: string + id: string +} + +export default function Examples() { + const { components, sandboxes, tags } = useLoaderData<{ + components: { value: string; label: string }[] + sandboxes: Sandbox[] + tags: { value: string; label: string }[] + }>() + + const [searchParams] = useSearchParams() + + const defaultTags = searchParams.getAll('tags') + const defaultComponents = searchParams.getAll('components') + + const [selectStates, setSelectState] = useState({ + tags: defaultTags.map(tag => ({ value: tag, label: tag })), + components: defaultComponents.map(component => ({ + value: component, + label: component, + })), + }) + + const formRef = useRef(null!) + + const fetcher = useFetcher() + + const { state } = useNavigation() + + const handleSelectChange = + (name: 'tags' | 'components') => + (newValue: MultiValue<{ value: string }>) => { + const data = { + ...selectStates, + [name]: newValue, + } + + setSelectState(data) + fetcher.submit( + { + tags: data.tags.map(val => val.value).join(','), + components: data.components.map(val => val.value).join(','), + }, + { method: 'post', action: '/examples' } + ) + } + + return ( + <> +
+
+
+
+ + Examples + + + {`Got an example you want to see here & share with the community?`}{' '} + Check out{' '} + + this guide + + . + +
+ + {`Alternatively, check out examples by `} + + + {selectStates.tags.length > 0 || + selectStates.components.length > 0 ? ( + + {'. Or maybe, you want to see them '} + all? + + ) : null} +
+
+
+ +
+
+
    + {sandboxes.map(props => ( +
  • + +
    • + ))} +
+
+ + ) +} diff --git a/docs/app/styles/routes/examples.css.ts b/docs/app/styles/routes/examples.css.ts new file mode 100644 index 0000000000..e3fd3e39c6 --- /dev/null +++ b/docs/app/styles/routes/examples.css.ts @@ -0,0 +1,120 @@ +import { globalStyle, style } from '@vanilla-extract/css' +import { vars } from '../theme-contract.css' +import { BREAKPOINTS } from '../breakpoints.css' + +export const main = style({ + padding: `0 ${vars.space['25']}`, + width: '100%', + margin: '0 auto', + maxWidth: vars.sizes.largeDoc, + flexGrow: 1, + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + padding: `0 ${vars.space['15']}`, + }, + + [`screen and ${BREAKPOINTS.desktopUp}`]: { + padding: `0 ${vars.space['50']}`, + }, + }, +}) + +export const flex = style({ + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-end', + gap: vars.space['40'], + }, + }, +}) + +globalStyle(`${flex} #carbonads`, { + marginBottom: vars.space['20'], + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + maxWidth: 400, + marginBottom: vars.space['40'], + }, + }, +}) + +export const sandboxesList = style({ + display: 'grid', + gridRowGap: vars.space['20'], + margin: 0, + padding: 0, + listStyle: 'none', + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + gridTemplateColumns: 'repeat(2, 1fr)', + gridColumnGap: vars.space['20'], + }, + + [`screen and ${BREAKPOINTS.desktopUp}`]: { + gridTemplateColumns: 'repeat(3, 1fr)', + }, + }, +}) + +export const exampleFilters = style({ + marginBottom: vars.space['20'], + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + marginBottom: vars.space['40'], + }, + }, +}) + +export const xlHeading = style({ + marginBottom: vars.space['20'], + + '@media': { + [`screen and ${BREAKPOINTS.tabletUp}`]: { + marginBottom: vars.space['30'], + }, + }, +}) + +export const copy = style({ + maxWidth: 680, +}) + +export const h2 = style({ + display: 'inline', + marginLeft: -6, +}) + +globalStyle(`${copy} > a, ${h2} > a`, { + position: 'relative', + textDecoration: 'none', +}) + +globalStyle(`${h2} > a`, { + fontWeight: vars.fontWeights.bold, +}) + +globalStyle(`${copy} > a:after, ${h2} > a:after`, { + position: 'absolute', + bottom: -1, + left: 0, + content: '', + width: '100%', + height: 2, + backgroundColor: vars.colors.red100, + + '@media': { + '(prefers-reduced-motion: no-preference)': { + transition: 'width 200ms ease-out', + }, + }, +}) + +globalStyle(`${copy} > a:hover:after, ${h2} > a:hover:after`, { + width: '0%', +}) diff --git a/docs/package.json b/docs/package.json index 9dc04e5231..bef1244637 100644 --- a/docs/package.json +++ b/docs/package.json @@ -38,11 +38,12 @@ "@vercel/analytics": "1.2.2", "@vercel/remix": "2.9.2-patch.2", "clsx": "2.1.1", - "cookie": "^0.6.0", + "cookie": "0.6.0", "isbot": "4", "phosphor-react": "1.4.1", "react": "18.2.0", "react-dom": "18.2.0", + "react-select": "5.8.0", "zod": "3.21.4" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 375d83ae1c..d2eecb0c30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -562,6 +562,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.24.3": + version: 7.24.3 + resolution: "@babel/helper-module-imports@npm:7.24.3" + dependencies: + "@babel/types": ^7.24.0 + checksum: c23492189ba97a1ec7d37012336a5661174e8b88194836b6bbf90d13c3b72c1db4626263c654454986f924c6da8be7ba7f9447876d709cd00bd6ffde6ec00796 + languageName: node + linkType: hard + "@babel/helper-module-imports@npm:^7.22.15": version: 7.22.15 resolution: "@babel/helper-module-imports@npm:7.22.15" @@ -571,15 +580,6 @@ __metadata: languageName: node linkType: hard -"@babel/helper-module-imports@npm:^7.24.3": - version: 7.24.3 - resolution: "@babel/helper-module-imports@npm:7.24.3" - dependencies: - "@babel/types": ^7.24.0 - checksum: c23492189ba97a1ec7d37012336a5661174e8b88194836b6bbf90d13c3b72c1db4626263c654454986f924c6da8be7ba7f9447876d709cd00bd6ffde6ec00796 - languageName: node - linkType: hard - "@babel/helper-module-transforms@npm:^7.20.11, @babel/helper-module-transforms@npm:^7.21.2": version: 7.21.2 resolution: "@babel/helper-module-transforms@npm:7.21.2" @@ -1672,7 +1672,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.21.0": +"@babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.8.7": version: 7.24.5 resolution: "@babel/runtime@npm:7.24.5" dependencies: @@ -2508,6 +2508,38 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.11.0": + version: 11.11.0 + resolution: "@emotion/babel-plugin@npm:11.11.0" + dependencies: + "@babel/helper-module-imports": ^7.16.7 + "@babel/runtime": ^7.18.3 + "@emotion/hash": ^0.9.1 + "@emotion/memoize": ^0.8.1 + "@emotion/serialize": ^1.1.2 + babel-plugin-macros: ^3.1.0 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.2.0 + checksum: 6b363edccc10290f7a23242c06f88e451b5feb2ab94152b18bb8883033db5934fb0e421e2d67d09907c13837c21218a3ac28c51707778a54d6cd3706c0c2f3f9 + languageName: node + linkType: hard + +"@emotion/cache@npm:^11.11.0, @emotion/cache@npm:^11.4.0": + version: 11.11.0 + resolution: "@emotion/cache@npm:11.11.0" + dependencies: + "@emotion/memoize": ^0.8.1 + "@emotion/sheet": ^1.2.2 + "@emotion/utils": ^1.2.1 + "@emotion/weak-memoize": ^0.3.1 + stylis: 4.2.0 + checksum: 8eb1dc22beaa20c21a2e04c284d5a2630a018a9d51fb190e52de348c8d27f4e8ca4bbab003d68b4f6cd9cc1c569ca747a997797e0f76d6c734a660dc29decf08 + languageName: node + linkType: hard + "@emotion/hash@npm:^0.9.0": version: 0.9.0 resolution: "@emotion/hash@npm:0.9.0" @@ -2515,6 +2547,13 @@ __metadata: languageName: node linkType: hard +"@emotion/hash@npm:^0.9.1": + version: 0.9.1 + resolution: "@emotion/hash@npm:0.9.1" + checksum: 716e17e48bf9047bf9383982c071de49f2615310fb4e986738931776f5a823bc1f29c84501abe0d3df91a3803c80122d24e28b57351bca9e01356ebb33d89876 + languageName: node + linkType: hard + "@emotion/is-prop-valid@npm:^1.1.0": version: 1.2.0 resolution: "@emotion/is-prop-valid@npm:1.2.0" @@ -2531,6 +2570,54 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/memoize@npm:0.8.1" + checksum: a19cc01a29fcc97514948eaab4dc34d8272e934466ed87c07f157887406bc318000c69ae6f813a9001c6a225364df04249842a50e692ef7a9873335fbcc141b0 + languageName: node + linkType: hard + +"@emotion/react@npm:^11.8.1": + version: 11.11.4 + resolution: "@emotion/react@npm:11.11.4" + dependencies: + "@babel/runtime": ^7.18.3 + "@emotion/babel-plugin": ^11.11.0 + "@emotion/cache": ^11.11.0 + "@emotion/serialize": ^1.1.3 + "@emotion/use-insertion-effect-with-fallbacks": ^1.0.1 + "@emotion/utils": ^1.2.1 + "@emotion/weak-memoize": ^0.3.1 + hoist-non-react-statics: ^3.3.1 + peerDependencies: + react: ">=16.8.0" + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 6abaa7a05c5e1db31bffca7ac79169f5456990022cbb3794e6903221536609a60420f2b4888dd3f84e9634a304e394130cb88dc32c243a1dedc263e50da329f8 + languageName: node + linkType: hard + +"@emotion/serialize@npm:^1.1.2, @emotion/serialize@npm:^1.1.3": + version: 1.1.4 + resolution: "@emotion/serialize@npm:1.1.4" + dependencies: + "@emotion/hash": ^0.9.1 + "@emotion/memoize": ^0.8.1 + "@emotion/unitless": ^0.8.1 + "@emotion/utils": ^1.2.1 + csstype: ^3.0.2 + checksum: 71b99f816a9c1d61a87c62cf4928da3894bb62213f3aff38b1ea9790b3368f084af98a3e5453b5055c2f36a7d70318d2fa9955b7b5676c2065b868062375df39 + languageName: node + linkType: hard + +"@emotion/sheet@npm:^1.2.2": + version: 1.2.2 + resolution: "@emotion/sheet@npm:1.2.2" + checksum: d973273c9c15f1c291ca2269728bf044bd3e92a67bca87943fa9ec6c3cd2b034f9a6bfe95ef1b5d983351d128c75b547b43ff196a00a3875f7e1d269793cecfe + languageName: node + linkType: hard + "@emotion/stylis@npm:^0.8.4": version: 0.8.5 resolution: "@emotion/stylis@npm:0.8.5" @@ -2545,6 +2632,36 @@ __metadata: languageName: node linkType: hard +"@emotion/unitless@npm:^0.8.1": + version: 0.8.1 + resolution: "@emotion/unitless@npm:0.8.1" + checksum: 385e21d184d27853bb350999471f00e1429fa4e83182f46cd2c164985999d9b46d558dc8b9cc89975cb337831ce50c31ac2f33b15502e85c299892e67e7b4a88 + languageName: node + linkType: hard + +"@emotion/use-insertion-effect-with-fallbacks@npm:^1.0.1": + version: 1.0.1 + resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.0.1" + peerDependencies: + react: ">=16.8.0" + checksum: 700b6e5bbb37a9231f203bb3af11295eed01d73b2293abece0bc2a2237015e944d7b5114d4887ad9a79776504aa51ed2a8b0ddbc117c54495dd01a6b22f93786 + languageName: node + linkType: hard + +"@emotion/utils@npm:^1.2.1": + version: 1.2.1 + resolution: "@emotion/utils@npm:1.2.1" + checksum: e0b44be0705b56b079c55faff93952150be69e79b660ae70ddd5b6e09fc40eb1319654315a9f34bb479d7f4ec94be6068c061abbb9e18b9778ae180ad5d97c73 + languageName: node + linkType: hard + +"@emotion/weak-memoize@npm:^0.3.1": + version: 0.3.1 + resolution: "@emotion/weak-memoize@npm:0.3.1" + checksum: b2be47caa24a8122622ea18cd2d650dbb4f8ad37b636dc41ed420c2e082f7f1e564ecdea68122b546df7f305b159bf5ab9ffee872abd0f052e687428459af594 + languageName: node + linkType: hard + "@esbuild/aix-ppc64@npm:0.19.12": version: 0.19.12 resolution: "@esbuild/aix-ppc64@npm:0.19.12" @@ -3237,7 +3354,7 @@ __metadata: languageName: node linkType: hard -"@floating-ui/dom@npm:^1.0.0": +"@floating-ui/dom@npm:^1.0.0, @floating-ui/dom@npm:^1.0.1": version: 1.6.5 resolution: "@floating-ui/dom@npm:1.6.5" dependencies: @@ -5390,7 +5507,7 @@ __metadata: chokidar: 3.5.3 clsx: 2.1.1 concurrently: 8.2.2 - cookie: ^0.6.0 + cookie: 0.6.0 esbuild: 0.20.2 esbuild-register: 3.5.0 gray-matter: 4.0.3 @@ -5400,6 +5517,7 @@ __metadata: phosphor-react: 1.4.1 react: 18.2.0 react-dom: 18.2.0 + react-select: 5.8.0 refractor: 4.8.1 rehype-autolink-headings: 7.1.0 rehype-parse: 9.0.0 @@ -6763,6 +6881,13 @@ __metadata: languageName: node linkType: hard +"@types/parse-json@npm:^4.0.0": + version: 4.0.2 + resolution: "@types/parse-json@npm:4.0.2" + checksum: 5bf62eec37c332ad10059252fc0dab7e7da730764869c980b0714777ad3d065e490627be9f40fc52f238ffa3ac4199b19de4127196910576c2fe34dd47c7a470 + languageName: node + linkType: hard + "@types/phoenix@npm:^1.5.4": version: 1.6.4 resolution: "@types/phoenix@npm:1.6.4" @@ -6838,6 +6963,15 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.0": + version: 4.4.10 + resolution: "@types/react-transition-group@npm:4.4.10" + dependencies: + "@types/react": "*" + checksum: fe2ea11f70251e9f79f368e198c18fd469b1d4f1e1d44e4365845b44e15974b0ec925100036f449b023b0ca3480a82725c5f0a73040e282ad32ec7b0def9b57c + languageName: node + linkType: hard + "@types/react@npm:*, @types/react@npm:^18.0.28": version: 18.0.28 resolution: "@types/react@npm:18.0.28" @@ -8081,6 +8215,17 @@ __metadata: languageName: node linkType: hard +"babel-plugin-macros@npm:^3.1.0": + version: 3.1.0 + resolution: "babel-plugin-macros@npm:3.1.0" + dependencies: + "@babel/runtime": ^7.12.5 + cosmiconfig: ^7.0.0 + resolve: ^1.19.0 + checksum: 765de4abebd3e4688ebdfbff8571ddc8cd8061f839bb6c3e550b0344a4027b04c60491f843296ce3f3379fb356cc873d57a9ee6694262547eb822c14a25be9a6 + languageName: node + linkType: hard + "babel-plugin-polyfill-corejs2@npm:^0.2.0": version: 0.2.2 resolution: "babel-plugin-polyfill-corejs2@npm:0.2.2" @@ -9364,7 +9509,7 @@ __metadata: languageName: node linkType: hard -"convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": +"convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0": version: 1.9.0 resolution: "convert-source-map@npm:1.9.0" checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8 @@ -9399,7 +9544,7 @@ __metadata: languageName: node linkType: hard -"cookie@npm:^0.6.0": +"cookie@npm:0.6.0, cookie@npm:^0.6.0": version: 0.6.0 resolution: "cookie@npm:0.6.0" checksum: f56a7d32a07db5458e79c726b77e3c2eff655c36792f2b6c58d351fb5f61531e5b1ab7f46987150136e366c65213cbe31729e02a3eaed630c3bf7334635fb410 @@ -9454,6 +9599,19 @@ __metadata: languageName: node linkType: hard +"cosmiconfig@npm:^7.0.0": + version: 7.1.0 + resolution: "cosmiconfig@npm:7.1.0" + dependencies: + "@types/parse-json": ^4.0.0 + import-fresh: ^3.2.1 + parse-json: ^5.0.0 + path-type: ^4.0.0 + yaml: ^1.10.0 + checksum: c53bf7befc1591b2651a22414a5e786cd5f2eeaa87f3678a3d49d6069835a9d8d1aef223728e98aa8fec9a95bf831120d245096db12abe019fecb51f5696c96f + languageName: node + linkType: hard + "cosmiconfig@npm:^8.3.6": version: 8.3.6 resolution: "cosmiconfig@npm:8.3.6" @@ -10135,6 +10293,16 @@ __metadata: languageName: node linkType: hard +"dom-helpers@npm:^5.0.1": + version: 5.2.1 + resolution: "dom-helpers@npm:5.2.1" + dependencies: + "@babel/runtime": ^7.8.7 + csstype: ^3.0.2 + checksum: 863ba9e086f7093df3376b43e74ce4422571d404fc9828bf2c56140963d5edf0e56160f9b2f3bb61b282c07f8fc8134f023c98fd684bddcb12daf7b0f14d951c + languageName: node + linkType: hard + "domexception@npm:^4.0.0": version: 4.0.0 resolution: "domexception@npm:4.0.0" @@ -11797,6 +11965,13 @@ __metadata: languageName: node linkType: hard +"find-root@npm:^1.1.0": + version: 1.1.0 + resolution: "find-root@npm:1.1.0" + checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf + languageName: node + linkType: hard + "find-up@npm:^3.0.0": version: 3.0.0 resolution: "find-up@npm:3.0.0" @@ -12878,7 +13053,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0": +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -15996,6 +16171,13 @@ __metadata: languageName: node linkType: hard +"memoize-one@npm:^6.0.0": + version: 6.0.0 + resolution: "memoize-one@npm:6.0.0" + checksum: f185ea69f7cceae5d1cb596266dcffccf545e8e7b4106ec6aa93b71ab9d16460dd118ac8b12982c55f6d6322fcc1485de139df07eacffaae94888b9b3ad7675f + languageName: node + linkType: hard + "meow@npm:^12.0.1": version: 12.1.1 resolution: "meow@npm:12.1.1" @@ -19368,6 +19550,26 @@ __metadata: languageName: node linkType: hard +"react-select@npm:5.8.0": + version: 5.8.0 + resolution: "react-select@npm:5.8.0" + dependencies: + "@babel/runtime": ^7.12.0 + "@emotion/cache": ^11.4.0 + "@emotion/react": ^11.8.1 + "@floating-ui/dom": ^1.0.1 + "@types/react-transition-group": ^4.4.0 + memoize-one: ^6.0.0 + prop-types: ^15.6.0 + react-transition-group: ^4.3.0 + use-isomorphic-layout-effect: ^1.1.2 + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: c8398cc0aefb5ee5438b6176c86676e2d3fed7457c16b0769f423a0da0ae431a7df25c2cadf13b709700882b8ebd80a58b1e557fec3e22ad3cbf60164ca9e745 + languageName: node + linkType: hard + "react-shallow-renderer@npm:^16.15.0": version: 16.15.0 resolution: "react-shallow-renderer@npm:16.15.0" @@ -19464,6 +19666,21 @@ __metadata: languageName: node linkType: hard +"react-transition-group@npm:^4.3.0": + version: 4.4.5 + resolution: "react-transition-group@npm:4.4.5" + dependencies: + "@babel/runtime": ^7.5.5 + dom-helpers: ^5.0.1 + loose-envify: ^1.4.0 + prop-types: ^15.6.2 + peerDependencies: + react: ">=16.6.0" + react-dom: ">=16.6.0" + checksum: 75602840106aa9c6545149d6d7ae1502fb7b7abadcce70a6954c4b64a438ff1cd16fc77a0a1e5197cdd72da398f39eb929ea06f9005c45b132ed34e056ebdeb1 + languageName: node + linkType: hard + "react-use-gesture@npm:^9.1.3": version: 9.1.3 resolution: "react-use-gesture@npm:9.1.3" @@ -20055,6 +20272,19 @@ __metadata: languageName: node linkType: hard +"resolve@npm:^1.19.0": + version: 1.22.8 + resolution: "resolve@npm:1.22.8" + dependencies: + is-core-module: ^2.13.0 + path-parse: ^1.0.7 + supports-preserve-symlinks-flag: ^1.0.0 + bin: + resolve: bin/resolve + checksum: f8a26958aa572c9b064562750b52131a37c29d072478ea32e129063e2da7f83e31f7f11e7087a18225a8561cfe8d2f0df9dbea7c9d331a897571c0a2527dbb4c + languageName: node + linkType: hard + "resolve@npm:^2.0.0-next.4": version: 2.0.0-next.5 resolution: "resolve@npm:2.0.0-next.5" @@ -20081,6 +20311,19 @@ __metadata: languageName: node linkType: hard +"resolve@patch:resolve@^1.19.0#~builtin": + version: 1.22.8 + resolution: "resolve@patch:resolve@npm%3A1.22.8#~builtin::version=1.22.8&hash=c3c19d" + dependencies: + is-core-module: ^2.13.0 + path-parse: ^1.0.7 + supports-preserve-symlinks-flag: ^1.0.0 + bin: + resolve: bin/resolve + checksum: 5479b7d431cacd5185f8db64bfcb7286ae5e31eb299f4c4f404ad8aa6098b77599563ac4257cb2c37a42f59dfc06a1bec2bcf283bb448f319e37f0feb9a09847 + languageName: node + linkType: hard + "resolve@patch:resolve@^2.0.0-next.4#~builtin": version: 2.0.0-next.5 resolution: "resolve@patch:resolve@npm%3A2.0.0-next.5#~builtin::version=2.0.0-next.5&hash=c3c19d" @@ -20830,7 +21073,7 @@ __metadata: languageName: node linkType: hard -"source-map@npm:^0.5.6": +"source-map@npm:^0.5.6, source-map@npm:^0.5.7": version: 0.5.7 resolution: "source-map@npm:0.5.7" checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d @@ -21416,6 +21659,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.2.0": + version: 4.2.0 + resolution: "stylis@npm:4.2.0" + checksum: 0eb6cc1b866dc17a6037d0a82ac7fa877eba6a757443e79e7c4f35bacedbf6421fadcab4363b39667b43355cbaaa570a3cde850f776498e5450f32ed2f9b7584 + languageName: node + linkType: hard + "sucrase@npm:^3.20.3": version: 3.29.0 resolution: "sucrase@npm:3.29.0" @@ -22734,6 +22984,18 @@ __metadata: languageName: node linkType: hard +"use-isomorphic-layout-effect@npm:^1.1.2": + version: 1.1.2 + resolution: "use-isomorphic-layout-effect@npm:1.1.2" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: a6532f7fc9ae222c3725ff0308aaf1f1ddbd3c00d685ef9eee6714fd0684de5cb9741b432fbf51e61a784e2955424864f7ea9f99734a02f237b17ad3e18ea5cb + languageName: node + linkType: hard + "use-sidecar@npm:^1.1.2": version: 1.1.2 resolution: "use-sidecar@npm:1.1.2" @@ -23568,7 +23830,7 @@ __metadata: languageName: node linkType: hard -"yaml@npm:^1.10.2": +"yaml@npm:^1.10.0, yaml@npm:^1.10.2": version: 1.10.2 resolution: "yaml@npm:1.10.2" checksum: ce4ada136e8a78a0b08dc10b4b900936912d15de59905b2bf415b4d33c63df1d555d23acb2a41b23cf9fb5da41c256441afca3d6509de7247daa062fd2c5ea5f