From e223b0a9fa4d9821237dfcbc707f943b25a33a7c Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Tue, 16 Jan 2024 16:21:05 -0300 Subject: [PATCH] feat(ui): adds input element, ref #4810 --- package.json | 3 +- src/app/common/hooks/use-event-listener.ts | 14 +- .../mnemonic-key/mnemonic-input-field.tsx | 5 +- src/app/features/add-network/add-network.tsx | 89 ++--- .../components/edit-nonce-field.tsx | 20 +- src/app/pages/home/home.tsx | 1 - src/app/ui/components/input.tsx | 19 -- src/app/ui/components/input/input.stories.tsx | 51 +++ src/app/ui/components/input/input.tsx | 163 +++++++++ src/app/ui/utils/style-context.tsx | 70 ++++ yarn.lock | 316 +++++++++++------- 11 files changed, 545 insertions(+), 206 deletions(-) delete mode 100644 src/app/ui/components/input.tsx create mode 100644 src/app/ui/components/input/input.stories.tsx create mode 100644 src/app/ui/components/input/input.tsx create mode 100644 src/app/ui/utils/style-context.tsx diff --git a/package.json b/package.json index 742d2d76b83..c5c841649a7 100644 --- a/package.json +++ b/package.json @@ -241,8 +241,9 @@ "@actions/core": "1.10.1", "@btckit/types": "0.0.19", "@leather-wallet/prettier-config": "0.0.1", + "@leather-wallet/tokens": "0.0.5", "@ls-lint/ls-lint": "2.2.2", - "@pandacss/dev": "0.26.2", + "@pandacss/dev": "0.27.1", "@playwright/test": "1.40.1", "@pmmmwh/react-refresh-webpack-plugin": "0.5.11", "@redux-devtools/cli": "4.0.0", diff --git a/src/app/common/hooks/use-event-listener.ts b/src/app/common/hooks/use-event-listener.ts index d7a1c1bd48d..b50275a17c4 100644 --- a/src/app/common/hooks/use-event-listener.ts +++ b/src/app/common/hooks/use-event-listener.ts @@ -43,32 +43,32 @@ const isBrowser = checkIsBrowser(); * * @param event the event name * @param handler the event handler function to execute - * @param doc the dom environment to execute against (defaults to `document`) + * @param element the dom environment to execute against (defaults to `document`) * @param options the event listener options */ export function useEventListener( event: keyof WindowEventMap, handler: (event: any) => void, - doc: Document | null = isBrowser ? document : null, + element: Document | null = isBrowser ? document : null, options?: AddEventListener[2] ) { const savedHandler = useLatestRef(handler); useEffect(() => { - if (!doc) return; + if (!element) return; const listener = (event: any) => { savedHandler.current(event); }; - doc.addEventListener(event, listener, options); + element.addEventListener(event, listener, options); return () => { - doc.removeEventListener(event, listener, options); + element.removeEventListener(event, listener, options); }; - }, [event, doc, options, savedHandler]); + }, [event, element, options, savedHandler]); return () => { - doc?.removeEventListener(event, savedHandler.current, options); + element?.removeEventListener(event, savedHandler.current, options); }; } diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx index b1cf126aa3d..19810f8b0ef 100644 --- a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx +++ b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx @@ -52,10 +52,7 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input }, }, '&[data-state=error]': { - _before: { - ...psuedoBorderStyles, - border: 'error', - }, + _before: { ...psuedoBorderStyles, border: 'error' }, }, /** * Focus styling: diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx index 06fbb497d29..339faa38c97 100644 --- a/src/app/features/add-network/add-network.tsx +++ b/src/app/features/add-network/add-network.tsx @@ -22,7 +22,7 @@ import { useNetworksActions, } from '@app/store/networks/networks.hooks'; import { Button } from '@app/ui/components/button/button'; -import { Input } from '@app/ui/components/input'; +import { Input } from '@app/ui/components/input/input'; import { Title } from '@app/ui/components/typography/title'; /** @@ -70,14 +70,14 @@ export function AddNetwork() { const setStacksUrl = useCallback( (value: string) => { - setFieldValue('stacksUrl', value); + void setFieldValue('stacksUrl', value); }, [setFieldValue] ); const setBitcoinUrl = useCallback( (value: string) => { - setFieldValue('bitcoinUrl', value); + void setFieldValue('bitcoinUrl', value); }, [setFieldValue] ); @@ -224,17 +224,17 @@ export function AddNetwork() { . Make sure you review and trust the host before you add it. - + + Name + + Bitcoin API {/* TODO: Replace with new Select */} @@ -269,37 +269,38 @@ export function AddNetwork() { Stacks API URL - + + Name + + Bitcoin API URL - - + + Bitcoin API URL + + + + Network key + + {error ? ( {error} ) : null} diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx index ee8825535f0..de37a000648 100644 --- a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx +++ b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx @@ -4,7 +4,7 @@ import { useField } from 'formik'; import { Stack, StackProps } from 'leather-styles/jsx'; import { ErrorLabel } from '@app/components/error-label'; -import { Input } from '@app/ui/components/input'; +import { Input } from '@app/ui/components/input/input'; interface EditNonceFieldProps extends StackProps { onBlur(): void; @@ -15,14 +15,16 @@ export const EditNonceField = memo((props: EditNonceFieldProps) => { return ( - ) => { - await helpers.setValue(evt.currentTarget.value); - }} - placeholder="Enter a custom nonce" - value={field.value} - /> + + Custom nonce + ) => { + await helpers.setValue(evt.currentTarget.value); + }} + /> + {meta.error && {meta.error}} ); diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index d26ce2eda1d..d6187512d63 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -42,7 +42,6 @@ export function Home() { }> {homePageModalRoutes} - {homePageModalRoutes} diff --git a/src/app/ui/components/input.tsx b/src/app/ui/components/input.tsx deleted file mode 100644 index 09ec6190015..00000000000 --- a/src/app/ui/components/input.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { HTMLStyledProps, styled } from 'leather-styles/jsx'; - -type InputProps = HTMLStyledProps<'input'>; - -export function Input(props: InputProps) { - return ( - - ); -} diff --git a/src/app/ui/components/input/input.stories.tsx b/src/app/ui/components/input/input.stories.tsx new file mode 100644 index 00000000000..2c5b304b0ce --- /dev/null +++ b/src/app/ui/components/input/input.stories.tsx @@ -0,0 +1,51 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Input } from './input'; + +const meta: Meta = { + component: Input.Root, + tags: ['autodocs'], + title: 'Input', +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + Label + + + ), +}; + +export const Error: Story = { + render: () => ( + + Error field + + + ), +}; + +export const DefaultValue: Story = { + render: () => ( + + Description + + + ), +}; + +/** + * When using a placeholder, the label *must* come after the `Input.Field`. + */ +export const WithPlaceholder: Story = { + render: () => ( + + + Error field + + ), +}; diff --git a/src/app/ui/components/input/input.tsx b/src/app/ui/components/input/input.tsx new file mode 100644 index 00000000000..7913408d99d --- /dev/null +++ b/src/app/ui/components/input/input.tsx @@ -0,0 +1,163 @@ +import { + type ComponentProps, + createContext, + forwardRef, + useContext, + useImperativeHandle, + useRef, + useState, +} from 'react'; + +import { sva } from 'leather-styles/css'; +import { SystemStyleObject } from 'leather-styles/types'; + +import { useOnMount } from '@app/common/hooks/use-on-mount'; +import { createStyleContext } from '@app/ui/utils/style-context'; + +const hackyDelayOneMs = 1; + +const transformedLabelStyles: SystemStyleObject = { + textStyle: 'label.03', + transform: 'translateY(-12px)', + fontWeight: 500, +}; + +const input = sva({ + slots: ['root', 'label', 'input'], + base: { + root: { + display: 'block', + pos: 'relative', + minHeight: '64px', + p: 'space.04', + ring: 'none', + textStyle: 'body.02', + minW: '220px', + zIndex: 4, + color: 'accent.text-subdued', + _before: { + content: '""', + // TODO: outdated design system file + rounded: '2px', + pos: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + border: 'default', + borderColor: 'accent.border-hover', + }, + '&[data-has-error]': { + color: 'error.label', + _before: { + borderColor: 'error.label', + borderWidth: '2px', + }, + }, + // Move the input's label to the top when the input has a value + '&[data-has-value="true"] label': transformedLabelStyles, + _focusWithin: { + '& label': { color: 'accent.text-primary', ...transformedLabelStyles }, + _before: { + border: 'action', + borderWidth: '2px', + }, + }, + }, + input: { + background: 'transparent', + appearance: 'none', + pos: 'absolute', + pt: '22px', + pb: '4px', + px: 'space.04', + top: 0, + left: 0, + right: 0, + bottom: 0, + zIndex: 5, + textStyle: 'body.01', + color: 'accent.text-primary', + _disabled: { + bg: 'accent.background-secondary', + cursor: 'not-allowed', + }, + _focus: { ring: 'none' }, + '&:placeholder-shown + label': transformedLabelStyles, + }, + label: { + pointerEvents: 'none', + pos: 'absolute', + top: '36%', + left: 'space.04', + zIndex: 9, + color: 'inherit', + textStyle: 'body.02', + transition: 'all 100ms ease-in-out', + }, + }, +}); + +const { withProvider, withContext } = createStyleContext(input); + +const InputContext = createContext( + null +); + +function useInputContext() { + const context = useContext(InputContext); + if (!context) throw new Error('useInputContext must be used within an Input.Root'); + return context; +} + +const RootBase = withProvider('div', 'root'); + +function Root(props: ComponentProps<'div'>) { + const [hasValue, setHasValue] = useState(false); + return ( + + + + ); +} + +const FieldBase = withContext('input', 'input'); + +const Field = forwardRef((props: ComponentProps<'input'>, ref) => { + const { setHasValue } = useInputContext(); + const innerRef = useRef(null); + + useImperativeHandle(ref, () => innerRef.current); + + // We need to determine whether the input has a value on it's initial + // render. In many places we use Formik to apply default form values. + // Formik sets these values after the initial render, so we need to wait + // before doing this check to see if there's a value. + useOnMount( + () => + void setTimeout(() => { + if (innerRef.current?.value !== '') setHasValue(true); + }, hackyDelayOneMs) + ); + + return ( + { + // Note: this logic to determine if the field is empty may have to be + // made dynamic to `input=type`, and potentially made configurable with + // a callback passed to `Input.Root` e.g. + // ``` + // typeof value === 'number' && value <= 0} /> + // ``` + if (e.target instanceof HTMLInputElement) setHasValue(e.target.value !== ''); + props.onInput?.(e); + }} + /> + ); +}); + +const Label = withContext('label', 'label'); + +export const Input = { Root, Field, Label }; diff --git a/src/app/ui/utils/style-context.tsx b/src/app/ui/utils/style-context.tsx new file mode 100644 index 00000000000..8cba84f2665 --- /dev/null +++ b/src/app/ui/utils/style-context.tsx @@ -0,0 +1,70 @@ +import { + ComponentProps, + ElementType, + JSX, + createContext, + createElement, + forwardRef, + useContext, +} from 'react'; + +// Copied from Panda docs. This logic is needed when composing together sva +// components, so they can share style state between slots. +// https://panda-css.com/docs/concepts/slot-recipes#styling-jsx-compound-components +type GenericProps = Record; +interface StyleRecipe { + (props?: GenericProps): Record; + splitVariantProps(props: GenericProps): any; +} +type StyleSlot = keyof ReturnType; +type StyleSlotRecipe = Record, string>; +type StyleVariantProps = Parameters[0]; +type CombineProps = Omit & U; + +const cx = (...args: (string | undefined)[]) => args.filter(Boolean).join(' '); + +interface ComponentVariants { + (props: CombineProps, StyleVariantProps>): JSX.Element; +} + +export const createStyleContext = (recipe: R) => { + const StyleContext = createContext | null>(null); + + const withProvider = ( + Component: T, + slot?: StyleSlot + ): ComponentVariants => { + const StyledComponent = forwardRef((props: ComponentProps, ref) => { + const [variantProps, otherProps] = recipe.splitVariantProps(props); + const slotStyles = recipe(variantProps) as StyleSlotRecipe; + return ( + + + + ); + }); + return StyledComponent as unknown as ComponentVariants; + }; + + const withContext = (Component: T, slot?: StyleSlot): T => { + if (!slot) return Component; + const StyledComponent = forwardRef((props: ComponentProps, ref) => { + const slotStyles = useContext(StyleContext); + return createElement(Component, { + ...props, + className: cx(slotStyles?.[slot ?? ''], props.className), + ref, + }); + }); + return StyledComponent as unknown as T; + }; + + return { + withProvider, + withContext, + }; +}; diff --git a/yarn.lock b/yarn.lock index f80eb53952f..175a983a6e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2674,37 +2674,38 @@ dependencies: "@octokit/openapi-types" "^19.1.0" -"@pandacss/config@0.26.2", "@pandacss/config@^0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/config/-/config-0.26.2.tgz#b235dd1847404670a6183d4da6766c70b41ca5cc" - integrity sha512-KG2UsDkspikdLDvDXDA6ieBm5ux4OOtQxMfrt2UM2DQUCxLijfqAcqdu0PnL7cCwironDWOZ/R/oRbzaRdbhAQ== - dependencies: - "@pandacss/error" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/preset-base" "0.26.2" - "@pandacss/preset-panda" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/config@0.27.1", "@pandacss/config@^0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/config/-/config-0.27.1.tgz#48376a8ab342d0e6f91fcd65d9df788c4ae06064" + integrity sha512-Q6I/kmVYHuYrJ7FmMtz0pAVn2GpRvR5i/RXahgxyvyYg+VsnazD+sxdGKC3JVX1x3SAHPzsB/iYi8DMuUfnqzQ== + dependencies: + "@pandacss/error" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/preset-base" "0.27.1" + "@pandacss/preset-panda" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/types" "0.27.1" bundle-n-require "^1.0.1" escalade "3.1.1" - jiti "^1.19.1" merge-anything "^5.1.7" microdiff "^1.3.2" typescript "^5.3.3" -"@pandacss/core@0.26.2", "@pandacss/core@^0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/core/-/core-0.26.2.tgz#15e73ee09585391cbc5fcb5b447c42886d65465e" - integrity sha512-b9t8iNaX1zO90rikwLTr5hQxF5Z7U2AUIpzmCu2BaIV/C5ne5i9V+1bPghI2ox6+DYnBHH4wRLfB6toBsIxtVw== - dependencies: - "@pandacss/error" "0.26.2" - "@pandacss/is-valid-prop" "^0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/core@0.27.1", "@pandacss/core@^0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/core/-/core-0.27.1.tgz#b5799085fd1547e51e6fe43bb3582dc8e2ba4ad9" + integrity sha512-+LEseOVWuB0rD37CuJNcAXcyONs2aBgyO2DRwsShwfmUk0fA4yhYHd+Cm+v7q9fMAoExt2RSVcK0cSJ6AymrjA== + dependencies: + "@pandacss/error" "0.27.1" + "@pandacss/is-valid-prop" "^0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" autoprefixer "10.4.15" + browserslist "^4.22.2" hookable "5.5.3" + lightningcss "^1.22.1" lodash.merge "4.6.2" outdent " ^0.8.0" postcss "^8.4.31" @@ -2717,82 +2718,83 @@ postcss-selector-parser "^6.0.13" ts-pattern "5.0.5" -"@pandacss/dev@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/dev/-/dev-0.26.2.tgz#2b6ddb1f9486463f82ce0c1ffd9757a3087ef3b9" - integrity sha512-g6ndBd4AgikOMDS8eUrPqmvXPlxpAaD8BQyLGeFJojWsYlcQ0C4DwjzmEDUvij2jr22kAtm5gs9iUEpuCmZ6Tw== +"@pandacss/dev@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/dev/-/dev-0.27.1.tgz#1650cbd96a5ddd2864a4c861ba9f0be1d6bc4b26" + integrity sha512-Nd75L1RtVLafLCHq/USmcvUCynEhwuStRTxzW0bJUg8bOtr1lLQxCTuu4SCUNUzPmxtuviF5LCq2LxVmqw2H0w== dependencies: "@clack/prompts" "^0.6.3" - "@pandacss/config" "0.26.2" - "@pandacss/error" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/node" "0.26.2" - "@pandacss/postcss" "0.26.2" - "@pandacss/preset-panda" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" + "@pandacss/config" "0.27.1" + "@pandacss/error" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/node" "0.27.1" + "@pandacss/postcss" "0.27.1" + "@pandacss/preset-panda" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" cac "6.7.14" - pathe "1.1.1" + pathe "1.1.2" -"@pandacss/error@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/error/-/error-0.26.2.tgz#d5c302741aff2d302fde307b42bc6b7313e7e471" - integrity sha512-tDRU9nuIFWzOIw78O3f+7yb0ulWwbLhgL3OyL0fE74EoD6bgiyV8NQWoVHC1Xw5TyT+81+3ir/ZCLmksJwvnjg== +"@pandacss/error@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/error/-/error-0.27.1.tgz#886bbcd7c4efc552d42744ac17f2e70f7cd1ab4d" + integrity sha512-oNO7Ydy3fy/PINznK9+WfrCqQbWKu9nhJUguOKBBfw9tkOG3vhnWsGHjBLRE1lP7IfM80d0usJ0tX3KYjaSdAg== -"@pandacss/extractor@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/extractor/-/extractor-0.26.2.tgz#093f7c7901df96622620f262e913f6d31a593e19" - integrity sha512-UOlZK3wb1p0fh5Do7RcQiCLfPkijXzWH6v7h9Evm7fWWEgLy95EIQjeTwc3C6sZvYeRUmmimb11oWccI9kzRiw== +"@pandacss/extractor@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/extractor/-/extractor-0.27.1.tgz#c80a9d6b0f60595a776c9750e56d388542c3164b" + integrity sha512-Qh/tPrjqoJ/RUgV+urPbHwKWgkYsdIzyZvTQSWUkihXCF7Q97LWEOQrKSg0tmckF12Ixgk8Ew3I+8LfmWSH/Ug== dependencies: ts-evaluator "^1.1.0" ts-morph "19.0.0" -"@pandacss/generator@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/generator/-/generator-0.26.2.tgz#0007450ee88b1d4f8ede214bd299223d6197aed0" - integrity sha512-g9iBhM85Cj4aoooH4D+qx2Gx4tGmQfKRE5ArE/9KcG1qzFofOqd7rnnDkwiiB4aAMibNl30Lsgdu49r9UQLglw== - dependencies: - "@pandacss/core" "0.26.2" - "@pandacss/is-valid-prop" "^0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/generator@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/generator/-/generator-0.27.1.tgz#af5010bfb5adcff26419cbc2b21e4b884461a3cd" + integrity sha512-Xf0f3vbtbN60tvhXHi7cyVZEilZLdIZpM7zzIZtbKoeEn4owCk2z1Y/cATyMYyRaBBmBEjfwL49/cwnxNsGFXQ== + dependencies: + "@pandacss/core" "0.27.1" + "@pandacss/is-valid-prop" "^0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" javascript-stringify "2.1.0" outdent " ^0.8.0" pluralize "8.0.0" postcss "^8.4.31" ts-pattern "5.0.5" -"@pandacss/is-valid-prop@^0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/is-valid-prop/-/is-valid-prop-0.26.2.tgz#d4d97e54272754fa6f7ca7a656fbdcf4e7ea8f65" - integrity sha512-W0OEs7jyN7EHeeczJMnVC0pNvjyQvyELGVeWlP98byred4eiXDZM9390FVyok4MUxPyEGe+Mi6mSLZPwVZT/kQ== +"@pandacss/is-valid-prop@^0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/is-valid-prop/-/is-valid-prop-0.27.1.tgz#a39bc21815f6ffcac02a94fd424eb47a81f8454e" + integrity sha512-jPtBBqsKxUCGOYIOZCgVHu2CzTexSYl5FDLgl52fIYYYiWJ4smYbYaqYpgkKLs+1XMjiYXK79XZnL8gNb+baPQ== -"@pandacss/logger@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/logger/-/logger-0.26.2.tgz#6b9215d0c18cf00c48f6d80e9a94b7f11199c417" - integrity sha512-VXp/zjCymsVLO8rOy8MAuaj91tw481NaJxNaSTxtuy4GCSAgybWybLbcQDL1VctTZV26kL9hPwpRmvT0hJv1cw== +"@pandacss/logger@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/logger/-/logger-0.27.1.tgz#f53b79fd826154b05f408f6acfc76ca5c6e79518" + integrity sha512-+dX+k8YAGTXQVu7WGI8JwV+7w7lo8MDzNSsESK/HoDQelqXNauZJ/xJqDKIdIrbqIrUY8tYpWEB8xAAXQ9SIrg== dependencies: kleur "^4.1.5" lil-fp "1.4.5" -"@pandacss/node@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/node/-/node-0.26.2.tgz#0de887d36d1e629093fe6b47bd450065d7620a4c" - integrity sha512-07cbfT5vq155ThjVuThXBJRPZgOXXDg+ka5b9ZHzmX/fmQlf5C5r16ytps9G6vp9g/A5ihvB3F+pVdvt4RuyIw== - dependencies: - "@pandacss/config" "0.26.2" - "@pandacss/core" "0.26.2" - "@pandacss/error" "0.26.2" - "@pandacss/extractor" "0.26.2" - "@pandacss/generator" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/parser" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/node@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/node/-/node-0.27.1.tgz#79a93993f4fa89e3898539b167959f83723eb726" + integrity sha512-DRGKnGqg5JcBvzN8z/Cv+jwiSMm+UTfRD10ReH+rYUX4niRI16iQx4QP2fpPqTkP7auoZjBhPpKdmBOTpDiBRw== + dependencies: + "@pandacss/config" "0.27.1" + "@pandacss/core" "0.27.1" + "@pandacss/error" "0.27.1" + "@pandacss/extractor" "0.27.1" + "@pandacss/generator" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/parser" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" + browserslist "^4.22.2" chokidar "^3.5.3" fast-glob "^3.3.1" file-size "^1.0.0" @@ -2815,62 +2817,62 @@ ts-pattern "5.0.5" tsconfck "^2.1.2" -"@pandacss/parser@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/parser/-/parser-0.26.2.tgz#b289e51ff0e2bf6d1d539851228f4488e5184267" - integrity sha512-jzZV/yVFlYMpwIQWnAurgHLAIdUADC1saPSVls/Q8AenIouJdiKEwnoBjr5RcDLuely0Fez8Xbax3NkDcg2uMg== - dependencies: - "@pandacss/config" "^0.26.2" - "@pandacss/core" "^0.26.2" - "@pandacss/extractor" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/parser@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/parser/-/parser-0.27.1.tgz#ad686c4da52cb288d0eff685fbc10cae3179cbba" + integrity sha512-BgXVQl01dCeNu16bZTZ3xRutQoeMeeV2CL8slPYzCkRsdgtvsWXA8SW9omjH5frdd4VNMuzdS2twy76YTGyh6w== + dependencies: + "@pandacss/config" "^0.27.1" + "@pandacss/core" "^0.27.1" + "@pandacss/extractor" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/types" "0.27.1" "@vue/compiler-sfc" "3.3.4" magic-string "0.30.5" ts-morph "19.0.0" ts-pattern "5.0.5" -"@pandacss/postcss@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/postcss/-/postcss-0.26.2.tgz#1e25256e5ba12db13f017e3a0012e7e3007ea408" - integrity sha512-DSyHxvu+ILCytleib9a2+0nKNd6KvOA4f02qH96B/GNl4PmzNWzh7QrKRaUPiGuIN5J4xXWgHTz5Q5hsnjQ+bg== +"@pandacss/postcss@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/postcss/-/postcss-0.27.1.tgz#429fac1d2974f421d10af9e6e20a6c290ec9d416" + integrity sha512-C+k7VJvNmhGmhPTAvlTzJrN01i7gBTk9WP0MfamYbLCKXQEZSlffnlxDrFxfVs+f2RcT/cpTF5VlwDHPEvqnvQ== dependencies: - "@pandacss/node" "0.26.2" + "@pandacss/node" "0.27.1" postcss "^8.4.31" -"@pandacss/preset-base@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/preset-base/-/preset-base-0.26.2.tgz#6bdaffd6ac0604169207ab43a09569a1c65979a7" - integrity sha512-icasgvx/N2sAF8U4MS/YxzQAwVjlr7/u4tM0W1nD2kWlhzTUuW3wGtz2hMeh8xmPZnAzy748kCASmTKgEXLmuA== +"@pandacss/preset-base@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/preset-base/-/preset-base-0.27.1.tgz#b7c0af468c04efacfbe03efc928de9b775b46866" + integrity sha512-NsjqmXFhp6iohoj/QxvW19T/7gspJvpDtwNvGta9QGEm0qcjmI4+ju0Opxe0lI1a8xhdBgufnSaBaaJSIyiUSg== dependencies: - "@pandacss/types" "0.26.2" + "@pandacss/types" "0.27.1" -"@pandacss/preset-panda@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/preset-panda/-/preset-panda-0.26.2.tgz#e7f77a616831edf3135618688fa699314c65e3cc" - integrity sha512-l+V9zTw2JfHy95qLIZLiz/sWb+ftBGGM5jg/sKIbC4BvK4uHglqpRbLiY9K4d39BIS+gBA9sWB021n3pSwdi9Q== +"@pandacss/preset-panda@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/preset-panda/-/preset-panda-0.27.1.tgz#f9d4fa8a9bd54fa6818dc20dccdf2e74c5d7da4a" + integrity sha512-KBRTj6Z799UpP4j5IV1K3fQINa+DQcnFZUhAWiPPMT7rY7cBQKdvN7EYi903NTq9jJ8p9qf3ziOxa+eOY8zVrQ== dependencies: - "@pandacss/types" "0.26.2" + "@pandacss/types" "0.27.1" -"@pandacss/shared@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/shared/-/shared-0.26.2.tgz#5bd34ccca3134ce34091ef5ee1fda0cda3891c8a" - integrity sha512-pYmAIR2HHaRDpRQIeD5kgH72BVbgb0AYYpURZdGCf2d9WfJEJViGZlU3nB5pO1j8FG0FNpHdDEIFPHAcPk62qA== +"@pandacss/shared@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/shared/-/shared-0.27.1.tgz#8ec2cb6f71f8860174b6043bc2d3fc86a1055e47" + integrity sha512-hopFUhgq4tGca/08cyZqjEUyUZQcVYHIhRctpX9cV0792yipMO1jPXqbMxTDqJrwCjzOnE0RQNbetsHgXpp0bQ== -"@pandacss/token-dictionary@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/token-dictionary/-/token-dictionary-0.26.2.tgz#3246ba2651485de6cbdbfd06f87c42b34eee5b8b" - integrity sha512-5UNdG/KYtpQlFM/0MJv6Jc9ugTyboh8Fa6Ss7ReFZJr7MrvU5dAoLM5IzBktu1hcrhyos2UJFW3g6LBV4XRw/Q== +"@pandacss/token-dictionary@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/token-dictionary/-/token-dictionary-0.27.1.tgz#66b2d8b662dc32f86f24f34615b297fd914baf80" + integrity sha512-0oZ3dMraTBp3Qq/BM0Z8ddfeu4xj2z+8NJ042y3ENLfYceBJiQEI+8sQI4neh31YpoAeyNf1Kl+IL9RwDt3gNA== dependencies: - "@pandacss/shared" "0.26.2" - "@pandacss/types" "0.26.2" + "@pandacss/shared" "0.27.1" + "@pandacss/types" "0.27.1" ts-pattern "5.0.5" -"@pandacss/types@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/types/-/types-0.26.2.tgz#40f001ff16ac350f256038ad487d3595dae7f20e" - integrity sha512-jLDeTOt3QsHeC3qPod5a0HMGOlLlVzxGIw/uWuwBlVOPFyJ5FAPYYX0+J4ryyy9CObw0YtP6TS5WbvSsxKfZwQ== +"@pandacss/types@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/types/-/types-0.27.1.tgz#a10c62f6dd4a85c9ec9bc08b3e7cc190bf901538" + integrity sha512-7PGSvxOwFrKtqHJ9K4JPRk081xnjnW/lE9TIHZm3tHZmdKl7oOtJQs7j9syf1cksl0w66YwEIxeYTcaFJ9KdBw== "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -11014,6 +11016,11 @@ detect-indent@^6.1.0: resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6" integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA== +detect-libc@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" + integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg== + detect-libc@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.2.tgz#8ccf2ba9315350e1241b88d0ac3b0e1fbd99605d" @@ -14252,7 +14259,7 @@ jest-worker@^29.7.0: merge-stream "^2.0.0" supports-color "^8.0.0" -jiti@^1.19.1, jiti@^1.20.0: +jiti@^1.20.0: version "1.21.0" resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== @@ -14707,6 +14714,68 @@ lighthouse-logger@^1.0.0: debug "^2.6.9" marky "^1.2.2" +lightningcss-darwin-arm64@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.23.0.tgz#11780f37158a458cead5e89202f74cd99b926e36" + integrity sha512-kl4Pk3Q2lnE6AJ7Qaij47KNEfY2/UXRZBT/zqGA24B8qwkgllr/j7rclKOf1axcslNXvvUdztjo4Xqh39Yq1aA== + +lightningcss-darwin-x64@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.23.0.tgz#8394edaa04f0984b971eab42b6f68edb1258b3ed" + integrity sha512-KeRFCNoYfDdcolcFXvokVw+PXCapd2yHS1Diko1z1BhRz/nQuD5XyZmxjWdhmhN/zj5sH8YvWsp0/lPLVzqKpg== + +lightningcss-freebsd-x64@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.23.0.tgz#d3f6faddc424f17ed046e8be9ca97868a5f804ed" + integrity sha512-xhnhf0bWPuZxcqknvMDRFFo2TInrmQRWZGB0f6YoAsZX8Y+epfjHeeOIGCfAmgF0DgZxHwYc8mIR5tQU9/+ROA== + +lightningcss-linux-arm-gnueabihf@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.23.0.tgz#040e9718c9a9dc088322da33983a894564ffcb10" + integrity sha512-fBamf/bULvmWft9uuX+bZske236pUZEoUlaHNBjnueaCTJ/xd8eXgb0cEc7S5o0Nn6kxlauMBnqJpF70Bgq3zg== + +lightningcss-linux-arm64-gnu@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.23.0.tgz#05cfcfa2cf47a042ca11cfce520ae9f91e4efcdb" + integrity sha512-RS7sY77yVLOmZD6xW2uEHByYHhQi5JYWmgVumYY85BfNoVI3DupXSlzbw+b45A9NnVKq45+oXkiN6ouMMtTwfg== + +lightningcss-linux-arm64-musl@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.23.0.tgz#3212a10dff37c70808113fbcf7cbd1b63c6cbc6f" + integrity sha512-cU00LGb6GUXCwof6ACgSMKo3q7XYbsyTj0WsKHLi1nw7pV0NCq8nFTn6ZRBYLoKiV8t+jWl0Hv8KkgymmK5L5g== + +lightningcss-linux-x64-gnu@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.23.0.tgz#3b27da32889285b1c5de3f26094ee234054634fc" + integrity sha512-q4jdx5+5NfB0/qMbXbOmuC6oo7caPnFghJbIAV90cXZqgV8Am3miZhC4p+sQVdacqxfd+3nrle4C8icR3p1AYw== + +lightningcss-linux-x64-musl@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.23.0.tgz#ad65b5a944f10d966cc10070bf20f81ddadd4240" + integrity sha512-G9Ri3qpmF4qef2CV/80dADHKXRAQeQXpQTLx7AiQrBYQHqBjB75oxqj06FCIe5g4hNCqLPnM9fsO4CyiT1sFSQ== + +lightningcss-win32-x64-msvc@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.23.0.tgz#62f3f619a7bb44f8713973103fbe1bcbd9d455f9" + integrity sha512-1rcBDJLU+obPPJM6qR5fgBUiCdZwZLafZM5f9kwjFLkb/UBNIzmae39uCSmh71nzPCTXZqHbvwu23OWnWEz+eg== + +lightningcss@^1.22.1: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.23.0.tgz#58c94a533d02d8416d4f2ec9ab87641f61943c78" + integrity sha512-SEArWKMHhqn/0QzOtclIwH5pXIYQOUEkF8DgICd/105O+GCgd7jxjNod/QPnBCSWvpRHQBGVz5fQ9uScby03zA== + dependencies: + detect-libc "^1.0.3" + optionalDependencies: + lightningcss-darwin-arm64 "1.23.0" + lightningcss-darwin-x64 "1.23.0" + lightningcss-freebsd-x64 "1.23.0" + lightningcss-linux-arm-gnueabihf "1.23.0" + lightningcss-linux-arm64-gnu "1.23.0" + lightningcss-linux-arm64-musl "1.23.0" + lightningcss-linux-x64-gnu "1.23.0" + lightningcss-linux-x64-musl "1.23.0" + lightningcss-win32-x64-msvc "1.23.0" + lil-fp@1.4.5: version "1.4.5" resolved "https://registry.yarnpkg.com/lil-fp/-/lil-fp-1.4.5.tgz#4a188d41f92ebec7f0d1a43fd3eaa542593edd0b" @@ -16299,7 +16368,12 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -pathe@1.1.1, pathe@^1.1.0, pathe@^1.1.1: +pathe@1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec" + integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ== + +pathe@^1.1.0, pathe@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.1.tgz#1dd31d382b974ba69809adc9a7a347e65d84829a" integrity sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==