commit f38a7f74855bf8bc44b7561c11cbd2cba0cf5a53 parent 9bf6de9429a61970dd9b704515724932ff9c9063 Author: Florian Dold <dold@taler.net> Date: Sun, 17 May 2026 21:42:57 +0200 migrate from linaria to CSS modules Diffstat:
94 files changed, 4890 insertions(+), 5826 deletions(-)
diff --git a/contrib/build-fast-web.sh b/contrib/build-fast-web.sh @@ -102,16 +102,6 @@ function build_history() { esbuild $BUNDLE_OPTIONS vendor/history/modules/index.js > $DIST/history/index.js } -function build_linaria() { - mkdir -p $DIST/@linaria/{react,core} - mkdir -p $DIST/@emotion/is-prop-valid - - esbuild $BUNDLE_OPTIONS vendor/@emotion/is-prop-valid/index.js > $DIST/@emotion/is-prop-valid/index.js - - esbuild $BUNDLE_OPTIONS vendor/@linaria/packages/core/src/index.ts > $DIST/@linaria/core/index.js - esbuild $BUNDLE_OPTIONS --external:preact vendor/@linaria/packages/react/src/index.ts > $DIST/@linaria/react/index.js -} - function build_wallet_webextension() { rm -rf packages/taler-wallet-webextension/{node_modules,lib,dist,tsconfig.tsbuildinfo,extension} @@ -121,10 +111,8 @@ function build_wallet_webextension() { esbuild $BUNDLE_OPTIONS packages/taler-wallet-webextension/src/background.ts > $taler_wallet_webextension_dir/background.js esbuild $BUNDLE_OPTIONS packages/taler-wallet-webextension/src/browserWorkerEntry.ts > $taler_wallet_webextension_dir/browserWorkerEntry.js - # implemented as a script because right now esbuild binary does not support plugins - # FIXME: remove javascript when possible - node ./contrib/build-fast-with-linaria.mjs packages/taler-wallet-webextension/src/popupEntryPoint.tsx $taler_wallet_webextension_dir - node ./contrib/build-fast-with-linaria.mjs packages/taler-wallet-webextension/src/walletEntryPoint.tsx $taler_wallet_webextension_dir + esbuild $BUNDLE_OPTIONS --jsx-factory=h --jsx-fragment=Fragment --outdir=$taler_wallet_webextension_dir packages/taler-wallet-webextension/src/popupEntryPoint.tsx + esbuild $BUNDLE_OPTIONS --jsx-factory=h --jsx-fragment=Fragment --outdir=$taler_wallet_webextension_dir packages/taler-wallet-webextension/src/walletEntryPoint.tsx } @@ -141,6 +129,5 @@ build_preact_compat build_qrcode build_history -build_linaria build_wallet_webextension diff --git a/contrib/build-fast-with-linaria.mjs b/contrib/build-fast-with-linaria.mjs @@ -1,42 +0,0 @@ - -import linaria from '@linaria/esbuild' -import esbuild from 'esbuild' - -if (process.argv.length !== 4) { - console.log(` -Usage: - ${process.argv[1]} <entryPoint> <outDir> - -entryPoint: file to be converted -outputDir: destination directory -`) - process.exit(1) -} - -esbuild - .build({ - entryPoints: [process.argv[2]], - bundle: true, - outdir: process.argv[3], - minify: false, - nodePaths: ['build/web', 'vendor'], - loader: { - '.svg': 'dataurl', - '.png': 'dataurl', - }, - target: [ - 'esnext' - ], - format: 'esm', - jsxFactory: 'h', - jsxFragment: 'Fragment', - define: { - 'process.env.NODE_ENV' : '"development"', - }, - plugins: [ - linaria.default({ - sourceMap: true, - }), - ], - }) - .catch (() => process.exit(1)); diff --git a/package.json b/package.json @@ -12,8 +12,6 @@ }, "devDependencies": { "@babel/core": "7.13.16", - "@linaria/esbuild": "^3.0.0-beta.15", - "@linaria/shaker": "^3.0.0-beta.15", "esbuild": "^0.19.9", "prettier": "^3.8.3", "typedoc": "^0.25.4", diff --git a/packages/merchant-backend-ui/.gitignore b/packages/merchant-backend-ui/.gitignore @@ -6,4 +6,3 @@ /coverage /dist /.rollup.cache -/.linaria-cache diff --git a/packages/merchant-backend-ui/babel.config-linaria.json b/packages/merchant-backend-ui/babel.config-linaria.json @@ -1,27 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2022 Taler Systems S.A. - - GNU Taler is free software; you can redistribute it and/or modify it under the - terms of the GNU General Public License as published by the Free Software - Foundation; either version 3, or (at your option) any later version. - - GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY - WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR - A PARTICULAR PURPOSE. See the GNU General Public License for more details. - - You should have received a copy of the GNU General Public License along with - GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> - */ -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ -/* - * Linaria need pre-process typscript files into javascript before running. - * We choose to use the default preact-cli config. - * This file should be used from @linaria/rollup plugin only - */ -{ - "plugins": ["./trim-extension.cjs"], -} diff --git a/packages/merchant-backend-ui/build.mjs b/packages/merchant-backend-ui/build.mjs @@ -18,7 +18,6 @@ import esbuild from "esbuild"; import path from "node:path"; import fs from "node:fs"; -import linaria from '@linaria/esbuild' // eslint-disable-next-line no-undef const BASE = process.cwd(); @@ -151,13 +150,6 @@ export const buildConfig = { __GIT_HASH__: `"${GIT_HASH}"`, }, plugins: [ - linaria.default({ - babelOptions: { - babelrc: false, - configFile: './babel.config-linaria.json', - }, - sourceMap: true, - }), preactCompatPlugin, templatePlugin({ pages, langs }) ], diff --git a/packages/merchant-backend-ui/package.json b/packages/merchant-backend-ui/package.json @@ -45,18 +45,11 @@ "devDependencies": { "@babel/core": "7.18.9", "@gnu-taler/pogen": "workspace:*", - "@linaria/babel-preset": "3.0.0-beta.22", - "@linaria/core": "3.0.0-beta.22", - "@linaria/react": "3.0.0-beta.22", - "@linaria/shaker": "3.0.0-beta.22", - "@linaria/webpack-loader": "3.0.0-beta.22", "@types/mocha": "^8.2.2", "@types/mustache": "^4.1.2", "@types/node": "^20.11.13", "@typescript-eslint/eslint-plugin": "^8.59.3", "@typescript-eslint/parser": "^8.59.3", - "babel-loader": "^8.2.2", - "base64-inline-loader": "^1.1.1", "eslint": "^10.3.0", "eslint-config-preact": "^2.0.0", "eslint-plugin-header": "^3.1.1", diff --git a/packages/merchant-backend-ui/src/custom.d.ts b/packages/merchant-backend-ui/src/custom.d.ts @@ -38,3 +38,8 @@ declare module '*.scss' { const content: Record<string, string>; export default content; } + +declare module '*.module.css' { + const classes: { [key: string]: string }; + export default classes; +} diff --git a/packages/merchant-backend-ui/src/styled/index.module.css b/packages/merchant-backend-ui/src/styled/index.module.css @@ -0,0 +1,176 @@ +/* + This file is part of GNU Taler + (C) 2021 Taler Systems S.A. + + GNU Taler is free software; you can redistribute it and/or modify it under the + terms of the GNU General Public License as published by the Free Software + Foundation; either version 3, or (at your option) any later version. + + GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY + WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR + A PARTICULAR PURPOSE. See the GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along with + GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> + */ + +.QRPlaceholder { + margin: auto; + text-align: center; + width: 340px; +} + +.FooterBar { + text-align: center; + background-color: #033; + color: white; + padding: 1em; + overflow: auto; +} + +.FooterBar > p > a:link, +.FooterBar > p > a:visited, +.FooterBar > p > a:hover, +.FooterBar > p > a:active { + color: white; +} + +.Page { + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 100vh; + align-items: center; +} + +.Page a:link, +.Page a:visited, +.Page a:hover, +.Page a:active { + color: black; +} + +.Page section { + text-align: center; + width: calc(100% - 20px); + margin-bottom: auto; + padding-left: 10px; + padding-right: 10px; +} + +.Page section:not(:first-of-type) { + margin-top: 2em; +} + +.Page > header { + display: flex; + flex-direction: row; + justify-content: space-between; + text-align: center; +} + +.Page > footer { + display: flex; + flex-direction: row; + justify-content: space-around; + width: 100%; + margin-bottom: 0px; +} + +.Center { + display: flex; + justify-content: center; +} + +.WalletLink { + display: inline-block; + zoom: 1; + line-height: normal; + white-space: nowrap; + vertical-align: middle; + text-align: center; + cursor: pointer; + user-select: none; + box-sizing: border-box; + + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + color: #444; /* rgba not supported (IE 8) */ + color: rgba(0, 0, 0, 0.8); /* rgba supported */ + border: 1px solid #999; /*IE 6/7/8*/ + border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ + background-color: #e6e6e6; + text-decoration: none; + border-radius: 2px; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); + box-shadow: + 0 0 0 1px rgba(0, 0, 0, 0.15) inset, + 0 0 6px rgba(0, 0, 0, 0.2) inset; + border-color: #000; +} + +.WalletLink:focus { + outline: 0; +} + +.WalletLink:disabled { + border: none; + background-image: none; + /* csslint ignore:start */ + filter: alpha(opacity=40); + /* csslint ignore:end */ + opacity: 0.4; + cursor: not-allowed; + box-shadow: none; + pointer-events: none; +} + +.WalletLink:hover { + filter: alpha(opacity=90); + background-image: linear-gradient( + transparent, + rgba(0, 0, 0, 0.05) 40%, + rgba(0, 0, 0, 0.1) + ); +} + +.InfoBox { + border-radius: 0.25em; + flex-direction: column; + /* margin: 0.5em; */ + padding: 1em; + /* width: 100%; */ + border: solid 1px #b8daff; + background-color: #cce5ff; + color: #004085; +} + +.TableExpanded { + text-align: left; +} + +.TableExpanded dt { + font-weight: bold; + margin-top: 1em; +} + +.TableExpanded dd { + margin-inline-start: 0px; +} + +.TableSimple { + text-align: left; +} + +.TableSimple dt { + font-weight: bold; + display: inline-block; + width: 30%; +} + +.TableSimple dd { + margin-inline-start: 0px; + display: inline-block; + width: 70%; +} diff --git a/packages/merchant-backend-ui/src/styled/index.tsx b/packages/merchant-backend-ui/src/styled/index.tsx @@ -18,160 +18,47 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { styled } from '@linaria/react' - -export const QRPlaceholder = styled.div` - margin: auto; - text-align: center; - width: 340px; -` - -export const FooterBar = styled.footer` - text-align: center; - background-color: #033; - color: white; - padding: 1em; - overflow: auto; - - & > p > a:link, - & > p > a:visited, - & > p > a:hover, - & > p > a:active { - color: white; - } -` - -export const Page = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; - min-height: 100vh; - align-items: center; - - a:link, - a:visited, - a:hover, - a:active { - color: black; - } - - section { - text-align: center; - width: calc(100% - 20px); - margin-bottom: auto; - padding-left: 10px; - padding-right: 10px; - } - section:not(:first-of-type) { - margin-top: 2em; - } - & > header { - display: flex; - flex-direction: row; - justify-content: space-between; - text-align: center; - } - & > footer { - display: flex; - flex-direction: row; - justify-content: space-around; - width: 100%; - margin-bottom: 0px; - } -` -export const Center = styled.div` - display: flex; - justify-content: center; -` - -export const WalletLink = styled.a<{ upperCased?: boolean }>` - display: inline-block; - zoom: 1; - line-height: normal; - white-space: nowrap; - vertical-align: middle; - text-align: center; - cursor: pointer; - user-select: none; - box-sizing: border-box; - text-transform: ${({ upperCased }) => upperCased ? 'uppercase' : 'none'}; - - font-family: inherit; - font-size: 100%; - padding: 0.5em 1em; - color: #444; /* rgba not supported (IE 8) */ - color: rgba(0, 0, 0, 0.8); /* rgba supported */ - border: 1px solid #999; /*IE 6/7/8*/ - border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ - background-color: '#e6e6e6'; - text-decoration: none; - border-radius: 2px; - - :focus { - outline: 0; - } - - &:disabled { - border: none; - background-image: none; - /* csslint ignore:start */ - filter: alpha(opacity=40); - /* csslint ignore:end */ - opacity: 0.4; - cursor: not-allowed; - box-shadow: none; - pointer-events: none; - } - - :hover { - filter: alpha(opacity=90); - background-image: linear-gradient( - transparent, - rgba(0, 0, 0, 0.05) 40%, - rgba(0, 0, 0, 0.1) - ); - } - - background-color: #e6e6e6; - border-radius: 4px; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset, - 0 0 6px rgba(0, 0, 0, 0.2) inset; - border-color: #000; -`; - -export const InfoBox = styled.div` - border-radius: 0.25em; - flex-direction: column; - /* margin: 0.5em; */ - padding: 1em; - /* width: 100%; */ - border:solid 1px #b8daff; - background-color:#cce5ff; - color:#004085; -` - -export const TableExpanded = styled.dl` - text-align: left; - dt { - font-weight: bold; - margin-top: 1em; - } - dd { - margin-inline-start: 0px; - } -` - -export const TableSimple = styled.dl` - text-align: left; - dt { - font-weight: bold; - display: inline-block; - width:30%; - } - dd { - margin-inline-start: 0px; - display: inline-block; - width:70%; - } -` -\ No newline at end of file +import { h, JSX } from "preact"; +import styles from "./index.module.css"; + +function classNames(...classes: (string | undefined | null | false)[]) { + return classes.filter(Boolean).join(" "); +} + +export function QRPlaceholder(props: JSX.HTMLAttributes<HTMLDivElement>) { + return <div {...props} class={classNames(styles.QRPlaceholder, props.class as string)} />; +} + +export function FooterBar(props: JSX.HTMLAttributes<HTMLElement>) { + return <footer {...props} class={classNames(styles.FooterBar, props.class as string)} />; +} + +export function Page(props: JSX.HTMLAttributes<HTMLDivElement>) { + return <div {...props} class={classNames(styles.Page, props.class as string)} />; +} + +export function Center(props: JSX.HTMLAttributes<HTMLDivElement>) { + return <div {...props} class={classNames(styles.Center, props.class as string)} />; +} + +export interface WalletLinkProps extends JSX.HTMLAttributes<HTMLAnchorElement> { + upperCased?: boolean; +} + +export function WalletLink(props: WalletLinkProps) { + const { upperCased, style, ...rest } = props; + const linkStyle = upperCased ? { textTransform: "uppercase", ...((style as object) || {}) } : style; + return <a {...rest} style={linkStyle} class={classNames(styles.WalletLink, props.class as string)} />; +} + +export function InfoBox(props: JSX.HTMLAttributes<HTMLDivElement>) { + return <div {...props} class={classNames(styles.InfoBox, props.class as string)} />; +} + +export function TableExpanded(props: JSX.HTMLAttributes<HTMLDListElement>) { + return <dl {...props} class={classNames(styles.TableExpanded, props.class as string)} />; +} + +export function TableSimple(props: JSX.HTMLAttributes<HTMLDListElement>) { + return <dl {...props} class={classNames(styles.TableSimple, props.class as string)} />; +} diff --git a/packages/merchant-backend-ui/trim-extension.cjs b/packages/merchant-backend-ui/trim-extension.cjs @@ -1,5 +1,5 @@ // Simple plugin to trim extensions from the filename of relative import statements. -// Required to get linaria to work with `moduleResulution: "Node16"` imports. +// Required to get standard build tools to work with `moduleResulution: "Node16"` imports. // @author Florian Dold module.exports = function({ types: t }) { return { diff --git a/packages/taler-wallet-webextension/.gitignore b/packages/taler-wallet-webextension/.gitignore @@ -1,6 +1,5 @@ extension/ /storybook-static/ -/.linaria-cache/ /lib /coverage /extension-dev/ diff --git a/packages/taler-wallet-webextension/build.mjs b/packages/taler-wallet-webextension/build.mjs @@ -16,8 +16,6 @@ */ import { build } from "@gnu-taler/web-util/build"; -import linaria from "@linaria/esbuild"; -import { shakerPlugin } from "@linaria/shaker"; await build({ type: process.env.DEV ? "development":"production", @@ -33,18 +31,4 @@ await build({ ], }, destination: "./dist/prod", - css: "linaria", - linariaPlugin: () => { - // linaria has a bug if this run in web-util library - return linaria({ - babelOptions: { - presets: [ - "@babel/preset-typescript", - "@babel/preset-react", - "@linaria", - ], - }, - // sourceMap: true, - }); - }, }); diff --git a/packages/taler-wallet-webextension/clean_and_build.sh b/packages/taler-wallet-webextension/clean_and_build.sh @@ -2,7 +2,7 @@ set -e -rm -rf dist lib tsconfig.tsbuildinfo .linaria-cache +rm -rf dist lib tsconfig.tsbuildinfo echo typecheck and bundle... node build.mjs & diff --git a/packages/taler-wallet-webextension/dev.mjs b/packages/taler-wallet-webextension/dev.mjs @@ -17,7 +17,6 @@ import { getFilesInDirectory, initializeDev } from "@gnu-taler/web-util/build"; import { serve } from "@gnu-taler/web-util/node"; -import linaria from "@linaria/esbuild"; const allStaticFiles = getFilesInDirectory("src/pwa"); @@ -40,20 +39,6 @@ const build = initializeDev({ }, destination: "./dist/dev", public: "/app", - css: "linaria", - linariaPlugin: () => { - // linaria has a bug if this run in web-util library - return linaria({ - babelOptions: { - presets: [ - "@babel/preset-typescript", - "@babel/preset-react", - "@linaria", - ], - }, - sourceMap: true, - }); - }, }, { dontDoLiveReload: true }); diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json @@ -38,11 +38,6 @@ "@babel/preset-typescript": "7.18.6", "@gnu-taler/pogen": "workspace:*", "@gnu-taler/web-util": "workspace:*", - "@linaria/babel-preset": "5.0.4", - "@linaria/core": "5.0.2", - "@linaria/esbuild": "5.0.4", - "@linaria/react": "5.0.3", - "@linaria/shaker": "5.0.3", "@types/chai": "^4.3.0", "@types/chrome": "0.0.197", "@types/history": "^4.7.8", diff --git a/packages/taler-wallet-webextension/src/components/Amount.stories.module.css b/packages/taler-wallet-webextension/src/components/Amount.stories.module.css @@ -0,0 +1,4 @@ +.table td { + padding: 4px; + border-bottom: 1px solid black; +} diff --git a/packages/taler-wallet-webextension/src/components/Amount.stories.tsx b/packages/taler-wallet-webextension/src/components/Amount.stories.tsx @@ -19,31 +19,22 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { styled } from "@linaria/react"; -import { Fragment, h, VNode } from "preact"; -import { Amount } from "./Amount.js"; import { AmountString } from "@gnu-taler/taler-util"; +import { h, VNode } from "preact"; +import { Amount } from "./Amount.js"; +import styles from "./Amount.stories.module.css"; export default { title: "amount", component: Amount, }; -const Table = styled.table` - td { - padding: 4px; - } - td { - border-bottom: 1px solid black; - } -`; - function ProductTable( prods: string[], AmountRender: (p: { value: AmountString; index: number }) => VNode = Amount, ): VNode { return ( - <Table> + <table class={styles.table}> <tr> <td>product</td> <td>price</td> @@ -59,7 +50,7 @@ function ProductTable( </tr> ); })} - </Table> + </table> ); } diff --git a/packages/taler-wallet-webextension/src/components/Loading.module.css b/packages/taler-wallet-webextension/src/components/Loading.module.css @@ -0,0 +1,62 @@ +.fadeIn { + animation: fadein 3s; +} + +@keyframes fadein { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.ripple { + display: inline-block; + position: relative; + width: var(--size); + height: var(--size); +} + +.ripple div { + position: absolute; + border: 4px solid black; + opacity: 1; + border-radius: 50%; + animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; +} + +.ripple div:nth-child(2) { + animation-delay: -0.3s; +} + +@keyframes lds-ripple { + 0% { + top: calc(var(--size) / 2); + left: calc(var(--size) / 2); + width: 0; + height: 0; + opacity: 0; + } + 14.9% { + top: calc(var(--size) / 2); + left: calc(var(--size) / 2); + width: 0; + height: 0; + opacity: 0; + } + 15% { + top: calc(var(--size) / 2); + left: calc(var(--size) / 2); + width: 0; + height: 0; + opacity: 1; + } + 100% { + top: 0px; + left: 0px; + width: var(--size); + height: var(--size); + opacity: 0; + } +} diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx @@ -13,88 +13,27 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; -import { Fragment, h, VNode } from "preact"; -import { useEffect, useState } from "preact/hooks"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { h, VNode } from "preact"; import ProgressIcon from "../svg/progress.inline.svg"; +import styles from "./Loading.module.css"; import { CenteredText } from "./styled/index.js"; -const fadeIn = css` - & { - animation: fadein 3s; - } - @keyframes fadein { - from { - opacity: 0; - } - to { - opacity: 1; - } - } -`; - export function Loading(): VNode { const { i18n } = useTranslationContext(); return ( <section style={{ margin: "auto" }}> - <CenteredText class={fadeIn}> + <CenteredText className={styles.fadeIn}> <i18n.Translate>Loading</i18n.Translate>... </CenteredText> - {/* <div class={ripple} style={{ "--size": "250px" }}> + {/* <div className={styles.ripple} style={{ "--size": "250px" }}> <div></div> <div></div> </div> */} - <div class={fadeIn} dangerouslySetInnerHTML={{ __html: ProgressIcon }} /> + <div + className={styles.fadeIn} + dangerouslySetInnerHTML={{ __html: ProgressIcon }} + /> </section> ); } - -const ripple = css` - & { - display: inline-block; - position: relative; - width: var(--size); - height: var(--size); - } - & div { - position: absolute; - border: 4px solid black; - opacity: 1; - border-radius: 50%; - animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; - } - & div:nth-child(2) { - animation-delay: -0.3s; - } - @keyframes lds-ripple { - 0% { - top: calc(var(--size) / 2); - left: calc(var(--size) / 2); - width: 0; - height: 0; - opacity: 0; - } - 14.9% { - top: calc(var(--size) / 2); - left: calc(var(--size) / 2); - width: 0; - height: 0; - opacity: 0; - } - 15% { - top: calc(var(--size) / 2); - left: calc(var(--size) / 2); - width: 0; - height: 0; - opacity: 1; - } - 100% { - top: 0px; - left: 0px; - width: var(--size); - height: var(--size); - opacity: 0; - } - } -`; diff --git a/packages/taler-wallet-webextension/src/components/Modal.module.css b/packages/taler-wallet-webextension/src/components/Modal.module.css @@ -0,0 +1,23 @@ +.fullSize { + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + z-index: 10; +} + +.header { + display: flex; + justify-content: space-between; + height: 5%; + vertical-align: center; + align-items: center; +} + +.body { + height: 95%; +} diff --git a/packages/taler-wallet-webextension/src/components/Modal.tsx b/packages/taler-wallet-webextension/src/components/Modal.tsx @@ -14,10 +14,10 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { styled } from "@linaria/react"; import { ComponentChildren, h, VNode } from "preact"; import { ButtonHandler } from "../mui/handlers.js"; import closeIcon from "../svg/close_24px.inline.svg"; +import styles from "./Modal.module.css"; import { Link } from "./styled/index.js"; interface Props { @@ -26,30 +26,6 @@ interface Props { title: string; } -const FullSize = styled.div` - position: absolute; - top: 0px; - left: 0px; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.5); - display: flex; - justify-content: center; - z-index: 10; -`; - -const Header = styled.div` - display: flex; - justify-content: space-between; - height: 5%; - vertical-align: center; - align-items: center; -`; - -const Body = styled.div` - height: 95%; -`; - export function Modal({ title, children, onClose }: Props): VNode { return ( <div @@ -62,7 +38,7 @@ export function Modal({ title, children, onClose }: Props): VNode { zIndex: 100, }} > - <FullSize onClick={onClose?.onClick}> + <div className={styles.fullSize} onClick={onClose?.onClick}> <div onClick={(e) => e.stopPropagation()} style={{ @@ -76,7 +52,7 @@ export function Modal({ title, children, onClose }: Props): VNode { // overflow: "scroll", }} > - <Header> + <div className={styles.header}> <div> <h2>{title}</h2> </div> @@ -92,12 +68,17 @@ export function Modal({ title, children, onClose }: Props): VNode { dangerouslySetInnerHTML={{ __html: closeIcon }} /> </Link> - </Header> + </div> <hr /> - <Body onClick={(e: any) => e.stopPropagation()}>{children}</Body> + <div + className={styles.body} + onClick={(e: any) => e.stopPropagation()} + > + {children} + </div> </div> - </FullSize> + </div> </div> ); } diff --git a/packages/taler-wallet-webextension/src/components/Part.module.css b/packages/taler-wallet-webextension/src/components/Part.module.css @@ -0,0 +1,27 @@ +.collapsibleBox { + border: 1px solid black; + border-radius: 0.25em; + display: flex; + vertical-align: middle; + justify-content: space-between; + flex-direction: column; + padding: 0.5em; +} + +.collapsibleBox > div { + display: flex; + justify-content: space-between; +} + +.collapsibleBox > div div { + margin-top: auto; + margin-bottom: auto; +} + +.collapsibleBox > div > button { + align-self: center; + font-size: 100%; + padding: 0; + height: 28px; + width: 28px; +} diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx @@ -20,10 +20,10 @@ import { TranslatedString, } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { styled } from "@linaria/react"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, h, JSX, VNode } from "preact"; import { useState } from "preact/hooks"; import arrowDown from "../svg/chevron-down.inline.svg"; +import styles from "./Part.module.css"; import { ExtraLargeText, LargeText, SmallBoldText } from "./styled/index.js"; export type Kind = "positive" | "negative" | "neutral"; @@ -63,42 +63,11 @@ export function Part({ ); } -const CollasibleBox = styled.div` - border: 1px solid black; - border-radius: 0.25em; - display: flex; - vertical-align: middle; - justify-content: space-between; - flex-direction: column; - /* margin: 0.5em; */ - padding: 0.5em; - /* margin: 1em; */ - /* width: 100%; */ - /* color: #721c24; */ - /* background: #f8d7da; */ - - & > div { - display: flex; - justify-content: space-between; - div { - margin-top: auto; - margin-bottom: auto; - } - & > button { - align-self: center; - font-size: 100%; - padding: 0; - height: 28px; - width: 28px; - } - } -`; - export function PartCollapsible({ text, title }: Props): VNode { const [collapsed, setCollapsed] = useState(true); return ( - <CollasibleBox> + <div className={styles.collapsibleBox}> <div> <SmallBoldText>{title}</SmallBoldText> <button @@ -126,7 +95,7 @@ export function PartCollapsible({ text, title }: Props): VNode { </SmallBoldText> */} {!collapsed && <div style={{ display: "block" }}>{text}</div>} - </CollasibleBox> + </div> ); } diff --git a/packages/taler-wallet-webextension/src/components/ShowBanksForPaytoPopup.module.css b/packages/taler-wallet-webextension/src/components/ShowBanksForPaytoPopup.module.css @@ -0,0 +1,20 @@ +.banksTable { + width: 100%; + border-spacing: 0px; +} + +.banksTable > tr > td, +.banksTable > tbody > tr > td { + padding: 5px; +} + +.banksTable > tr > td:nth-child(2n), +.banksTable > tbody > tr > td:nth-child(2n) { + text-align: right; + overflow-wrap: anywhere; +} + +.banksTable > tr:nth-child(2n), +.banksTable > tbody > tr:nth-child(2n) { + background: #ebebeb; +} diff --git a/packages/taler-wallet-webextension/src/components/ShowBanksForPaytoPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowBanksForPaytoPopup.tsx @@ -15,25 +15,10 @@ */ import { BankingChoiceSpec } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { styled } from "@linaria/react"; -import { Fragment, h, VNode } from "preact"; +import { h, VNode } from "preact"; import { ButtonHandler } from "../mui/handlers.js"; import { Modal } from "./Modal.js"; - -const BanksTable = styled.table` - width: 100%; - border-spacing: 0px; - & > tr > td { - padding: 5px; - } - & > tr > td:nth-child(2n) { - text-align: right; - overflow-wrap: anywhere; - } - & > tr:nth-child(2n) { - background: #ebebeb; - } -`; +import styles from "./ShowBanksForPaytoPopup.module.css"; interface Props { banks: BankingChoiceSpec[]; @@ -46,7 +31,7 @@ export function ShowBanksForPaytoPopup({ banks, onClose }: Props): VNode { return ( <Modal title="Supported banks" onClose={onClose}> <div style={{ overflowY: "auto", height: "95%", padding: 5 }}> - <BanksTable> + <table class={styles.banksTable}> {banks.map((b, idx) => { return ( <tr key={idx}> @@ -56,7 +41,7 @@ export function ShowBanksForPaytoPopup({ banks, onClose }: Props): VNode { </tr> ); })} - </BanksTable> + </table> </div> </Modal> ); diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.module.css b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.module.css @@ -0,0 +1,20 @@ +.contractTermsTable { + width: 100%; + border-spacing: 0px; +} + +.contractTermsTable > tr > td, +.contractTermsTable > tbody > tr > td { + padding: 5px; +} + +.contractTermsTable > tr > td:nth-child(2n), +.contractTermsTable > tbody > tr > td:nth-child(2n) { + text-align: right; + overflow-wrap: anywhere; +} + +.contractTermsTable > tr:nth-child(2n), +.contractTermsTable > tbody > tr:nth-child(2n) { + background: #ebebeb; +} diff --git a/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx b/packages/taler-wallet-webextension/src/components/ShowFullContractTermPopup.tsx @@ -18,12 +18,10 @@ import { Duration, Location, MerchantContractTerms, - MerchantContractVersion, TransactionIdStr, } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../components/Loading.js"; @@ -36,23 +34,9 @@ import { ButtonHandler } from "../mui/handlers.js"; import { compose, StateViewMap } from "../utils/index.js"; import { Amount } from "./Amount.js"; import { ErrorAlertView } from "./CurrentAlerts.js"; +import styles from "./ShowFullContractTermPopup.module.css"; import { Link } from "./styled/index.js"; -const ContractTermsTable = styled.table` - width: 100%; - border-spacing: 0px; - & > tr > td { - padding: 5px; - } - & > tr > td:nth-child(2n) { - text-align: right; - overflow-wrap: anywhere; - } - & > tr:nth-child(2n) { - background: #ebebeb; - } -`; - function locationAsText(l: Location | undefined): VNode { if (!l) return <span />; const lines = [ @@ -197,7 +181,7 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { return ( <Modal title="Full detail" onClose={hideHandler}> <div style={{ overflowY: "auto", height: "95%", padding: 5 }}> - <ContractTermsTable> + <table class={styles.contractTermsTable}> <tr> <td> <i18n.Translate>Order Id</i18n.Translate> @@ -397,7 +381,7 @@ export function ShowView({ contractTerms, hideHandler }: States.Show): VNode { ))} </td> </tr> - </ContractTermsTable> + </table> </div> </Modal> ); diff --git a/packages/taler-wallet-webextension/src/components/styled/index.module.css b/packages/taler-wallet-webextension/src/components/styled/index.module.css @@ -0,0 +1,1059 @@ +.paymentStatus { + padding: 5px; + border-radius: 5px; + color: white; + background-color: var(--color); +} + +.walletAction { + display: flex; + text-align: center; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: auto; +} + +.walletAction h1:first-child { + margin-top: 0; +} + +.walletAction > * { + width: 600px; +} + +.walletAction section { + margin-bottom: 2em; +} + +.walletAction section table td { + padding: 5px 5px; +} + +.walletAction section table tr { + border-bottom: 1px solid black; + border-top: 1px solid black; +} + +.walletAction section button { + margin-right: 8px; + margin-left: 8px; +} + +.walletActionOld { + border: solid 5px black; + border-radius: 10px; + margin-left: auto; + margin-right: auto; + padding-top: 2em; + max-width: 50%; + padding: 2em; + margin: auto; + height: 100%; +} + +.walletActionOld h1:first-child { + margin-top: 0; +} + +.title { + font-size: 2em; + margin-top: 1em; + margin-bottom: 1em; +} + +.subTitle { + font-size: 1.5em; + margin-top: 1em; + margin-bottom: 1em; +} + +.dateSeparator { + color: gray; + margin: 0.2em; + margin-top: 1em; +} + +.walletBox { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.walletBox > * { + width: 800px; +} + +.walletBox > section { + padding: var(--padding, 8px); + margin-bottom: auto; + overflow: auto; +} + +.walletBox > section table td { + padding: 5px 5px; +} + +.walletBox > section table tr { + border-bottom: 1px solid black; + border-top: 1px solid black; +} + +.walletBox > section button { + margin-right: 8px; + margin-left: 8px; +} + +.walletBox > header { + flex-direction: row; + justify-content: space-between; + display: flex; + padding: 8px; + margin-bottom: 5px; +} + +.walletBox > header > div { + align-self: center; +} + +.walletBox > header > h3 { + margin: 0px; +} + +.walletBox > header > .titleText { + font-size: large; + color: #3c4e92; +} + +.walletBox > footer { + padding-top: 8px; + padding-bottom: 8px; + flex-direction: row; + justify-content: space-between; + display: flex; +} + +.walletBox > footer button { + margin-right: 8px; + margin-left: 8px; +} + +.middle { + justify-content: space-around; + display: flex; + flex-direction: column; + height: 100%; +} + +.popupBox { + height: 290px; + width: 500px; + overflow-y: visible; + display: flex; + flex-direction: column; + justify-content: space-between; +} + +.popupBox > section { + padding: var(--padding, 8px); + margin-bottom: auto; + overflow-y: auto; +} + +.popupBox > section table td { + padding: 5px 10px; +} + +.popupBox > section table tr { + border-bottom: 1px solid black; + border-top: 1px solid black; +} + +.popupBox > section button { + margin-right: 8px; + margin-left: 8px; +} + +.popupBox > section[data-expanded] { + height: 100%; +} + +.popupBox > section[data-centered] { + justify-content: center; + display: flex; +} + +.popupBox > header { + flex-direction: row; + justify-content: space-between; + display: flex; + padding: 8px; + margin-bottom: 5px; +} + +.popupBox > header > div { + align-self: center; +} + +.popupBox > header > h3 { + margin: 0px; +} + +.popupBox > header > .titleText { + font-size: large; + color: #3c4e92; +} + +.popupBox > footer { + padding-top: 8px; + padding-bottom: 8px; + flex-direction: row; + justify-content: space-between; + display: flex; +} + +.popupBox > footer button { + margin-right: 8px; + margin-left: 8px; +} + +.tableWithRoundRows { + border-collapse: separate; + border-spacing: 0px 10px; + margin-top: -10px; +} + +.tableWithRoundRows td { + border: solid 1px #000; + border-style: solid none; + padding: 10px; +} + +.tableWithRoundRows td:first-child { + border-left-style: solid; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; +} + +.tableWithRoundRows td:last-child { + border-right-style: solid; + border-bottom-right-radius: 5px; + border-top-right-radius: 5px; +} + +.tooltip { + display: block; + position: relative; +} + +.tooltip::before { + position: absolute; + z-index: 1000001; + width: 0; + height: 0; + color: darkgray; + pointer-events: none; + content: ""; + border: 6px solid transparent; + border-bottom-color: darkgray; +} + +.tooltip::after { + position: absolute; + z-index: 1000001; + padding: 0.5em 0.75em; + font: + normal normal 11px/1.5 -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Helvetica, + Arial, + sans-serif, + "Apple Color Emoji", + "Segoe UI Emoji"; + -webkit-font-smoothing: subpixel-antialiased; + color: white; + text-align: center; + text-decoration: none; + text-shadow: none; + text-transform: none; + letter-spacing: normal; + word-wrap: break-word; + white-space: pre; + pointer-events: none; + content: attr(content); + background: darkgray; + border-radius: 6px; +} + +.tooltipBottom::before { + top: auto; + right: 50%; + bottom: -7px; + margin-right: -6px; +} + +.tooltipBottom::after { + top: 100%; + right: -50%; + margin-top: 6px; +} + +.tooltipRight::before { + top: 0px; + left: 16px; + transform: rotate(-90deg); +} + +.tooltipRight::after { + top: -50%; + left: 28px; + margin-top: 6px; +} + +.tooltipLeft::before { + top: 0px; + right: 16px; + transform: rotate(90deg); +} + +.tooltipLeft::after { + top: -50%; + right: 28px; + margin-top: 6px; +} + +.overlay { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: 2; + cursor: pointer; +} + +.notifyUpdateFadeOut { + border: 2px solid red; + transition: all 0.4s ease-out; + animation: fadeout 1s forwards; + animation-delay: 0.1s; +} + +@keyframes fadeout { + to { + border-color: #f5f5f5; + } +} + +.centeredDialog { + position: absolute; + text-align: left; + display: flex; + flex-direction: column; + justify-content: space-between; + top: 50%; + left: 50%; + color: black; + transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + cursor: initial; + background-color: white; + border-radius: 10px; + max-height: 70%; +} + +.centeredDialog > header { + border-top-right-radius: 6px; + border-top-left-radius: 6px; + padding: 10px; + background-color: #f5f5f5; + border-bottom: 1px solid #dbdbdb; + font-weight: bold; +} + +.centeredDialog > section { + padding: 10px; + flex-grow: 1; + flex-shrink: 1; + overflow: auto; +} + +.centeredDialog > footer { + border-top: 1px solid #dbdbdb; + border-bottom-right-radius: 6px; + border-bottom-left-radius: 6px; + padding: 10px; + display: flex; + justify-content: space-between; +} + +.button { + display: inline-block; + line-height: normal; + white-space: nowrap; + vertical-align: middle; + cursor: pointer; + user-select: none; + box-sizing: border-box; + text-transform: var(--text-transform, none); + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + color: rgba(0, 0, 0, 0.8); + border: 1px solid #999; + background-color: #e6e6e6; + text-decoration: none; + border-radius: 2px; +} + +.button:focus { + outline: 0; +} + +.button:disabled { + border: none; + background-image: none; + filter: alpha(opacity=40); + opacity: 0.4; + cursor: not-allowed; + box-shadow: none; + pointer-events: none; +} + +.button:hover { + filter: alpha(opacity=80); + background-image: linear-gradient( + transparent, + rgba(0, 0, 0, 0.1) 40%, + rgba(0, 0, 0, 0.2) + ); +} + +.link { + display: inline-block; + line-height: normal; + white-space: nowrap; + text-align: center; + cursor: pointer; + user-select: none; + box-sizing: border-box; + text-transform: var(--text-transform, none); + font-family: inherit; + font-size: 100%; + padding: 0.5em 1em; + background-color: transparent; + text-decoration: none; +} + +.link:focus { + outline: 0; +} + +.link:disabled { + border: none; + background-image: none; + filter: alpha(opacity=40); + opacity: 0.4; + cursor: not-allowed; + box-shadow: none; + pointer-events: none; +} + +.link:hover { + text-decoration: underline; +} + +.fontIcon { + font-family: monospace; + font-size: x-large; + text-align: center; + font-weight: bold; +} + +.buttonBox { + padding: 8px; + background-color: #f7f7f7; + border: 1px solid; + border-radius: 4px; + border-color: black; + color: black; +} + +.buttonBox > .fontIcon { + width: 1em; + height: 1em; + display: inline; + line-height: 0px; +} + +.buttonVariant { + color: white; + border-radius: 4px; + text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); +} + +.linkDestructive { + background-color: rgb(202, 60, 60); +} + +.linkPrimary { + color: black; +} + +.buttonPrimary { + font-size: var(--font-size, inherit); + background-color: #0042b2; + border-color: #0042b2; +} + +.buttonBoxPrimary { + color: #0042b2; + border-color: #0042b2; +} + +.buttonSuccess { + background-color: #388e3c; +} + +.linkSuccess { + color: #388e3c; +} + +.buttonBoxSuccess { + color: #388e3c; + border-color: #388e3c; +} + +.buttonWarning { + background-color: rgb(223, 117, 20); +} + +.linkWarning { + color: rgb(223, 117, 20); +} + +.buttonBoxWarning { + color: rgb(223, 117, 20); + border-color: rgb(223, 117, 20); +} + +.buttonDestructive { + background-color: rgb(202, 60, 60); +} + +.buttonBoxDestructive { + color: rgb(202, 60, 60); + border-color: rgb(202, 60, 60); +} + +.boldLight { + color: gray; + font-weight: bold; +} + +.centered { + text-align: center; +} + +.centered > :not(:first-child) { + margin-top: 15px; +} + +.row { + display: flex; + margin: 0.5em 0; + justify-content: space-between; + padding: 0.5em; +} + +.row2 { + display: flex; + justify-content: space-between; + padding: 0.5em; +} + +.column { + display: flex; + flex-direction: column; + margin: 0em 1em; + justify-content: space-between; +} + +.rowBorderGray { + border: 1px solid gray; +} + +.rowLightBorderGray { + border: 1px solid lightgray; + border-top: 0px; +} + +.dateSeparator + .rowLightBorderGray { + border: 1px solid lightgray; + background-color: red; +} + +.historyRow { + text-decoration: none; + color: #212121; + display: flex; + justify-content: space-between; + padding: 0.5em; + border: 1px solid lightgray; + border-top: 0px; +} + +.dateSeparator + .historyRow { + border: 1px solid lightgray; +} + +.historyRow:hover { + background-color: lightgray; +} + +.historyRow > .column:last-of-type { + margin-left: auto; + align-self: center; +} + +.listOfProducts > div > a > img { + max-width: 100%; + display: inline-block; + width: 32px; + height: 32px; +} + +.listOfProducts > div > div { + margin-right: auto; + margin-left: 1em; +} + +.lightText { + color: gray; +} + +.successText { + color: #388e3c; +} + +.destructiveText { + color: rgb(202, 60, 60); +} + +.warningText { + color: rgb(223, 117, 20); +} + +.smallText { + font-size: small; +} + +.smallBoldText { + font-size: small; + font-weight: bold; +} + +.ageSign { + display: inline-block; + border: red solid 1px; + border-radius: 100%; + width: var(--size); + height: var(--size); + line-height: var(--size); + padding: 3px; +} + +.largeText { + font-size: large; +} + +.extraLargeText { + font-size: x-large; +} + +.smallLightText { + color: gray; + font-size: small; +} + +.centeredText { + white-space: nowrap; + text-align: center; +} + +.centeredBoldText { + white-space: nowrap; + text-align: center; + font-weight: bold; + color: var(--color); +} + +.input label { + display: block; + padding: 5px; + color: var(--label-color, inherit); +} + +.input input { + display: block; + padding: 5px; + width: calc(100% - 4px - 10px); + border-color: var(--border-color, inherit); +} + +.inputWithLabel { + margin-bottom: 16px; +} + +.inputWithLabel label { + display: block; + font-weight: bold; + margin-left: 0.5em; + padding: 5px; + color: var(--label-color, inherit); +} + +.inputWithLabel div { + line-height: 24px; + display: flex; +} + +.inputWithLabel div > span { + background-color: lightgray; + box-sizing: border-box; + border-bottom-left-radius: 0.25em; + border-top-left-radius: 0.25em; + height: 2em; + display: inline-block; + padding-left: 0.5em; + padding-right: 0.5em; + align-items: center; + display: flex; +} + +.inputWithLabel input { + border-width: 1px; + box-sizing: border-box; + height: 2em; + border-bottom-right-radius: 0.25em; + border-top-right-radius: 0.25em; + border-color: var(--border-color, lightgray); +} + +.errorText { + color: red; +} + +.errorBox { + border: 2px solid #f5c6cb; + border-radius: 0.25em; + display: flex; + justify-content: space-between; + flex-direction: column; + padding: 1em; + margin: 1em; + color: #721c24; + background: #f8d7da; +} + +.errorBox > div { + display: flex; + justify-content: space-between; +} + +.errorBox > div > button { + align-self: center; + font-size: 100%; + padding: 0; + height: 28px; + width: 28px; +} + +.redBanner { + width: 80%; + padding: 4px; + text-align: center; + background: red; + border: 1px solid #df3a3a; + border-radius: 4px; + font-weight: bold; + margin: 4px; +} + +.infoBox { + color: black; + background-color: #d1e7dd; + border-color: #badbcc; +} + +.successBox { + color: #0f5132; + background-color: #d1e7dd; + border-color: #badbcc; +} + +.warningBox { + color: #664d03; + background-color: #fff3cd; + border-color: #ffecb5; +} + +.navigationHeaderHolder { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + background-color: #0042b2; +} + +.navigationHeader { + background-color: #0042b2; + height: 35px; + justify-content: space-around; + display: flex; + width: 500px; +} + +.navigationHeader > a, +.navigationHeader > div { + color: #f8faf7; + display: inline-block; + width: 100%; + text-align: center; + text-decoration: none; + vertical-align: middle; + line-height: 35px; +} + +.navigationHeader > a.active { + background-color: #f8faf7; + color: #0042b2; + font-weight: bold; +} + +.svgIcon { + margin-left: 8px; + margin-right: 8px; + display: inline; + padding: 4px; + cursor: var(--cursor, inherit); +} + +.svgIcon > svg { + fill: var(--color); + transform: var(--transform, none); +} + +.icon { + background-color: gray; + width: 24px; + height: 24px; + margin-left: 8px; + margin-right: 8px; + padding: 4px; +} + +.niceSelect { + position: relative; + display: flex; + overflow: hidden; + border-radius: 0.25em; +} + +.niceSelect > select { + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + outline: 0; + box-shadow: none; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); + background-position: right 4px center; + background-repeat: no-repeat; + background-size: 32px 32px; + background-color: white; + border: 2px solid #0003; + border-radius: 0.25rem; + font-size: 1em; + padding: 8px 32px 8px 8px; + cursor: pointer; +} + +.niceSelect > select:hover, +.niceSelect > select:focus, +.niceSelect > select:active { + background-color: #0000000a; +} + +.outlined { + border: 2px solid #388e3c; + padding: 0.5em 1em; + width: fit-content; + border-radius: 2px; + color: #388e3c; +} + +.checkboxSuccess { + vertical-align: center; +} + +.termsSection { + border: 1px solid black; + border-radius: 5px; + padding: 1em; + margin-top: 2px; + margin-bottom: 2px; + text-decoration: none; + color: inherit; + flex-direction: column; + display: flex; +} + +.termsSection[data-open="true"] { + display: flex; +} + +.termsSection[data-open="false"] > *:not(:first-child) { + display: none; +} + +.termsSection header { + display: flex; + flex-direction: row; + font-weight: bold; + justify-content: space-between; + height: auto; +} + +.termsSection[data-open="true"] header:after { + content: "\2227"; +} + +.termsSection[data-open="false"] header:after { + content: "\2228"; +} + +.termsOfServiceStyle { + display: flex; + flex-direction: column; + text-align: left; + max-width: 500px; +} + +.termsOfServiceStyle > header { + text-align: center; + font-size: 2em; +} + +.termsOfServiceStyle a { + text-decoration: none; + color: inherit; + flex-direction: column; +} + +.termsOfServiceStyle > a { + border: 1px solid black; + border-radius: 5px; + padding: 1em; + margin-top: 2px; + margin-bottom: 2px; + display: flex; +} + +.termsOfServiceStyle > a[data-open="true"] { + display: flex; +} + +.termsOfServiceStyle > a[data-open="false"] > *:not(:first-child) { + display: none; +} + +.termsOfServiceStyle > a header { + display: flex; + flex-direction: row; + font-weight: bold; + justify-content: space-between; + height: auto; +} + +.termsOfServiceStyle > a[data-open="true"] > header:after { + content: "\2227"; +} + +.termsOfServiceStyle > a[data-open="false"] > header:after { + content: "\2228"; +} + +.styledCheckboxLabel { + color: green; + text-transform: uppercase; + text-align: center; + cursor: pointer; +} + +.styledCheckboxLabel span input { + display: none; + opacity: 0; + width: 1em; + height: 1em; + cursor: pointer; +} + +.styledCheckboxLabel span div { + display: inline-grid; + width: 1em; + height: 1em; + margin-right: 1em; + border-radius: 2px; + border: 2px solid currentColor; +} + +.styledCheckboxLabel span div svg { + transition: transform 0.1s ease-in 25ms; + transform: scale(0); + transform-origin: bottom left; +} + +.styledCheckboxLabel span label { + padding: 0px; + font-size: small; + cursor: pointer; +} + +.styledCheckboxLabel input:checked + div svg { + transform: scale(1); +} + +.styledCheckboxLabel input:disabled + div { + color: #959495; +} + +.styledCheckboxLabel input:disabled + div + label { + color: #959495; +} + +.styledCheckboxLabel input:focus + div + label { + box-shadow: + 0 0 0 0.05em #fff, + 0 0 0.15em 0.1em currentColor; +} + +.paragraphClickable { + cursor: pointer; + margin: 0px; + padding: 8px 16px; +} + +.paragraphClickable:hover { + filter: alpha(opacity=80); + background-image: linear-gradient( + transparent, + rgba(0, 0, 0, 0.1) 40%, + rgba(0, 0, 0, 0.2) + ); +} diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx @@ -14,1096 +14,1156 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -// need to import linaria types, otherwise compiler will complain -// eslint-disable-next-line @typescript-eslint/no-unused-vars -// import type * as Linaria from "@linaria/core"; - -import { styled } from "@linaria/react"; - -export const PaymentStatus = styled.div<{ color: string }>` - padding: 5px; - border-radius: 5px; - color: white; - background-color: ${(p: any) => p.color}; -`; - -export const WalletAction = styled.div` - display: flex; - text-align: center; - flex-direction: column; - justify-content: space-between; - align-items: center; - - margin: auto; - - & h1:first-child { - margin-top: 0; - } - & > * { - width: 600px; - } - section { - margin-bottom: 2em; - table td { - padding: 5px 5px; - } - table tr { - border-bottom: 1px solid black; - border-top: 1px solid black; - } - button { - margin-right: 8px; - margin-left: 8px; - } - } -`; -export const WalletActionOld = styled.section` - border: solid 5px black; - border-radius: 10px; - margin-left: auto; - margin-right: auto; - padding-top: 2em; - max-width: 50%; - padding: 2em; - - margin: auto; - height: 100%; - - & h1:first-child { - margin-top: 0; - } -`; - -export const Title = styled.h1` - font-size: 2em; - margin-top: 1em; - margin-bottom: 1em; -`; -export const SubTitle = styled.h1` - font-size: 1.5em; - margin-top: 1em; - margin-bottom: 1em; -`; - -export const DateSeparator = styled.div` - color: gray; - margin: 0.2em; - margin-top: 1em; -`; -export const WalletBox = styled.div<{ noPadding?: boolean }>` - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - & > * { - width: 800px; - } - & > section { - padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; - - margin-bottom: auto; - overflow: auto; - - table td { - padding: 5px 5px; - } - table tr { - border-bottom: 1px solid black; - border-top: 1px solid black; - } - button { - margin-right: 8px; - margin-left: 8px; - } - } - - & > header { - flex-direction: row; - justify-content: space-between; - display: flex; - padding: 8px; - margin-bottom: 5px; - - & > div { - align-self: center; - } - - & > h3 { - margin: 0px; - } - - & > .title { - /* margin: 1em; */ - font-size: large; - color: #3c4e92; - } - } - - & > footer { - padding-top: 8px; - padding-bottom: 8px; - flex-direction: row; - justify-content: space-between; - display: flex; - button { - margin-right: 8px; - margin-left: 8px; - } - } -`; -export const Middle = styled.div` - justify-content: space-around; - display: flex; - flex-direction: column; - height: 100%; -`; - -export const PopupBox = styled.div<{ noPadding?: boolean }>` - height: 290px; - width: 500px; - overflow-y: visible; - display: flex; - flex-direction: column; - justify-content: space-between; - - & > section { - padding: ${({ noPadding }: any) => (noPadding ? "0px" : "8px")}; - // this margin will send the section up when used with a header - margin-bottom: auto; - overflow-y: auto; - - table td { - padding: 5px 10px; - } - table tr { - border-bottom: 1px solid black; - border-top: 1px solid black; - } - button { - margin-right: 8px; - margin-left: 8px; - } - } - - & > section[data-expanded] { - height: 100%; - } - - & > section[data-centered] { - justify-content: center; - display: flex; - /* flex-direction: column; */ - } - - & > header { - flex-direction: row; - justify-content: space-between; - display: flex; - padding: 8px; - margin-bottom: 5px; - - & > div { - align-self: center; - } - - & > h3 { - margin: 0px; - } - - & > .title { - /* margin: 1em; */ - font-size: large; - color: #3c4e92; - } - } - - & > footer { - padding-top: 8px; - padding-bottom: 8px; - flex-direction: row; - justify-content: space-between; - display: flex; - button { - margin-right: 8px; - margin-left: 8px; - } - } -`; - -export const TableWithRoundRows = styled.table` - border-collapse: separate; - border-spacing: 0px 10px; - margin-top: -10px; - - td { - border: solid 1px #000; - border-style: solid none; - padding: 10px; - } - td:first-child { - border-left-style: solid; - border-top-left-radius: 5px; - border-bottom-left-radius: 5px; - } - td:last-child { - border-right-style: solid; - border-bottom-right-radius: 5px; - border-top-right-radius: 5px; - } -`; - -const Tooltip = styled.div<{ content: string }>` - display: block; - position: relative; - - ::before { - position: absolute; - z-index: 1000001; - width: 0; - height: 0; - color: darkgray; - pointer-events: none; - content: ""; - border: 6px solid transparent; - - border-bottom-color: darkgray; - } - - ::after { - position: absolute; - z-index: 1000001; - padding: 0.5em 0.75em; - font: - normal normal 11px/1.5 -apple-system, - BlinkMacSystemFont, - "Segoe UI", - Helvetica, - Arial, - sans-serif, - "Apple Color Emoji", - "Segoe UI Emoji"; - -webkit-font-smoothing: subpixel-antialiased; - color: white; - text-align: center; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-wrap: break-word; - white-space: pre; - pointer-events: none; - content: attr(content); - background: darkgray; - border-radius: 6px; - } -`; - -export const TooltipBottom = styled(Tooltip)` - ::before { - top: auto; - right: 50%; - bottom: -7px; - margin-right: -6px; - } - ::after { - top: 100%; - right: -50%; - margin-top: 6px; - } -`; - -export const TooltipRight = styled(Tooltip)` - ::before { - top: 0px; - left: 16px; - transform: rotate(-90deg); - } - ::after { - top: -50%; - left: 28px; - margin-top: 6px; - } -`; - -export const TooltipLeft = styled(Tooltip)` - ::before { - top: 0px; - right: 16px; - transform: rotate(90deg); - } - ::after { - top: -50%; - right: 28px; - margin-top: 6px; - } -`; - -export const Overlay = styled.div` - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-color: rgba(0, 0, 0, 0.5); - z-index: 2; - cursor: pointer; -`; - -export const NotifyUpdateFadeOut = styled.div` - border: 2px solid red; - transition: all 0.4s ease-out; - animation: fadeout 1s forwards; - animation-delay: 0.1s; - @keyframes fadeout { - to { - border-color: #f5f5f5; - } - } -`; - -export const CenteredDialog = styled.div` - position: absolute; - text-align: left; - - display: flex; - flex-direction: column; - justify-content: space-between; - - top: 50%; - left: 50%; - /* font-size: 50px; */ - color: black; - transform: translate(-50%, -50%); - -ms-transform: translate(-50%, -50%); - cursor: initial; - background-color: white; - border-radius: 10px; - - max-height: 70%; - - & > header { - border-top-right-radius: 6px; - border-top-left-radius: 6px; - padding: 10px; - background-color: #f5f5f5; - border-bottom: 1px solid #dbdbdb; - font-weight: bold; - } - & > section { - padding: 10px; - flex-grow: 1; - flex-shrink: 1; - overflow: auto; - } - & > footer { - border-top: 1px solid #dbdbdb; - border-bottom-right-radius: 6px; - border-bottom-left-radius: 6px; - padding: 10px; - display: flex; - justify-content: space-between; - } -`; - -export const Button = styled.button<{ upperCased?: boolean }>` - display: inline-block; - /* zoom: 1; */ - line-height: normal; - white-space: nowrap; - vertical-align: middle; //check this - /* text-align: center; */ - cursor: pointer; - user-select: none; - box-sizing: border-box; - text-transform: ${({ upperCased }: any) => - upperCased ? "uppercase" : "none"}; - - font-family: inherit; - font-size: 100%; - padding: 0.5em 1em; - /* color: #444; rgba not supported (IE 8) */ - color: rgba(0, 0, 0, 0.8); /* rgba supported */ - border: 1px solid #999; /*IE 6/7/8*/ - /* border: none rgba(0, 0, 0, 0); IE9 + everything else */ - background-color: "#e6e6e6"; - text-decoration: none; - border-radius: 2px; - text-transform: uppercase; - - :focus { - outline: 0; - } - - &:disabled { - border: none; - background-image: none; - /* csslint ignore:start */ - filter: alpha(opacity=40); - /* csslint ignore:end */ - opacity: 0.4; - cursor: not-allowed; - box-shadow: none; - pointer-events: none; - } - - :hover { - filter: alpha(opacity=80); - background-image: linear-gradient( - transparent, - rgba(0, 0, 0, 0.1) 40%, - rgba(0, 0, 0, 0.2) - ); - } -`; - -export const Link = styled.a<{ upperCased?: boolean }>` - display: inline-block; - zoom: 1; - line-height: normal; - white-space: nowrap; - /* vertical-align: middle; */ - text-align: center; - cursor: pointer; - user-select: none; - box-sizing: border-box; - text-transform: ${({ upperCased }: any) => - upperCased ? "uppercase" : "none"}; - - font-family: inherit; - font-size: 100%; - padding: 0.5em 1em; - background-color: transparent; - text-decoration: none; - - :focus { - outline: 0; - } - - &:disabled { - border: none; - background-image: none; - /* csslint ignore:start */ - filter: alpha(opacity=40); - /* csslint ignore:end */ - opacity: 0.4; - cursor: not-allowed; - box-shadow: none; - pointer-events: none; - } - - :hover { - text-decoration: underline; - /* filter: alpha(opacity=90); - background-image: linear-gradient( - transparent, - rgba(0, 0, 0, 0.05) 40%, - rgba(0, 0, 0, 0.1) - ); */ - } -`; - -export const FontIcon = styled.div` - font-family: monospace; - font-size: x-large; - text-align: center; - font-weight: bold; - /* vertical-align: text-top; */ -`; -export const ButtonBox = styled(Button)` - padding: 8px; - /* font-size: small; */ - - & > ${FontIcon} { - width: 1em; - height: 1em; - display: inline; - line-height: 0px; - } - background-color: #f7f7f7; - - border: 1px solid; - border-radius: 4px; - border-color: black; - color: black; - /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); */ - /* -webkit-border-horizontal-spacing: 0px; - -webkit-border-vertical-spacing: 0px; */ -`; - -const ButtonVariant = styled(Button)` - color: white; - border-radius: 4px; - text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); -`; - -export const LinkDestructive = styled(Link)` - background-color: rgb(202, 60, 60); -`; - -export const LinkPrimary = styled(Link)` - color: black; -`; - -export const ButtonPrimary = styled(ButtonVariant)<{ small?: boolean }>` - font-size: ${({ small }: any) => (small ? "small" : "inherit")}; - background-color: #0042b2; - border-color: #0042b2; -`; -export const ButtonBoxPrimary = styled(ButtonBox)` - color: #0042b2; - border-color: #0042b2; -`; - -export const ButtonSuccess = styled(ButtonVariant)` - background-color: #388e3c; -`; -export const LinkSuccess = styled(Link)` - color: #388e3c; -`; -export const ButtonBoxSuccess = styled(ButtonBox)` - color: #388e3c; - border-color: #388e3c; -`; - -export const ButtonWarning = styled(ButtonVariant)` - background-color: rgb(223, 117, 20); -`; -export const LinkWarning = styled(Link)` - color: rgb(223, 117, 20); -`; -export const ButtonBoxWarning = styled(ButtonBox)` - color: rgb(223, 117, 20); - border-color: rgb(223, 117, 20); -`; - -export const ButtonDestructive = styled(ButtonVariant)` - background-color: rgb(202, 60, 60); -`; -export const ButtonBoxDestructive = styled(ButtonBox)` - color: rgb(202, 60, 60); - border-color: rgb(202, 60, 60); -`; - -export const BoldLight = styled.div` - color: gray; - font-weight: bold; -`; -export const Centered = styled.div` - text-align: center; - & > :not(:first-child) { - margin-top: 15px; - } -`; - -export const Row = styled.div` - display: flex; - margin: 0.5em 0; - justify-content: space-between; - padding: 0.5em; -`; - -export const Row2 = styled.div` - display: flex; - /* margin: 0.5em 0; */ - justify-content: space-between; - padding: 0.5em; -`; - -export const Column = styled.div` - display: flex; - flex-direction: column; - margin: 0em 1em; - justify-content: space-between; -`; - -export const RowBorderGray = styled(Row)` - border: 1px solid gray; - /* border-radius: 0.5em; */ -`; - -export const RowLightBorderGray = styled(Row2)` - border: 1px solid lightgray; - border-top: 0px; - - ${DateSeparator} + & { - border: 1px solid lightgray; - background-color: red; - } -`; - -export const HistoryRow = styled.a` - text-decoration: none; - color: #212121; - - display: flex; - justify-content: space-between; - padding: 0.5em; - - border: 1px solid lightgray; - border-top: 0px; - - ${DateSeparator} + & { - border: 1px solid lightgray; - } - - :hover { - background-color: lightgray; - } - - & > ${Column}:last-of-type { - margin-left: auto; - align-self: center; - } -`; - -export const ListOfProducts = styled.div` - & > div > a > img { - max-width: 100%; - display: inline-block; - - width: 32px; - height: 32px; - } - & > div > div { - margin-right: auto; - margin-left: 1em; - } -`; - -export const LightText = styled.div` - color: gray; -`; - -export const SuccessText = styled.div` - color: #388e3c; -`; - -export const DestructiveText = styled.div` - color: rgb(202, 60, 60); -`; - -export const WarningText = styled.div` - color: rgb(223, 117, 20); -`; - -export const SmallText = styled.div` - font-size: small; -`; - -export const SmallBoldText = styled.div` - font-size: small; - font-weight: bold; -`; - -export const AgeSign = styled.div<{ size: number }>` - display: inline-block; - border: red solid 1px; - border-radius: 100%; - width: ${({ size }: { size: number }) => `${size}px`}; - height: ${({ size }: { size: number }) => `${size}px`}; - line-height: ${({ size }: { size: number }) => `${size}px`}; - padding: 3px; -`; - -export const LargeText = styled.div` - font-size: large; -`; - -export const ExtraLargeText = styled.div` - font-size: x-large; -`; - -export const SmallLightText = styled(SmallText)` - color: gray; -`; - -export const CenteredText = styled.div` - white-space: nowrap; - text-align: center; -`; - -export const CenteredBoldText = styled(CenteredText)` - white-space: nowrap; - text-align: center; - font-weight: bold; - color: ${((props: any): any => String(props.color) as any) as any}; -`; - -export const Input = styled.div<{ invalid?: boolean }>` - & label { - display: block; - padding: 5px; - color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; - } - & input { - display: block; - padding: 5px; - width: calc(100% - 4px - 10px); - border-color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; - } -`; - -export const InputWithLabel = styled.div<{ invalid?: boolean }>` - /* display: flex; */ - - & label { - display: block; - font-weight: bold; - margin-left: 0.5em; - padding: 5px; - color: ${({ invalid }: any) => (!invalid ? "inherit" : "red")}; - } - - & div { - line-height: 24px; - display: flex; - } - & div > span { - background-color: lightgray; - box-sizing: border-box; - border-bottom-left-radius: 0.25em; - border-top-left-radius: 0.25em; - height: 2em; - display: inline-block; - padding-left: 0.5em; - padding-right: 0.5em; - align-items: center; - display: flex; - } - & input { - border-width: 1px; - box-sizing: border-box; - height: 2em; - /* border-color: lightgray; */ - border-bottom-right-radius: 0.25em; - border-top-right-radius: 0.25em; - border-color: ${({ invalid }: any) => (!invalid ? "lightgray" : "red")}; - } - margin-bottom: 16px; -`; - -export const ErrorText = styled.div` - color: red; -`; - -export const ErrorBox = styled.div` - border: 2px solid #f5c6cb; - border-radius: 0.25em; - display: flex; - justify-content: space-between; - flex-direction: column; - /* margin: 0.5em; */ - padding: 1em; - margin: 1em; - /* width: 100%; */ - color: #721c24; - background: #f8d7da; - - & > div { - display: flex; - justify-content: space-between; - - & > button { - align-self: center; - font-size: 100%; - padding: 0; - height: 28px; - width: 28px; - } - } -`; - -export const RedBanner = styled.div` - width: 80%; - padding: 4px; - text-align: center; - background: red; - border: 1px solid #df3a3a; - border-radius: 4px; - font-weight: bold; - margin: 4px; -`; - -export const InfoBox = styled(ErrorBox)` - color: black; - background-color: #d1e7dd; - border-color: #badbcc; -`; - -export const SuccessBox = styled(ErrorBox)` - color: #0f5132; - background-color: #d1e7dd; - border-color: #badbcc; -`; - -export const WarningBox = styled(ErrorBox)` - color: #664d03; - background-color: #fff3cd; - border-color: #ffecb5; -`; - -export const NavigationHeaderHolder = styled.div` - width: 100%; - display: flex; - flex-direction: column; - align-items: center; - background-color: #0042b2; -`; - -export const NavigationHeader = styled.div` - background-color: #0042b2; - height: 35px; - justify-content: space-around; - display: flex; - - & { - width: 500px; - } - - & > a, - & > div { - color: #f8faf7; - display: inline-block; - width: 100%; - text-align: center; - text-decoration: none; - vertical-align: middle; - line-height: 35px; - } - - & > a.active { - background-color: #f8faf7; - color: #0042b2; - font-weight: bold; - } -`; +import { h, JSX } from "preact"; +import styles from "./index.module.css"; + +function cc(...args: (string | undefined | boolean | null)[]): string { + return args.filter(Boolean).join(" "); +} + +export function PaymentStatus({ + color, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { color: string }) { + return ( + <div + {...props} + className={cc(styles.paymentStatus, props.className as string)} + style={{ ...((props.style as any) || {}), "--color": color }} + > + {children} + </div> + ); +} + +export function WalletAction({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.walletAction, props.className as string)} + > + {children} + </div> + ); +} + +export function WalletActionOld({ + children, + ...props +}: JSX.HTMLAttributes<HTMLElement>) { + return ( + <section + {...props} + className={cc(styles.walletActionOld, props.className as string)} + > + {children} + </section> + ); +} + +export function Title({ + children, + ...props +}: JSX.HTMLAttributes<HTMLHeadingElement>) { + return ( + <h1 {...props} className={cc(styles.title, props.className as string)}> + {children} + </h1> + ); +} + +export function SubTitle({ + children, + ...props +}: JSX.HTMLAttributes<HTMLHeadingElement>) { + return ( + <h1 {...props} className={cc(styles.subTitle, props.className as string)}> + {children} + </h1> + ); +} + +export function DateSeparator({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.dateSeparator, props.className as string)} + > + {children} + </div> + ); +} + +export function WalletBox({ + noPadding, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }) { + return ( + <div + {...props} + className={cc(styles.walletBox, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--padding": noPadding ? "0px" : "8px", + }} + > + {children} + </div> + ); +} + +export function Middle({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.middle, props.className as string)}> + {children} + </div> + ); +} + +export function PopupBox({ + noPadding, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { noPadding?: boolean }) { + return ( + <div + {...props} + className={cc(styles.popupBox, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--padding": noPadding ? "0px" : "8px", + }} + > + {children} + </div> + ); +} + +export function TableWithRoundRows({ + children, + ...props +}: JSX.HTMLAttributes<HTMLTableElement>) { + return ( + <table + {...props} + className={cc(styles.tableWithRoundRows, props.className as string)} + > + {children} + </table> + ); +} + +export function TooltipBottom({ + content, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { content: string }) { + return ( + <div + {...props} + className={cc( + styles.tooltip, + styles.tooltipBottom, + props.className as string, + )} + content={content} + > + {children} + </div> + ); +} + +export function TooltipRight({ + content, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { content: string }) { + return ( + <div + {...props} + className={cc( + styles.tooltip, + styles.tooltipRight, + props.className as string, + )} + content={content} + > + {children} + </div> + ); +} + +export function TooltipLeft({ + content, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { content: string }) { + return ( + <div + {...props} + className={cc( + styles.tooltip, + styles.tooltipLeft, + props.className as string, + )} + content={content} + > + {children} + </div> + ); +} + +export function Overlay({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.overlay, props.className as string)}> + {children} + </div> + ); +} + +export function NotifyUpdateFadeOut({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.notifyUpdateFadeOut, props.className as string)} + > + {children} + </div> + ); +} + +export function CenteredDialog({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.centeredDialog, props.className as string)} + > + {children} + </div> + ); +} + +export function Button({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc(styles.button, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function Link({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLAnchorElement> & { upperCased?: boolean }) { + return ( + <a + {...props} + className={cc(styles.link, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </a> + ); +} + +export function FontIcon({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.fontIcon, props.className as string)}> + {children} + </div> + ); +} + +export function ButtonBox({ + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement>) { + return ( + <button + {...props} + className={cc(styles.button, styles.buttonBox, props.className as string)} + > + {children} + </button> + ); +} + +export function LinkDestructive({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLAnchorElement> & { upperCased?: boolean }) { + return ( + <a + {...props} + className={cc( + styles.link, + styles.linkDestructive, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </a> + ); +} + +export function LinkPrimary({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLAnchorElement> & { upperCased?: boolean }) { + return ( + <a + {...props} + className={cc(styles.link, styles.linkPrimary, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </a> + ); +} + +export function ButtonPrimary({ + small, + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { + small?: boolean; + upperCased?: boolean; +}) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonVariant, + styles.buttonPrimary, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--font-size": small ? "small" : "inherit", + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function ButtonBoxPrimary({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonBox, + styles.buttonBoxPrimary, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function ButtonSuccess({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonVariant, + styles.buttonSuccess, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function LinkSuccess({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLAnchorElement> & { upperCased?: boolean }) { + return ( + <a + {...props} + className={cc(styles.link, styles.linkSuccess, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </a> + ); +} + +export function ButtonBoxSuccess({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonBox, + styles.buttonBoxSuccess, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function ButtonWarning({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonVariant, + styles.buttonWarning, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function LinkWarning({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLAnchorElement> & { upperCased?: boolean }) { + return ( + <a + {...props} + className={cc(styles.link, styles.linkWarning, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </a> + ); +} + +export function ButtonBoxWarning({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonBox, + styles.buttonBoxWarning, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function ButtonDestructive({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonVariant, + styles.buttonDestructive, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function ButtonBoxDestructive({ + upperCased, + children, + ...props +}: JSX.HTMLAttributes<HTMLButtonElement> & { upperCased?: boolean }) { + return ( + <button + {...props} + className={cc( + styles.button, + styles.buttonBox, + styles.buttonBoxDestructive, + props.className as string, + )} + style={{ + ...((props.style as any) || {}), + "--text-transform": upperCased ? "uppercase" : "none", + }} + > + {children} + </button> + ); +} + +export function BoldLight({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.boldLight, props.className as string)}> + {children} + </div> + ); +} + +export function Centered({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.centered, props.className as string)}> + {children} + </div> + ); +} + +export function Row({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.row, props.className as string)}> + {children} + </div> + ); +} + +export function Row2({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.row2, props.className as string)}> + {children} + </div> + ); +} + +export function Column({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.column, props.className as string)}> + {children} + </div> + ); +} + +export function RowBorderGray({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc( + styles.row, + styles.rowBorderGray, + props.className as string, + )} + > + {children} + </div> + ); +} + +export function RowLightBorderGray({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc( + styles.row2, + styles.rowLightBorderGray, + props.className as string, + )} + > + {children} + </div> + ); +} + +export function HistoryRow({ + children, + ...props +}: JSX.HTMLAttributes<HTMLAnchorElement>) { + return ( + <a {...props} className={cc(styles.historyRow, props.className as string)}> + {children} + </a> + ); +} + +export function ListOfProducts({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.listOfProducts, props.className as string)} + > + {children} + </div> + ); +} + +export function LightText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.lightText, props.className as string)}> + {children} + </div> + ); +} + +export function SuccessText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.successText, props.className as string)} + > + {children} + </div> + ); +} + +export function DestructiveText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.destructiveText, props.className as string)} + > + {children} + </div> + ); +} + +export function WarningText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.warningText, props.className as string)} + > + {children} + </div> + ); +} + +export function SmallText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.smallText, props.className as string)}> + {children} + </div> + ); +} + +export function SmallBoldText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.smallBoldText, props.className as string)} + > + {children} + </div> + ); +} + +export function AgeSign({ + size, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { size: number }) { + return ( + <div + {...props} + className={cc(styles.ageSign, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--size": `${size}px`, + }} + > + {children} + </div> + ); +} + +export function LargeText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.largeText, props.className as string)}> + {children} + </div> + ); +} + +export function ExtraLargeText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.extraLargeText, props.className as string)} + > + {children} + </div> + ); +} + +export function SmallLightText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.smallLightText, props.className as string)} + > + {children} + </div> + ); +} + +export function CenteredText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.centeredText, props.className as string)} + > + {children} + </div> + ); +} + +export function CenteredBoldText({ + color, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { color?: string }) { + return ( + <div + {...props} + className={cc(styles.centeredBoldText, props.className as string)} + style={{ ...((props.style as any) || {}), "--color": color }} + > + {children} + </div> + ); +} + +export function Input({ + invalid, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { invalid?: boolean }) { + return ( + <div + {...props} + className={cc(styles.input, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--label-color": invalid ? "red" : "inherit", + "--border-color": invalid ? "red" : "inherit", + }} + > + {children} + </div> + ); +} + +export function InputWithLabel({ + invalid, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & { invalid?: boolean }) { + return ( + <div + {...props} + className={cc(styles.inputWithLabel, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--label-color": invalid ? "red" : "inherit", + "--border-color": invalid ? "red" : "lightgray", + }} + > + {children} + </div> + ); +} + +export function ErrorText({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.errorText, props.className as string)}> + {children} + </div> + ); +} + +export function ErrorBox({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.errorBox, props.className as string)}> + {children} + </div> + ); +} + +export function RedBanner({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.redBanner, props.className as string)}> + {children} + </div> + ); +} + +export function InfoBox({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.errorBox, styles.infoBox, props.className as string)} + > + {children} + </div> + ); +} + +export function SuccessBox({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc( + styles.errorBox, + styles.successBox, + props.className as string, + )} + > + {children} + </div> + ); +} + +export function WarningBox({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc( + styles.errorBox, + styles.warningBox, + props.className as string, + )} + > + {children} + </div> + ); +} + +export function NavigationHeaderHolder({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.navigationHeaderHolder, props.className as string)} + > + {children} + </div> + ); +} + +export function NavigationHeader({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.navigationHeader, props.className as string)} + > + {children} + </div> + ); +} interface SvgIconProps { - title: string; color: string; onClick?: any; transform?: string; } -export const SvgIcon = styled.div<SvgIconProps>` - & > svg { - fill: ${({ color }: any) => color}; - transform: ${({ transform }: any) => (transform ? transform : "")}; - } - /* width: 24px; - height: 24px; */ - margin-left: 8px; - margin-right: 8px; - display: inline; - padding: 4px; - cursor: ${({ onClick }: any) => (onClick ? "pointer" : "inherit")}; -`; - -export const Icon = styled.div` - background-color: gray; - width: 24px; - height: 24px; - margin-left: 8px; - margin-right: 8px; - padding: 4px; -`; - -const image = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`; - -export const NiceSelect = styled.div` - & > select { - -webkit-appearance: none; - -moz-appearance: none; - -ms-appearance: none; - appearance: none; - outline: 0; - box-shadow: none; - - background-image: ${image}; - background-position: right 4px center; - background-repeat: no-repeat; - background-size: 32px 32px; - - background-color: white; - - border: 2px solid #0003; - border-radius: 0.25rem; - font-size: 1em; - padding: 8px 32px 8px 8px; - /* 0.5em 3em 0.5em 1em; */ - cursor: pointer; - - &:hover, - &:focus, - &:active { - background-color: #0000000a; - } - } - - position: relative; - display: flex; - /* width: 10em; */ - overflow: hidden; - border-radius: 0.25em; -`; - -export const Outlined = styled.div` - border: 2px solid #388e3c; - padding: 0.5em 1em; - width: fit-content; - border-radius: 2px; - color: #388e3c; -`; - -/* { width: "1.5em", height: "1.5em", verticalAlign: "middle" } */ -export const CheckboxSuccess = styled.input` - vertical-align: center; -`; - -export const TermsSection = styled.a` - border: 1px solid black; - border-radius: 5px; - padding: 1em; - margin-top: 2px; - margin-bottom: 2px; - text-decoration: none; - color: inherit; - flex-direction: column; - - display: flex; - &[data-open="true"] { - display: flex; - } - &[data-open="false"] > *:not(:first-child) { - display: none; - } - - header { - display: flex; - flex-direction: row; - font-weight: bold; - justify-content: space-between; - height: auto; - } - - &[data-open="true"] header:after { - content: "\\2227"; - } - &[data-open="false"] header:after { - content: "\\2228"; - } -`; - -export const TermsOfServiceStyle = styled.div` - display: flex; - flex-direction: column; - text-align: left; - max-width: 500px; - - & > header { - text-align: center; - font-size: 2em; - } - - a { - text-decoration: none; - color: inherit; - flex-direction: column; - } - - & > a { - border: 1px solid black; - border-radius: 5px; - padding: 1em; - margin-top: 2px; - margin-bottom: 2px; - - display: flex; - &[data-open="true"] { - display: flex; - } - &[data-open="false"] > *:not(:first-child) { - display: none; - } - - header { - display: flex; - flex-direction: row; - font-weight: bold; - justify-content: space-between; - height: auto; - } - - &[data-open="true"] > header:after { - content: "\\2227"; - } - &[data-open="false"] > header:after { - content: "\\2228"; - } - } -`; -export const StyledCheckboxLabel = styled.div` - color: green; - text-transform: uppercase; - /* font-weight: bold; */ - text-align: center; - cursor: pointer; - span { - input { - display: none; - opacity: 0; - width: 1em; - height: 1em; - cursor: pointer; - } - div { - display: inline-grid; - width: 1em; - height: 1em; - margin-right: 1em; - border-radius: 2px; - border: 2px solid currentColor; - - svg { - transition: transform 0.1s ease-in 25ms; - transform: scale(0); - transform-origin: bottom left; - } - } - label { - padding: 0px; - font-size: small; - cursor: pointer; - } - } - - input:checked + div svg { - transform: scale(1); - } - input:disabled + div { - color: #959495; - } - input:disabled + div + label { - color: #959495; - } - input:focus + div + label { - box-shadow: - 0 0 0 0.05em #fff, - 0 0 0.15em 0.1em currentColor; - } -`; - -export const ParagraphClickable = styled.p` - cursor: pointer; - margin: 0px; - padding: 8px 16px; - :hover { - filter: alpha(opacity=80); - background-image: linear-gradient( - transparent, - rgba(0, 0, 0, 0.1) 40%, - rgba(0, 0, 0, 0.2) - ); - } -`; +export function SvgIcon({ + color, + transform, + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement> & SvgIconProps) { + return ( + <div + {...props} + className={cc(styles.svgIcon, props.className as string)} + style={{ + ...((props.style as any) || {}), + "--color": color, + "--transform": transform || "none", + "--cursor": props.onClick ? "pointer" : "inherit", + }} + > + {children} + </div> + ); +} + +export function Icon({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.icon, props.className as string)}> + {children} + </div> + ); +} + +export function NiceSelect({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.niceSelect, props.className as string)} + > + {children} + </div> + ); +} + +export function Outlined({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} className={cc(styles.outlined, props.className as string)}> + {children} + </div> + ); +} + +export function CheckboxSuccess({ + children, + ...props +}: JSX.HTMLAttributes<HTMLInputElement>) { + return ( + <input + {...props} + type="checkbox" + className={cc(styles.checkboxSuccess, props.className as string)} + /> + ); +} + +export function TermsSection({ + children, + ...props +}: JSX.HTMLAttributes<HTMLAnchorElement>) { + return ( + <a + {...props} + className={cc(styles.termsSection, props.className as string)} + > + {children} + </a> + ); +} + +export function TermsOfServiceStyle({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.termsOfServiceStyle, props.className as string)} + > + {children} + </div> + ); +} + +export function StyledCheckboxLabel({ + children, + ...props +}: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div + {...props} + className={cc(styles.styledCheckboxLabel, props.className as string)} + > + {children} + </div> + ); +} + +export function ParagraphClickable({ + children, + ...props +}: JSX.HTMLAttributes<HTMLParagraphElement>) { + return ( + <p + {...props} + className={cc(styles.paragraphClickable, props.className as string)} + > + {children} + </p> + ); +} diff --git a/packages/taler-wallet-webextension/src/custom.d.ts b/packages/taler-wallet-webextension/src/custom.d.ts @@ -31,3 +31,8 @@ declare module "*.svg" { } declare const __VERSION__: string; declare const __GIT_HASH__: string; + +declare module "*.module.css" { + const classes: { [key: string]: string }; + export default classes; +} diff --git a/packages/taler-wallet-webextension/src/mui/Alert.module.css b/packages/taler-wallet-webextension/src/mui/Alert.module.css @@ -0,0 +1,49 @@ +.baseStyle { + background-color: transparent; + display: flex; + padding: 6px 16px; +} + +.standard { + color: var(--color-light-06); + background-color: var(--color-background-light-09); +} + +.outlined { + color: var(--color-light-06); + border-width: 1px; + border-style: solid; + border-color: var(--color-light); +} + +.filled { + color: #fff; + font-weight: 500; + background-color: var(--color-main); +} + +.icon { + margin-right: 12px; + padding: 7px 0px; + display: flex; + font-size: 22px; + opacity: 0.9; + fill: currentColor; +} + +.action { + display: flex; + align-items: flex-start; + padding: 4px 0px 0px 16px; + margin-left: auto; + margin-right: -8px; +} + +.message { + padding: 8px 0px; + width: calc(100% - 48px - 36px); +} + +.messageTitle { + font-weight: 700; +} diff --git a/packages/taler-wallet-webextension/src/mui/Alert.stories.module.css b/packages/taler-wallet-webextension/src/mui/Alert.stories.module.css @@ -0,0 +1,3 @@ +.wrapper > * { + margin: 2em; +} diff --git a/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx b/packages/taler-wallet-webextension/src/mui/Alert.stories.tsx @@ -20,9 +20,9 @@ */ import { TranslatedString } from "@gnu-taler/taler-util"; -import { css } from "@linaria/core"; -import { ComponentChildren, Fragment, h, VNode } from "preact"; -import { Alert } from "./Alert.jsx"; +import { ComponentChildren, h, VNode } from "preact"; +import { Alert } from "./Alert.js"; +import styles from "./Alert.stories.module.css"; export default { title: "alert", @@ -30,17 +30,7 @@ export default { }; function Wrapper({ children }: { children: ComponentChildren }): VNode { - return ( - <div - class={css` - & > * { - margin: 2em; - } - `} - > - {children} - </div> - ); + return <div class={styles.wrapper}>{children}</div>; } export const BasicExample = (): VNode => ( diff --git a/packages/taler-wallet-webextension/src/mui/Alert.tsx b/packages/taler-wallet-webextension/src/mui/Alert.tsx @@ -14,8 +14,8 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ import { TranslatedString } from "@gnu-taler/taler-util"; -import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; +import styles from "./Alert.module.css"; // eslint-disable-next-line import/extensions import CloseIcon from "../svg/close_24px.inline.svg"; import ErrorOutlineIcon from "../svg/error_outline_outlined_24px.inline.svg"; @@ -35,28 +35,10 @@ const defaultIconMapping = { info: InfoOutlinedIcon, }; -const baseStyle = css` - background-color: transparent; - display: flex; - padding: 6px 16px; -`; - -const colorVariant = { - standard: css` - color: var(--color-light-06); - background-color: var(--color-background-light-09); - `, - outlined: css` - color: var(--color-light-06); - border-width: 1px; - border-style: solid; - border-color: var(--color-light); - `, - filled: css` - color: "#fff"; - font-weight: ${theme.typography.fontWeightMedium}; - background-color: var(--color-main); - `, +const colorVariantClass = { + standard: styles.standard, + outlined: styles.outlined, + filled: styles.filled, }; interface Props { @@ -76,33 +58,14 @@ const getBackgroundColor = theme.palette.mode === "light" ? lighten : darken; function Icon({ svg }: { svg: VNode }): VNode { return ( <div - class={css` - margin-right: 12px; - padding: 7px 0px; - display: flex; - font-size: 22px; - opacity: 0.9; - fill: currentColor; - `} + class={styles.icon} dangerouslySetInnerHTML={{ __html: svg as any }} ></div> ); } function Action({ children }: { children: ComponentChildren }): VNode { - return ( - <div - class={css` - display: flex; - align-items: flex-start; - padding: 4px 0px 0px 16px; - margin-left: auto; - margin-right: -8px; - `} - > - {children} - </div> - ); + return <div class={styles.action}>{children}</div>; } function Message({ @@ -113,19 +76,9 @@ function Message({ children: ComponentChildren; }): VNode { return ( - <div - class={css` - padding: 8px 0px; - width: calc(100% - 48px - 36px); - `} - > + <div class={styles.message}> {title && ( - <Typography - class={css` - font-weight: ${theme.typography.fontWeightBold}; - `} - gutterBottom - > + <Typography class={styles.messageTitle} gutterBottom> {title} </Typography> )} @@ -147,8 +100,8 @@ export function Alert({ <Paper class={[ theme.typography.body2, - baseStyle, - severity && colorVariant[variant], + styles.baseStyle, + severity && colorVariantClass[variant], ].join(" ")} style={{ "--color-light-06": getColor(theme.palette[severity].light, 0.6), diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.module.css b/packages/taler-wallet-webextension/src/mui/Avatar.module.css @@ -0,0 +1,14 @@ +.root { + position: relative; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + width: 40px; + height: 40px; + font-family: var(--font-family, "Roboto", "Helvetica", "Arial", sans-serif); + font-size: 1.25rem; + line-height: 1; + overflow: hidden; + user-select: none; +} diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx @@ -13,56 +13,29 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren } from "preact"; -// eslint-disable-next-line import/extensions -import { theme } from "./style.jsx"; - -const root = css` - position: relative; - display: flex; - align-items: center; - justify-content: center; - flex-shrink: 0; - width: 40px; - height: 40px; - font-family: ${theme.typography.fontFamily}; - font-size: ${theme.typography.pxToRem(20)}; - line-height: 1; - overflow: hidden; - user-select: none; -`; - -// const colorStyle = css` -// color: ${theme.palette.background.default}; -// background-color: ${theme.palette.mode === "light" -// ? theme.palette.grey[400] -// : theme.palette.grey[600]}; -// `; - -// const avatarImageStyle = css` -// width: 100%; -// height: 100%; -// text-align: center; -// object-fit: cover; -// color: transparent; -// text-indent: 10000; -// `; +import styles from "./Avatar.module.css"; +import themeStyles from "./style.module.css"; interface Props extends JSX.HTMLAttributes<HTMLDivElement> { variant?: "circular" | "rounded" | "square"; children?: ComponentChildren; } -export function Avatar({ variant, children, ...rest }: Props): VNode { +export function Avatar({ + variant, + children, + class: className, + ...rest +}: Props): VNode { const borderStyle = variant === "square" - ? theme.shape.squareBorder + ? themeStyles["shape-squareBorder"] : variant === "rounded" - ? theme.shape.roundBorder - : theme.shape.circularBorder; + ? themeStyles["shape-roundBorder"] + : themeStyles["shape-circularBorder"]; return ( - <div class={[root, borderStyle].join(" ")} {...rest}> + <div class={[styles.root, borderStyle, className].join(" ")} {...rest}> {children} </div> ); diff --git a/packages/taler-wallet-webextension/src/mui/Button.module.css b/packages/taler-wallet-webextension/src/mui/Button.module.css @@ -0,0 +1,219 @@ +.buttonBaseStyle { + display: inline-flex; + align-items: center; + justify-content: center; + position: relative; + box-sizing: border-box; + background-color: transparent; + outline: 0; + border: 0; + margin: 0; + border-radius: 0; + padding: 0; + cursor: pointer; + user-select: none; + vertical-align: middle; + text-decoration: none; + color: inherit; +} + +.button { + min-width: 64px; +} + +.button:hover { + text-decoration: none; + background-color: var(--text-primary-alpha-opacity); +} + +@media (hover: none) { + .button:hover { + background-color: transparent; + } +} + +.button:disabled { + color: var(--palette-action-disabled); +} + +.colorIconVariantOutlined { + fill: var(--color-main); +} + +.colorIconVariantContained { + fill: var(--color-contrastText); +} + +.colorIconVariantText { + fill: var(--color-main); +} + +.colorVariantOutlined { + color: var(--color-main); + border: 1px solid var(--color-main-alpha-half); + background-color: var(--color-contrastText); +} + +.colorVariantOutlined:hover { + border: 1px solid var(--color-main); + background-color: var(--color-main-alpha-opacity); +} + +.colorVariantOutlined:disabled { + border: 1px solid var(--palette-action-disabledBackground); +} + +.colorVariantContained { + color: var(--color-contrastText); + background-color: var(--color-main); + box-shadow: var(--shadow-2); +} + +.colorVariantContained:hover { + background-color: var(--color-grey-or-dark); +} + +.colorVariantContained:active { + box-shadow: var(--shadow-8); +} + +.colorVariantContained:focus-visible { + box-shadow: var(--shadow-6); +} + +.colorVariantContained:disabled { + color: var(--palette-action-disabled); + box-shadow: var(--shadow-0); + background-color: var(--palette-action-disabledBackground); +} + +.colorVariantText { + color: var(--color-main); +} + +.colorVariantText:hover { + background-color: var(--color-main-alpha-opacity); +} + +.sizeIconVariantOutlinedSmall { + padding: 3px; + font-size: 0.4375rem; +} + +.sizeIconVariantOutlinedMedium { + padding: 5px; +} + +.sizeIconVariantOutlinedLarge { + padding: 7px; + font-size: 0.625rem; +} + +.sizeIconVariantContainedSmall { + padding: 4px; + font-size: 0.8125rem; +} + +.sizeIconVariantContainedMedium { + padding: 6px; +} + +.sizeIconVariantContainedLarge { + padding: 8px; + font-size: 0.625rem; +} + +.sizeIconVariantTextSmall { + padding: 4px; + font-size: 0.8125rem; +} + +.sizeIconVariantTextMedium { + padding: 6px; +} + +.sizeIconVariantTextLarge { + padding: 8px; + font-size: 0.9375rem; +} + +.sizeVariantOutlinedSmall { + padding: 3px 9px; + font-size: 0.8125rem; +} + +.sizeVariantOutlinedMedium { + padding: 5px 15px; +} + +.sizeVariantOutlinedLarge { + padding: 7px 21px; + font-size: 0.9375rem; +} + +.sizeVariantContainedSmall { + padding: 4px 10px; + font-size: 0.8125rem; +} + +.sizeVariantContainedMedium { + padding: 6px 16px; +} + +.sizeVariantContainedLarge { + padding: 8px 22px; + font-size: 0.9375rem; +} + +.sizeVariantTextSmall { + padding: 4px 5px; + font-size: 0.8125rem; +} + +.sizeVariantTextMedium { + padding: 6px 8px; +} + +.sizeVariantTextLarge { + padding: 8px 11px; + font-size: 0.9375rem; +} + +.fullWidth { + width: 100%; +} + +.icon { + user-select: none; + width: 24px; + height: 24px; + display: inline-block; + fill: currentColor; + flex-shrink: 0; + transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.icon > svg { + font-size: 20px; +} + +.startIcon { + margin-right: 8px; + margin-left: -4px; +} + +.endIcon { + margin-right: -4px; + margin-left: 8px; +} + +.iconButton { + text-align: center; + flex: 0 0 auto; + font-size: 1.5rem; + padding: 8px; + border-radius: 50%; + overflow: visible; + color: inherit; + fill: currentColor; +} diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.module.css b/packages/taler-wallet-webextension/src/mui/Button.stories.module.css @@ -0,0 +1,9 @@ +.stack { + display: flex; + flex-direction: column; + background-color: white; +} + +.stack > button { + margin: 14px; +} diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx @@ -20,23 +20,22 @@ */ import { Button } from "./Button.js"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, h, VNode, JSX } from "preact"; import DeleteIcon from "../svg/delete_24px.inline.svg"; import SendIcon from "../svg/send_24px.inline.svg"; -import { styled } from "@linaria/react"; +import styles from "./Button.stories.module.css"; export default { title: "Button", }; -const Stack = styled.div` - display: flex; - flex-direction: column; - & > button { - margin: 14px; - } - background-color: white; -`; +function Stack({ children, ...props }: JSX.HTMLAttributes<HTMLDivElement>) { + return ( + <div {...props} class={[styles.stack, props.class].join(" ")}> + {children} + </div> + ); +} export const WithDelay = (): VNode => ( <Stack> diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx @@ -14,7 +14,6 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ import { ComponentChildren, h, VNode, JSX } from "preact"; -import { css } from "@linaria/core"; // eslint-disable-next-line import/extensions import { theme, @@ -25,26 +24,9 @@ import { // eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation.js"; import { useState } from "preact/hooks"; -import { SafeHandler } from "./handlers.js"; +import styles from "./Button.module.css"; -export const buttonBaseStyle = css` - display: inline-flex; - align-items: center; - justify-content: center; - position: relative; - box-sizing: border-box; - background-color: transparent; - outline: 0; - border: 0; - margin: 0; - border-radius: 0; - padding: 0; - cursor: pointer; - user-select: none; - vertical-align: middle; - text-decoration: none; - color: inherit; -`; +export const buttonBaseStyle = styles.buttonBaseStyle; interface Props { children?: ComponentChildren; @@ -64,157 +46,55 @@ interface Props { // onClick?: SafeHandler<void>; } -const button = css` - min-width: 64px; - &:hover { - text-decoration: none; - background-color: var(--text-primary-alpha-opacity); - @media (hover: none) { - background-color: transparent; - } - } - &:disabled { - color: ${theme.palette.action.disabled}; - } -`; +const button = styles.button; const colorIconVariant = { - outlined: css` - fill: var(--color-main); - `, - contained: css` - fill: var(--color-contrastText); - `, - text: css` - fill: var(--color-main); - `, + outlined: styles.colorIconVariantOutlined, + contained: styles.colorIconVariantContained, + text: styles.colorIconVariantText, }; const colorVariant = { - outlined: css` - color: var(--color-main); - border: 1px solid var(--color-main-alpha-half); - background-color: var(--color-contrastText); - &:hover { - border: 1px solid var(--color-main); - background-color: var(--color-main-alpha-opacity); - } - &:disabled { - border: 1px solid ${theme.palette.action.disabledBackground}; - } - `, - contained: css` - color: var(--color-contrastText); - background-color: var(--color-main); - box-shadow: ${theme.shadows[2]}; - &:hover { - background-color: var(--color-grey-or-dark); - } - &:active { - box-shadow: ${theme.shadows[8]}; - } - &:focus-visible { - box-shadow: ${theme.shadows[6]}; - } - &:disabled { - color: ${theme.palette.action.disabled}; - box-shadow: ${theme.shadows[0]}; - background-color: ${theme.palette.action.disabledBackground}; - } - `, - text: css` - color: var(--color-main); - &:hover { - background-color: var(--color-main-alpha-opacity); - } - `, + outlined: styles.colorVariantOutlined, + contained: styles.colorVariantContained, + text: styles.colorVariantText, }; const sizeIconVariant = { outlined: { - small: css` - padding: 3px; - font-size: ${theme.pxToRem(7)}; - `, - medium: css` - padding: 5px; - `, - large: css` - padding: 7px; - font-size: ${theme.pxToRem(10)}; - `, + small: styles.sizeIconVariantOutlinedSmall, + medium: styles.sizeIconVariantOutlinedMedium, + large: styles.sizeIconVariantOutlinedLarge, }, contained: { - small: css` - padding: 4px; - font-size: ${theme.pxToRem(13)}; - `, - medium: css` - padding: 6px; - `, - large: css` - padding: 8px; - font-size: ${theme.pxToRem(10)}; - `, + small: styles.sizeIconVariantContainedSmall, + medium: styles.sizeIconVariantContainedMedium, + large: styles.sizeIconVariantContainedLarge, }, text: { - small: css` - padding: 4px; - font-size: ${theme.pxToRem(13)}; - `, - medium: css` - padding: 6px; - `, - large: css` - padding: 8px; - font-size: ${theme.pxToRem(15)}; - `, + small: styles.sizeIconVariantTextSmall, + medium: styles.sizeIconVariantTextMedium, + large: styles.sizeIconVariantTextLarge, }, }; const sizeVariant = { outlined: { - small: css` - padding: 3px 9px; - font-size: ${theme.pxToRem(13)}; - `, - medium: css` - padding: 5px 15px; - `, - large: css` - padding: 7px 21px; - font-size: ${theme.pxToRem(15)}; - `, + small: styles.sizeVariantOutlinedSmall, + medium: styles.sizeVariantOutlinedMedium, + large: styles.sizeVariantOutlinedLarge, }, contained: { - small: css` - padding: 4px 10px; - font-size: ${theme.pxToRem(13)}; - `, - medium: css` - padding: 6px 16px; - `, - large: css` - padding: 8px 22px; - font-size: ${theme.pxToRem(15)}; - `, + small: styles.sizeVariantContainedSmall, + medium: styles.sizeVariantContainedMedium, + large: styles.sizeVariantContainedLarge, }, text: { - small: css` - padding: 4px 5px; - font-size: ${theme.pxToRem(13)}; - `, - medium: css` - padding: 6px 8px; - `, - large: css` - padding: 8px 11px; - font-size: ${theme.pxToRem(15)}; - `, + small: styles.sizeVariantTextSmall, + medium: styles.sizeVariantTextMedium, + large: styles.sizeVariantTextLarge, }, }; -const fullWidthStyle = css` - width: 100%; -`; +const fullWidthStyle = styles.fullWidth; export function Button({ children, @@ -229,31 +109,15 @@ export function Button({ color = "primary", onClick: doClick, }: Props): VNode { - const style = css` - user-select: none; - width: 24px; - height: 24px; - display: inline-block; - fill: currentColor; - flex-shrink: 0; - transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; - - & > svg { - font-size: 20; - } - `; + const iconStyle = styles.icon; const startIcon = sip && ( <span class={[ - css` - margin-right: 8px; - margin-left: -4px; - mask: var(--image) no-repeat center; - `, + styles.startIcon, colorIconVariant[variant], sizeIconVariant[variant][size], - style, + iconStyle, ].join(" ")} //FIXME: check when sip can be a vnode dangerouslySetInnerHTML={{ __html: sip as string }} @@ -266,14 +130,10 @@ export function Button({ const endIcon = eip && ( <span class={[ - css` - margin-right: -4px; - margin-left: 8px; - mask: var(--image) no-repeat center; - `, + styles.endIcon, colorIconVariant[variant], sizeIconVariant[variant][size], - style, + iconStyle, ].join(" ")} dangerouslySetInnerHTML={{ __html: eip as string }} style={{ @@ -395,18 +255,7 @@ export function IconButton({ return ( <ButtonBase onClick={onClick} - class={[ - css` - text-align: center; - flex: 0 0 auto; - font-size: ${theme.typography.pxToRem(24)}; - padding: 8px; - border-radius: 50%; - overflow: visible; - color: "inherit"; - fill: currentColor; - `, - ].join(" ")} + class={[styles.iconButton].join(" ")} svg={svg} /> ); diff --git a/packages/taler-wallet-webextension/src/mui/Grid.module.css b/packages/taler-wallet-webextension/src/mui/Grid.module.css @@ -0,0 +1,162 @@ +.root { + box-sizing: border-box; +} + +.containerStyle { + display: flex; + flex-wrap: wrap; + width: 100%; +} + +.itemStyle { + margin: 0; +} + +.zeroMinWidthStyle { + min-width: 0px; +} + +.columnGapVariant { + width: calc(100% + var(--space-col-xs)); + margin-left: calc(-1 * var(--space-col-xs)); +} + +.columnGapVariant > div { + padding-left: var(--space-col-xs); +} + +@media (min-width: 600px) { + .columnGapVariant { + width: calc(100% + var(--space-col-sm)); + margin-left: calc(-1 * var(--space-col-sm)); + } + .columnGapVariant > div { + padding-left: var(--space-col-sm); + } +} + +@media (min-width: 900px) { + .columnGapVariant { + width: calc(100% + var(--space-col-md)); + margin-left: calc(-1 * var(--space-col-md)); + } + .columnGapVariant > div { + padding-left: var(--space-col-md); + } +} + +@media (min-width: 1200px) { + .columnGapVariant { + width: calc(100% + var(--space-col-lg)); + margin-left: calc(-1 * var(--space-col-lg)); + } + .columnGapVariant > div { + padding-left: var(--space-col-lg); + } +} + +@media (min-width: 1536px) { + .columnGapVariant { + width: calc(100% + var(--space-col-xl)); + margin-left: calc(-1 * var(--space-col-xl)); + } + .columnGapVariant > div { + padding-left: var(--space-col-xl); + } +} + +.rowGapVariant { + margin-top: calc(-1 * var(--space-row-xs)); +} + +.rowGapVariant > div { + padding-top: var(--space-row-xs); +} + +@media (min-width: 600px) { + .rowGapVariant { + margin-top: calc(-1 * var(--space-row-sm)); + } + .rowGapVariant > div { + padding-top: var(--space-row-sm); + } +} + +@media (min-width: 900px) { + .rowGapVariant { + margin-top: calc(-1 * var(--space-row-md)); + } + .rowGapVariant > div { + padding-top: var(--space-row-md); + } +} + +@media (min-width: 1200px) { + .rowGapVariant { + margin-top: calc(-1 * var(--space-row-lg)); + } + .rowGapVariant > div { + padding-top: var(--space-row-lg); + } +} + +@media (min-width: 1536px) { + .rowGapVariant { + margin-top: calc(-1 * var(--space-row-xl)); + } + .rowGapVariant > div { + padding-top: var(--space-row-xl); + } +} + +.sizeVariantXS { + flex-basis: var(--relation-col-vs-xs); + flex-grow: 0; + max-width: var(--relation-col-vs-xs); +} + +@media (min-width: 600px) { + .sizeVariantSM { + flex-basis: var(--relation-col-vs-sm); + flex-grow: 0; + max-width: var(--relation-col-vs-sm); + } +} + +@media (min-width: 900px) { + .sizeVariantMD { + flex-basis: var(--relation-col-vs-md); + flex-grow: 0; + max-width: var(--relation-col-vs-md); + } +} + +@media (min-width: 1200px) { + .sizeVariantLG { + flex-basis: var(--relation-col-vs-lg); + flex-grow: 0; + max-width: var(--relation-col-vs-lg); + } +} + +@media (min-width: 1536px) { + .sizeVariantXL { + flex-basis: var(--relation-col-vs-xl); + flex-grow: 0; + max-width: var(--relation-col-vs-xl); + } +} + +.sizeVariantExpand { + flex-basis: 0; + flex-grow: 1; + max-width: 100%; +} + +.sizeVariantAuto { + flex-basis: auto; + flex-grow: 0; + flex-shrink: 0; + max-width: none; + width: auto; +} diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx @@ -13,11 +13,11 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren, createContext } from "preact"; import { useContext } from "preact/hooks"; // eslint-disable-next-line import/extensions import { theme } from "./style.js"; +import styles from "./Grid.module.css"; type ResponsiveKeys = "xs" | "sm" | "md" | "lg" | "xl"; @@ -29,20 +29,10 @@ export type ResponsiveSize = { xl: number; }; -const root = css` - box-sizing: border-box; -`; -const containerStyle = css` - display: flex; - flex-wrap: wrap; - width: 100%; -`; -const itemStyle = css` - margin: 0; -`; -const zeroMinWidthStyle = css` - min-width: 0px; -`; +const root = styles.root; +const containerStyle = styles.containerStyle; +const itemStyle = styles.itemStyle; +const zeroMinWidthStyle = styles.zeroMinWidthStyle; type GridSizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12; type SpacingSizes = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; @@ -77,132 +67,23 @@ export interface Props extends JSX.HTMLAttributes<HTMLDivElement> { zeroMinWidth?: boolean; children: ComponentChildren; } -theme.breakpoints.up; function getOffset(val: number | string): string | number { - if (typeof val === "number") `${val}px`; + if (typeof val === "number") return `${val}px`; return val; } -const columnGapVariant = css` - ${theme.breakpoints.up("xs")} { - width: calc(100% + var(--space-col-xs)); - margin-left: calc(-1 * var(--space-col-xs)); - & > div { - padding-left: var(--space-col-xs); - } - } - ${theme.breakpoints.up("sm")} { - width: calc(100% + var(--space-col-sm)); - margin-left: calc(-1 * var(--space-col-sm)); - & > div { - padding-left: var(--space-col-sm); - } - } - ${theme.breakpoints.up("md")} { - width: calc(100% + var(--space-col-md)); - margin-left: calc(-1 * var(--space-col-md)); - & > div { - padding-left: var(--space-col-md); - } - } - ${theme.breakpoints.up("lg")} { - width: calc(100% + var(--space-col-lg)); - margin-left: calc(-1 * var(--space-col-lg)); - & > div { - padding-left: var(--space-col-lg); - } - } - ${theme.breakpoints.up("xl")} { - width: calc(100% + var(--space-col-xl)); - margin-left: calc(-1 * var(--space-col-xl)); - & > div { - padding-left: var(--space-col-xl); - } - } -`; -const rowGapVariant = css` - ${theme.breakpoints.up("xs")} { - margin-top: calc(-1 * var(--space-row-xs)); - & > div { - padding-top: var(--space-row-xs); - } - } - ${theme.breakpoints.up("sm")} { - margin-top: calc(-1 * var(--space-row-sm)); - & > div { - padding-top: var(--space-row-sm); - } - } - ${theme.breakpoints.up("md")} { - margin-top: calc(-1 * var(--space-row-md)); - & > div { - padding-top: var(--space-row-md); - } - } - ${theme.breakpoints.up("lg")} { - margin-top: calc(-1 * var(--space-row-lg)); - & > div { - padding-top: var(--space-row-lg); - } - } - ${theme.breakpoints.up("xl")} { - margin-top: calc(-1 * var(--space-row-xl)); - & > div { - padding-top: var(--space-row-xl); - } - } -`; +const columnGapVariant = styles.columnGapVariant; +const rowGapVariant = styles.rowGapVariant; -const sizeVariantXS = css` - ${theme.breakpoints.up("xs")} { - flex-basis: var(--relation-col-vs-xs); - flex-grow: 0; - max-width: var(--relation-col-vs-xs); - } -`; -const sizeVariantSM = css` - ${theme.breakpoints.up("sm")} { - flex-basis: var(--relation-col-vs-sm); - flex-grow: 0; - max-width: var(--relation-col-vs-sm); - } -`; -const sizeVariantMD = css` - ${theme.breakpoints.up("md")} { - flex-basis: var(--relation-col-vs-md); - flex-grow: 0; - max-width: var(--relation-col-vs-md); - } -`; -const sizeVariantLG = css` - ${theme.breakpoints.up("lg")} { - flex-basis: var(--relation-col-vs-lg); - flex-grow: 0; - max-width: var(--relation-col-vs-lg); - } -`; -const sizeVariantXL = css` - ${theme.breakpoints.up("xl")} { - flex-basis: var(--relation-col-vs-xl); - flex-grow: 0; - max-width: var(--relation-col-vs-xl); - } -`; +const sizeVariantXS = styles.sizeVariantXS; +const sizeVariantSM = styles.sizeVariantSM; +const sizeVariantMD = styles.sizeVariantMD; +const sizeVariantLG = styles.sizeVariantLG; +const sizeVariantXL = styles.sizeVariantXL; -const sizeVariantExpand = css` - flex-basis: 0; - flex-grow: 1; - max-width: 100%; -`; - -const sizeVariantAuto = css` - flex-basis: auto; - flex-grow: 0; - flex-shrink: 0; - max-width: none; - width: auto; -`; +const sizeVariantExpand = styles.sizeVariantExpand; +const sizeVariantAuto = styles.sizeVariantAuto; const GridContext = createContext<Partial<ResponsiveSize>>(toResponsive(12)); @@ -325,6 +206,7 @@ export function Grid({ justifyContent, alignItems, flexWrap: wrap, + flexDirection: direction, cursor: onClick ? "pointer" : "inherit", }} onClick={onClick} diff --git a/packages/taler-wallet-webextension/src/mui/Menu.module.css b/packages/taler-wallet-webextension/src/mui/Menu.module.css @@ -0,0 +1,62 @@ +.menuPaper { + max-height: calc(100% - 96px); + -webkit-overflow-scrolling: touch; +} + +.menuList { + outline: 0px; + list-style: none; + margin: 0; + padding: 0; +} + +.popoverRoot { +} + +.popoverPaper { + position: absolute; + overflow-y: auto; + overflow-x: hidden; + min-width: 16px; + min-height: 16px; + max-width: calc(100% - 32px); + max-height: calc(100% - 32px); + outline: 0; +} + +.menuItemRoot { + display: flex; + justify-content: flex-start; + align-items: center; + position: relative; + text-decoration: none; + min-height: 48px; + padding-top: 6px; + padding-bottom: 6px; + box-sizing: border-box; + white-space: nowrap; + appearance: none; + color: var(--palette-text-primary); + cursor: pointer; +} + +.menuItemRoot:not([data-disableGutters]) { + padding-left: 16px; + padding-right: 16px; +} + +.menuItemRoot [data-dividers] { + border-bottom: 1px solid var(--palette-divider); + background-clip: padding-box; +} + +.menuItemRoot:hover { + text-decoration: none; + background-color: var(--color-main-alpha-half); +} + +@media (hover: none) { + .menuItemRoot:hover { + background-color: transparent; + } +} diff --git a/packages/taler-wallet-webextension/src/mui/Menu.stories.module.css b/packages/taler-wallet-webextension/src/mui/Menu.stories.module.css @@ -0,0 +1,13 @@ +.listItemIcon { + min-width: 36px; + color: var(--palette-action-active); + flex-shrink: 0; + display: inline-flex; +} + +.listItemText { + flex: 1 1 auto; + min-width: 0px; + margin-top: 4px; + margin-bottom: 4px; +} diff --git a/packages/taler-wallet-webextension/src/mui/Menu.stories.tsx b/packages/taler-wallet-webextension/src/mui/Menu.stories.tsx @@ -19,10 +19,13 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from "preact"; +import { h, VNode, JSX } from "preact"; import { useState } from "preact/hooks"; import { Menu, MenuItem } from "./Menu.jsx"; import { Paper } from "./Paper.js"; +import styles from "./Menu.stories.module.css"; +import { Typography } from "./Typography.js"; +import { Divider } from "./Divider.js"; export default { title: "menu", @@ -46,17 +49,9 @@ export const BasicExample = (): VNode => { ); }; -import { styled } from "@linaria/react"; -import { theme } from "./style.js"; -import { Typography } from "./Typography.js"; -import { Divider } from "./Divider.js"; - -const ListItemIcon = styled.div` - min-width: 36px; - color: ${theme.palette.action.active}; - flex-shrink: 0; - display: inline-flex; -`; +const ListItemIcon = ({ children }: { children: JSX.Element }): VNode => ( + <div className={styles.listItemIcon}>{children}</div> +); const IconCut = (): VNode => ( <svg @@ -118,12 +113,9 @@ const IconCloud = (): VNode => ( </svg> ); -const ListItemText = styled.div` - flex: 1 1 auto; - min-width: 0px; - margin-top: 4px; - margin-bottom: 4px; -`; +const ListItemText = ({ children }: { children: any }): VNode => ( + <div className={styles.listItemText}>{children}</div> +); export function IconMenu(): VNode { return ( diff --git a/packages/taler-wallet-webextension/src/mui/Menu.tsx b/packages/taler-wallet-webextension/src/mui/Menu.tsx @@ -13,13 +13,13 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; -import { h, VNode, Fragment, ComponentChildren } from "preact"; +import { h, VNode, ComponentChildren } from "preact"; import { buttonBaseStyle } from "./Button.js"; import { alpha } from "./colors/manipulation.js"; import { Paper } from "./Paper.js"; // eslint-disable-next-line import/extensions import { Colors, ripple, theme } from "./style.js"; +import styles from "./Menu.module.css"; interface Props { children: ComponentChildren; @@ -28,75 +28,22 @@ interface Props { open?: boolean; } -const menuPaper = css` - max-height: calc(100% - 96px); - -webkit-overflow-scrolling: touch; -`; - -const menuList = css` - outline: 0px; -`; - export function Menu({ children, onClose, onClick, open }: Props): VNode { return ( - <Popover class={menuPaper}> - <ul class={menuList}>{children}</ul> + <Popover class={styles.menuPaper}> + <ul class={styles.menuList}>{children}</ul> </Popover> ); } -const popoverRoot = css``; - -const popoverPaper = css` - position: absolute; - overflow-y: auto; - overflow-x: hidden; - min-width: 16px; - min-height: 16px; - max-width: calc(100% - 32px); - max-height: calc(100% - 32px); - outline: 0; -`; - function Popover({ children }: any): VNode { return ( - <div class={popoverRoot}> - <Paper class={popoverPaper}>{children}</Paper> + <div class={styles.popoverRoot}> + <Paper class={styles.popoverPaper}>{children}</Paper> </div> ); } -const root = css` - display: flex; - justify-content: flex-start; - align-items: center; - position: relative; - text-decoration: none; - min-height: 48px; - padding-top: 6px; - padding-bottom: 6px; - box-sizing: border-box; - white-space: nowrap; - appearance: none; - - &:not([data-disableGutters]) { - padding-left: 16px; - padding-right: 16px; - } - - [data-dividers] { - border-bottom: 1px solid ${theme.palette.divider}; - background-clip: padding-box; - } - &:hover { - text-decoration: none; - background-color: var(--color-main-alpha-half); - @media (hover: none) { - background-color: transparent; - } - } -`; - export function MenuItem({ children, onClick, @@ -115,7 +62,7 @@ export function MenuItem({ onClick={doClick} disabled={false} role="menuitem" - class={[buttonBaseStyle, root, ripple].join(" ")} + class={[buttonBaseStyle, styles.menuItemRoot, ripple].join(" ")} style={{ "--color-main": theme.palette[color].main, "--color-dark": theme.palette[color].dark, diff --git a/packages/taler-wallet-webextension/src/mui/Modal.module.css b/packages/taler-wallet-webextension/src/mui/Modal.module.css @@ -0,0 +1,8 @@ +.root { + position: fixed; + z-index: 1300; + right: 0px; + bottom: 0px; + top: 0px; + left: 0px; +} diff --git a/packages/taler-wallet-webextension/src/mui/Modal.tsx b/packages/taler-wallet-webextension/src/mui/Modal.tsx @@ -14,27 +14,14 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren } from "preact"; import { useCallback, useEffect, useRef, useState } from "preact/hooks"; -// eslint-disable-next-line import/extensions -import { alpha } from "./colors/manipulation.js"; import { ModalManager } from "./ModalManager.js"; import { Portal } from "./Portal.js"; -// eslint-disable-next-line import/extensions -import { theme } from "./style.js"; - -const baseStyle = css` - position: fixed; - z-index: ${theme.zIndex.modal}; - right: 0px; - bottom: 0px; - top: 0px; - left: 0px; -`; +import styles from "./Modal.module.css"; interface Props { - class: string; + class?: string; children: ComponentChildren; open?: boolean; exited?: boolean; @@ -86,7 +73,7 @@ export function Modal({ // disablePortal={disablePortal} > <div - class={[_class, baseStyle].join(" ")} + class={[_class, styles.root].join(" ")} style={{ visibility: !open && exited ? "hidden" : "visible", }} diff --git a/packages/taler-wallet-webextension/src/mui/Paper.module.css b/packages/taler-wallet-webextension/src/mui/Paper.module.css @@ -0,0 +1,20 @@ +.root { + background-color: var(--palette-background-paper); + color: var(--palette-text-primary); +} + +:global(.theme-dark) .root { + background-image: var(--gradient-white-elevation); +} + +.rounded { + border-radius: 4px; +} + +.outlined { + border: 1px solid var(--palette-divider); +} + +.elevation { + box-shadow: var(--theme-shadow-elevation); +} diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx @@ -13,26 +13,12 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren } from "preact"; // eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation.js"; // eslint-disable-next-line import/extensions import { theme } from "./style.js"; - -const borderVariant = { - outlined: css` - border: 1px solid ${theme.palette.divider}; - `, - elevation: css` - box-shadow: var(--theme-shadow-elevation); - `, -}; -const baseStyle = css` - .theme-dark & { - background-image: var(--gradient-white-elevation); - } -`; +import styles from "./Paper.module.css"; interface Props extends JSX.HTMLAttributes<HTMLDivElement> { elevation?: number; @@ -54,9 +40,9 @@ export function Paper({ <div class={[ _class, - baseStyle, - !square && theme.shape.roundBorder, - borderVariant[variant], + styles.root, + !square && styles.rounded, + variant === "outlined" ? styles.outlined : styles.elevation, ].join(" ")} style={{ "--theme-shadow-elevation": theme.shadows[elevation], diff --git a/packages/taler-wallet-webextension/src/mui/Popover.module.css b/packages/taler-wallet-webextension/src/mui/Popover.module.css @@ -0,0 +1,2 @@ +.root { +} diff --git a/packages/taler-wallet-webextension/src/mui/Popover.tsx b/packages/taler-wallet-webextension/src/mui/Popover.tsx @@ -14,19 +14,17 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { h, VNode, ComponentChildren } from "preact"; - -const baseStyle = css``; +import styles from "./Popover.module.css"; interface Props { - class: string; + class?: string; children: ComponentChildren; } export function Popover({ class: _class, children, ...rest }: Props): VNode { return ( - <div class={[_class, baseStyle].join(" ")} style={{}} {...rest}> + <div class={[_class, styles.root].join(" ")} style={{}} {...rest}> {children} </div> ); diff --git a/packages/taler-wallet-webextension/src/mui/Portal.tsx b/packages/taler-wallet-webextension/src/mui/Portal.tsx @@ -14,7 +14,6 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { createPortal, forwardRef } from "preact/compat"; import { h, @@ -28,17 +27,6 @@ import { } from "preact"; import { Ref, useEffect, useState } from "preact/hooks"; -import { theme } from "./style.js"; - -const baseStyle = css` - position: fixed; - z-index: ${theme.zIndex.modal}; - right: 0px; - bottom: 0px; - top: 0px; - left: 0px; -`; - interface Props { // class: string; children: ComponentChildren; diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.module.css b/packages/taler-wallet-webextension/src/mui/TextField.stories.module.css @@ -0,0 +1,8 @@ +.container { + display: flex; + flex-direction: column; +} + +.container > * { + margin-bottom: 20px !important; +} diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx @@ -19,23 +19,21 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { styled } from "@linaria/react"; -import { h, VNode } from "preact"; +import { h, VNode, JSX } from "preact"; import { useState } from "preact/hooks"; import { TextField, Props } from "./TextField.js"; +import styles from "./TextField.stories.module.css"; export default { title: "TextField", component: TextField, }; -const Container = styled.div` - display: flex; - flex-direction: column; - & > * { - margin-bottom: 20px !important; - } -`; +const Container = ({ + children, +}: { + children: JSX.Element | JSX.Element[]; +}): VNode => <div className={styles.container}>{children}</div>; const Input = (variant: Props["variant"]): VNode => { const [value, onChange] = useState(""); diff --git a/packages/taler-wallet-webextension/src/mui/Typography.module.css b/packages/taler-wallet-webextension/src/mui/Typography.module.css @@ -0,0 +1,21 @@ +.root { + margin: 0; +} + +.noWrap { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.gutterBottom { + margin-bottom: 0.35em; +} + +.paragraph { + margin-bottom: 16px; +} + +.bold { + font-weight: bold; +} diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx @@ -13,11 +13,11 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; // eslint-disable-next-line import/extensions import { theme } from "./style.js"; +import styles from "./Typography.module.css"; type VariantEnum = | "body1" @@ -43,7 +43,7 @@ interface Props { noWrap?: boolean; paragraph?: boolean; variant?: VariantEnum; - children: string[] | string; + children: ComponentChildren; class?: string; } @@ -61,25 +61,6 @@ const defaultVariantMapping = { inherit: "p", }; -const root = css` - margin: 0; -`; - -const noWrapStyle = css` - overflow: "hidden"; - text-overflow: "ellipsis"; - white-space: "nowrap"; -`; -const gutterBottomStyle = css` - margin-bottom: 0.35em; -`; -const paragraphStyle = css` - margin-bottom: 16px; -`; -const boldStyle = css` - font-weight: bold; -`; - export function Typography({ align, gutterBottom = false, @@ -100,7 +81,7 @@ export function Typography({ : defaultVariantMapping[variant as "h1"] || "span"; const alignStyle = - align == "inherit" + align == "inherit" || !align ? {} : { textAlign: align, @@ -111,15 +92,15 @@ export function Typography({ { class: [ _class, - root, - noWrap && noWrapStyle, - gutterBottom && gutterBottomStyle, - paragraph && paragraphStyle, - bold && boldStyle, - theme.typography[variant as "button"], //FIXME: implement the rest of the typography and remove the casting + styles.root, + noWrap && styles.noWrap, + gutterBottom && styles.gutterBottom, + paragraph && styles.paragraph, + bold && styles.bold, + (theme.typography as any)[variant], ].join(" "), style: alignStyle, }, - <i18n.Translate>{children}</i18n.Translate>, + <i18n.Translate>{children as any}</i18n.Translate>, ); } diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.module.css b/packages/taler-wallet-webextension/src/mui/input/FormControl.module.css @@ -0,0 +1,24 @@ +.root { + display: inline-flex; + flex-direction: column; + position: relative; + min-width: 0px; + padding: 0px; + margin: 0px; + border: 0px; + vertical-align: top; +} + +.marginNormal { + margin-top: 16px; + margin-bottom: 8px; +} + +.marginDense { + margin-top: 8px; + margin-bottom: 4px; +} + +.fullWidth { + width: 100%; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx @@ -13,11 +13,11 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { ComponentChildren, createContext, h, VNode } from "preact"; import { useContext, useMemo, useState } from "preact/hooks"; // eslint-disable-next-line import/extensions import { Colors } from "../style.js"; +import styles from "./FormControl.module.css"; export interface Props { color: Colors; @@ -33,31 +33,11 @@ export interface Props { children: ComponentChildren; } -export const root = css` - display: inline-flex; - flex-direction: column; - position: relative; - min-width: 0px; - padding: 0px; - margin: 0px; - border: 0px; - vertical-align: top; -`; - const marginVariant = { none: "", - normal: css` - margin-top: 16px; - margin-bottom: 8px; - `, - dense: css` - margin-top: 8px; - margin-bottom: 4px; - `, + normal: styles.marginNormal, + dense: styles.marginDense, }; -const fullWidthStyle = css` - width: 100%; -`; export const FormControlContext = createContext<FCCProps | null>(null); @@ -107,9 +87,9 @@ export function FormControl({ return ( <div class={[ - root, + styles.root, marginVariant[margin], - fullWidth ? fullWidthStyle : "", + fullWidth ? styles.fullWidth : "", ].join(" ")} > <FormControlContext.Provider value={value}> diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.module.css b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.module.css @@ -0,0 +1,25 @@ +.root { + color: var(--palette-text-secondary); + text-align: left; + margin-top: 3px; + margin-bottom: 0px; + margin-right: 0px; + margin-left: 0px; +} + +.disabled { + color: var(--palette-text-disabled); +} + +.error { + color: var(--palette-error-main); +} + +.sizeSmall { + margin-top: 4px; +} + +.contained { + margin-right: 14px; + margin-left: 14px; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx @@ -13,33 +13,11 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; // eslint-disable-next-line import/extensions import { theme } from "../style.js"; import { useFormControl } from "./FormControl.js"; - -const root = css` - color: ${theme.palette.text.secondary}; - text-align: left; - margin-top: 3px; - margin-bottom: 0px; - margin-right: 0px; - margin-left: 0px; -`; -const disabledStyle = css` - color: ${theme.palette.text.disabled}; -`; -const errorStyle = css` - color: ${theme.palette.error.main}; -`; -const sizeSmallStyle = css` - margin-top: 4px; -`; -const containedStyle = css` - margin-right: 14px; - margin-left: 14px; -`; +import styles from "./FormHelperText.module.css"; interface Props { disabled?: boolean; @@ -56,12 +34,12 @@ export function FormHelperText({ children, ...props }: Props): VNode { return ( <p class={[ - root, + styles.root, theme.typography.caption, - fcs.disabled && disabledStyle, - fcs.error && errorStyle, - fcs.size === "small" && sizeSmallStyle, - contained && containedStyle, + fcs.disabled && styles.disabled, + fcs.error && styles.error, + fcs.size === "small" && styles.sizeSmall, + contained && styles.contained, ].join(" ")} > {children} diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.module.css b/packages/taler-wallet-webextension/src/mui/input/FormLabel.module.css @@ -0,0 +1,18 @@ +.root { + color: var(--palette-text-secondary); + line-height: 1.4375em; + padding: 0px; + position: relative; +} + +.root[data-focused] { + color: var(--color-main); +} + +.root[data-disabled] { + color: var(--palette-text-disabled); +} + +.root[data-error] { + color: var(--palette-error-main); +} diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx @@ -13,11 +13,10 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; -// eslint-disable-next-line import/extensions import { Colors, theme } from "../style.js"; import { useFormControl } from "./FormControl.js"; +import styles from "./FormLabel.module.css"; export interface Props { class?: string; @@ -30,22 +29,6 @@ export interface Props { children?: ComponentChildren; } -const root = css` - color: ${theme.palette.text.secondary}; - line-height: 1.4375em; - padding: 0px; - position: relative; - &[data-focused] { - color: var(--color-main); - } - &[data-disabled] { - color: ${theme.palette.text.disabled}; - } - &[data-error] { - color: ${theme.palette.error.main}; - } -`; - export function FormLabel({ disabled, error, @@ -70,10 +53,10 @@ export function FormLabel({ data-focused={!fcs.focused ? undefined : true} data-error={!fcs.error ? undefined : true} data-disabled={!fcs.disabled ? undefined : true} - class={[_class, root, theme.typography.body1].join(" ")} + class={[_class, styles.root, theme.typography.body1].join(" ")} {...rest} style={{ - "--color-main": theme.palette[fcs.color].main, + "--color-main": `var(--palette-${fcs.color}-main)`, }} > {children} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.module.css b/packages/taler-wallet-webextension/src/mui/input/InputBase.module.css @@ -0,0 +1,120 @@ +.root { + color: var(--palette-text-primary); + line-height: 1.4375em; + box-sizing: border-box; + position: relative; + cursor: text; + display: inline-flex; + align-items: center; +} + +.root[data-disabled] { + color: var(--palette-text-disabled); + cursor: default; +} + +.rootMultiline { + padding: 4px 0 5px; +} + +.fullWidth { + width: 100%; +} + +.input { + font: inherit; + letter-spacing: inherit; + color: currentColor; + border: 0px; + box-sizing: content-box; + background: none; + height: 1.4375em; + margin: 0px; + -webkit-tap-highlight-color: transparent; + display: block; + min-width: 0px; + width: 100%; + animation-name: auto-fill-cancel; + animation-duration: 10ms; +} + +@keyframes auto-fill { + from { + display: block; + } +} + +@keyframes auto-fill-cancel { + from { + display: block; + } +} + +.input::placeholder { + color: currentColor; + opacity: 0.42; + transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; +} + +.input:not(:focus)::placeholder { + opacity: 0; +} + +.input:focus::placeholder { + opacity: 0.42; +} + +.input:focus { + outline: 0; +} + +.input:invalid { + box-shadow: none; +} + +.input::-webkit-search-decoration { + -webkit-appearance: none; +} + +.input:-webkit-autofill { + animation-duration: 5000s; + animation-name: auto-fill; +} + +.inputDisabled { + opacity: 1; + -webkit-text-fill-color: var(--palette-text-disabled); +} + +.inputSmall { + padding-top: 1px; +} + +.inputMultiline { + height: auto; + resize: none; + padding: 0px; + padding-top: 0px; +} + +.inputSearch { + -moz-appearance: textfield; + -webkit-appearance: textfield; +} + +.shadow { + visibility: hidden; + position: absolute; + overflow: hidden; + height: 0px; + top: 0px; + left: 0px; + transform: translateZ(0); +} + +textarea.input { + height: auto; + resize: none; + padding: 0px; + padding-top: 0px; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -13,41 +13,16 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { Fragment, h, JSX, VNode } from "preact"; -import { - useCallback, - useEffect, - useLayoutEffect, - useRef, - useState, -} from "preact/hooks"; +import { useCallback, useLayoutEffect, useRef, useState } from "preact/hooks"; // eslint-disable-next-line import/extensions import { theme } from "../style.js"; import { FormControlContext, useFormControl } from "./FormControl.js"; - -const rootStyle = css` - color: ${theme.palette.text.primary}; - line-height: 1.4375em; - box-sizing: border-box; - position: relative; - cursor: text; - display: inline-flex; - align-items: center; -`; -const rootDisabledStyle = css` - color: ${theme.palette.text.disabled}; - cursor: default; -`; -const rootMultilineStyle = css` - padding: 4px 0 5px; -`; -const fullWidthStyle = css` - width: "100%"; -`; +import styles from "./InputBase.module.css"; export function InputBaseRoot({ class: _class, + style, disabled, error, multiline, @@ -68,14 +43,14 @@ export function InputBaseRoot({ data-error={!error ? undefined : true} class={[ _class, - rootStyle, + styles.root, theme.typography.body1, - disabled && rootDisabledStyle, - multiline && rootMultilineStyle, - fullWidth && fullWidthStyle, + multiline && styles.rootMultiline, + fullWidth && styles.fullWidth, ].join(" ")} style={{ - "--color-main": theme.palette[fcs.color].main, + "--color-main": `var(--palette-${fcs.color}-main)`, + ...style, }} > {children} @@ -83,83 +58,6 @@ export function InputBaseRoot({ ); } -const componentStyle = css` - font: inherit; - letter-spacing: inherit; - color: currentColor; - border: 0px; - box-sizing: content-box; - background: none; - height: 1.4375em; - margin: 0px; - -webkit-tap-highlight-color: transparent; - display: block; - min-width: 0px; - width: 100%; - animation-name: "auto-fill-cancel"; - animation-duration: 10ms; - - @keyframes auto-fill { - from { - display: block; - } - } - @keyframes auto-fill-cancel { - from { - display: block; - } - } - &::placeholder { - color: "currentColor"; - opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5}; - transition: ${theme.transitions.create("opacity", { - duration: theme.transitions.duration.shorter, - })}; - } - &:not(focus)::placeholder { - opacity: 0; - } - &:focus::placeholder { - opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5}; - } - &:focus { - outline: 0; - } - &:invalid { - box-shadow: none; - } - &::-webkit-search-decoration { - -webkit-appearance: none; - } - &:-webkit-autofill { - animation-duration: 5000s; - animation-name: auto-fill; - } - textarea { - height: "auto"; - resize: "none"; - padding: 0px; - padding-top: 0px; - } -`; -const componentDisabledStyle = css` - opacity: 1; - --webkit-text-fill-color: ${theme.palette.text.disabled}; -`; -const componentSmallStyle = css` - padding-top: 1px; -`; -const componentMultilineStyle = css` - height: auto; - resize: none; - padding: 0px; - padding-top: 0px; -`; -const searchStyle = css` - -moz-appearance: textfield; - -webkit-appearance: textfield; -`; - export function InputBaseComponent({ disabled, size, @@ -177,12 +75,11 @@ export function InputBaseComponent({ disabled={disabled} type={type} class={[ - componentStyle, + styles.input, _class, - disabled && componentDisabledStyle, - size === "small" && componentSmallStyle, - // multiline && componentMultilineStyle, - type === "search" && searchStyle, + disabled && styles.inputDisabled, + size === "small" && styles.inputSmall, + type === "search" && styles.inputSearch, ].join(" ")} {...props} /> @@ -227,35 +124,16 @@ export function InputBase({ return; } - // if (onFocus) { - // onFocus(event); - // } - // if (inputPropsProp.onFocus) { - // inputPropsProp.onFocus(event); - // } - fcs.onFocus(); }; const handleBlur = (): void => { - // if (onBlur) { - // onBlur(event); - // } - // if (inputPropsProp.onBlur) { - // inputPropsProp.onBlur(event); - // } - fcs.onBlur(); }; const handleChange = ( event: JSX.TargetedEvent<HTMLElement & { value?: string }>, ): void => { - // if (inputPropsProp.onChange) { - // inputPropsProp.onChange(event, ...args); - // } - - // Perform in the willUpdate if (onChange) { onChange(event.currentTarget.value); } @@ -264,11 +142,6 @@ export function InputBase({ const handleInput = ( event: JSX.TargetedEvent<HTMLElement & { value?: string }>, ): void => { - // if (inputPropsProp.onChange) { - // inputPropsProp.onChange(event, ...args); - // } - - // Perform in the willUpdate if (onInput) { event.currentTarget.value = onInput(event.currentTarget.value); } @@ -277,10 +150,6 @@ export function InputBase({ const handleClick = ( event: JSX.TargetedMouseEvent<HTMLElement & { value?: string }>, ): void => { - // if (inputRef.current && event.currentTarget === event.target) { - // inputRef.current.focus(); - // } - if (onClick) { onClick(event.currentTarget.value); } @@ -321,15 +190,6 @@ export function InputBase({ </Root> ); } -const shadowStyle = css` - visibility: hidden; - position: absolute; - overflow: hidden; - height: 0px; - top: 0px; - left: 0px; - transform: translateZ(0); -`; function ownerDocument(node: Node | null | undefined): Document { return (node && node.ownerDocument) || document; @@ -363,8 +223,6 @@ function debounce(func: any, wait = 166): any { } export function TextareaAutoSize({ - // disabled, - // size, onChange, onInput, value, @@ -379,11 +237,8 @@ export function TextareaAutoSize({ class: _class, ...props }: any): VNode { - // const { onChange, maxRows, minRows = 1, style, value, ...other } = props; - const { current: isControlled } = useRef(value != null); const inputRef = useRef<HTMLTextAreaElement>(null); - // const handleRef = useForkRef(ref, inputRef); const shadowRef = useRef<HTMLTextAreaElement>(null); const renders = useRef(0); const [state, setState] = useState<{ outerHeightStyle: any; overflow: any }>({ @@ -406,9 +261,6 @@ export function TextareaAutoSize({ inputShallow.style.width = computedStyle.width; inputShallow.value = input.value || props.placeholder || "x"; if (inputShallow.value.slice(-1) === "\n") { - // Certain fonts which overflow the line height will cause the textarea - // to report a different scrollHeight depending on whether the last line - // is empty. Make it non-empty to avoid this issue. inputShallow.value += " "; } @@ -444,8 +296,6 @@ export function TextareaAutoSize({ const overflow = Math.abs(outerHeight - innerHeight) <= 1; setState((prevState) => { - // Need a large enough difference to update the height. - // This prevents infinite rendering loop. if ( renders.current < 20 && ((outerHeightStyle > 0 && @@ -521,25 +371,21 @@ export function TextareaAutoSize({ <Fragment> <textarea class={[ - componentStyle, - componentMultilineStyle, + styles.input, + styles.inputMultiline, _class, - disabled && componentDisabledStyle, - // size === "small" && componentSmallStyle, - multiline && componentMultilineStyle, - type === "search" && searchStyle, + disabled && styles.inputDisabled, + multiline && styles.inputMultiline, + type === "search" && styles.inputSearch, ].join(" ")} value={value} onChange={handleChange} onInput={handleInput} ref={inputRef} - // Apply the rows prop to get a "correct" first SSR paint rows={minRows} style={{ height: state.outerHeightStyle, - // Need a large enough difference to allow scrolling. - // This prevents infinite rendering loop. - overflow: state.overflow ? "hidden" : null, + overflow: state.overflow ? "hidden" : undefined, ...style, }} {...props} @@ -548,10 +394,10 @@ export function TextareaAutoSize({ <textarea aria-hidden class={[ - componentStyle, - componentMultilineStyle, - shadowStyle, - type === "search" && searchStyle, + styles.input, + styles.inputMultiline, + styles.shadow, + type === "search" && styles.inputSearch, ].join(" ")} readOnly ref={shadowRef} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.module.css b/packages/taler-wallet-webextension/src/mui/input/InputFilled.module.css @@ -0,0 +1,88 @@ +.root { + position: relative; + background-color: var(--background-color); + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); + transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; +} + +/* when is not disabled underline */ +.root:hover { + background-color: var(--background-color-hover); +} + +@media (hover: none) { + .root:hover { + background-color: var(--background-color); + } +} + +.root[data-focused] { + background-color: var(--background-color); +} + +.root[data-disabled] { + background-color: var(--background-color-disabled); +} + +.root[data-multiline] { + padding: 25px 12px 8px; +} + +.underline:after { + border-bottom: 2px solid var(--color-main); + left: 0px; + bottom: 0px; + content: ""; + position: absolute; + right: 0px; + transform: scaleX(0); + transition: transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; + pointer-events: none; +} + +.underline[data-focused]:after { + transform: scaleX(1); +} + +.underline[data-error]:after { + border-bottom-color: var(--error-main); + transform: scaleY(1); +} + +.underline:before { + border-bottom: 1px solid var(--bottom-line-color); + left: 0px; + bottom: 0px; + right: 0px; + content: "\00a0"; + position: absolute; + transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; + pointer-events: none; +} + +.underline:hover:not([data-disabled]):before { + border-bottom: 2px solid var(--color-main); +} + +@media (hover: none) { + .underline:hover:not([data-disabled]):before { + border-bottom: 1px solid var(--bottom-line-color); + } +} + +.underline[data-disabled]:before { + border-bottom-style: solid; +} + +.input { + padding-top: 25px; + padding-right: 12px; + padding-bottom: 8px; + padding-left: 12px; +} + +.formControl { + /* label + & */ + margin-top: 16px; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx @@ -13,12 +13,12 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; -import { h, VNode } from "preact"; +import { h, VNode, JSX } from "preact"; // eslint-disable-next-line import/extensions import { Colors, theme } from "../style.js"; import { useFormControl } from "./FormControl.js"; import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase.js"; +import styles from "./InputFilled.module.css"; export interface Props { autoComplete?: string; @@ -64,9 +64,6 @@ export function InputFilled({ } const light = theme.palette.mode === "light"; -const bottomLineColor = light - ? "rgba(0, 0, 0, 0.42)" - : "rgba(255, 255, 255, 0.7)"; const backgroundColor = light ? "rgba(0, 0, 0, 0.06)" : "rgba(255, 255, 255, 0.09)"; @@ -76,94 +73,9 @@ const backgroundColorHover = light const backgroundColorDisabled = light ? "rgba(0, 0, 0, 0.12)" : "rgba(255, 255, 255, 0.12)"; - -const formControlStyle = css` - label + & { - margin-top: 16px; - } -`; - -const filledRootStyle = css` - position: relative; - background-color: ${backgroundColor}; - border-top-left-radius: ${theme.shape.borderRadius}px; - border-top-right-radius: ${theme.shape.borderRadius}px; - transition: ${theme.transitions.create("background-color", { - duration: theme.transitions.duration.shorter, - easing: theme.transitions.easing.easeOut, - })}; - // when is not disabled underline - &:hover { - background-color: ${backgroundColorHover}; - @media (hover: none) { - background-color: ${backgroundColor}; - } - } - &[data-focused] { - background-color: ${backgroundColor}; - } - &[data-disabled] { - background-color: ${backgroundColorDisabled}; - } - &[data-multiline] { - padding: 25px 12px 8px; - } - /* &[data-hasStart] { - padding-left: 25px; - } */ -`; - -const underlineStyle = css` - // when is not disabled underline - &:after { - border-bottom: 2px solid var(--color-main); - left: 0px; - bottom: 0px; - content: ""; - position: absolute; - right: 0px; - transform: scaleX(0); - transition: ${theme.transitions.create("transform", { - duration: theme.transitions.duration.shorter, - easing: theme.transitions.easing.easeOut, - })}; - pointer-events: none; - } - &[data-focused]:after { - transform: scaleX(1); - } - &[data-error]:after { - border-bottom-color: ${theme.palette.error.main}; - transform: scaleY(1); - } - &:before { - border-bottom: 1px solid - ${theme.palette.mode === "light" - ? "rgba(0, 0, 0, 0.42)" - : "rgba(255, 255, 255, 0.7)"}; - left: 0px; - bottom: 0px; - right: 0px; - content: "\\00a0"; - position: absolute; - transition: ${theme.transitions.create("border-bottom-color", { - duration: theme.transitions.duration.shorter, - })}; - pointer-events: none; - } - &:hover:not([data-disabled]:before) { - border-bottom: 2px solid var(--color-main); - @media (hover: none) { - border-bottom: 1px solid - ${theme.palette.mode === "light" - ? "rgba(0, 0, 0, 0.42)" - : "rgba(255, 255, 255, 0.7)"}; - } - } - &[data-disabled]:before { - border-bottom-style: solid; - } -`; +const bottomLineColor = light + ? "rgba(0, 0, 0, 0.42)" + : "rgba(255, 255, 255, 0.7)"; function Root({ fullWidth, @@ -172,6 +84,7 @@ function Root({ error, children, multiline, + color = "primary", }: any): VNode { return ( <InputBaseRoot @@ -180,20 +93,24 @@ function Root({ fullWidth={fullWidth} multiline={multiline} error={error} - class={[filledRootStyle, underlineStyle].join(" ")} + class={[styles.root, styles.underline].join(" ")} + style={ + { + "--background-color": backgroundColor, + "--background-color-hover": backgroundColorHover, + "--background-color-disabled": backgroundColorDisabled, + "--bottom-line-color": bottomLineColor, + "--border-radius": `${theme.shape.borderRadius}px`, + "--error-main": theme.palette.error.main, + "--color-main": theme.palette[color as Colors].main, + } as JSX.CSSProperties + } > {children} </InputBaseRoot> ); } -const filledBaseStyle = css` - padding-top: 25px; - padding-right: 12px; - padding-bottom: 8px; - padding-left: 12px; -`; - function Input(props: any): VNode { - return <InputBaseComponent class={[filledBaseStyle].join(" ")} {...props} />; + return <InputBaseComponent class={styles.input} {...props} />; } diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.module.css b/packages/taler-wallet-webextension/src/mui/input/InputLabel.module.css @@ -0,0 +1,72 @@ +.root { + display: block; + transform-origin: top left; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; +} + +.root[data-form-control] { + position: absolute; + left: 0px; + top: 0px; + transform: translate(0, 20px) scale(1); +} + +.root[data-size="small"] { + transform: translate(0, 17px) scale(1); +} + +.root[data-shrink] { + transform: translate(0, -1.5px) scale(0.75); + transform-origin: top left; + max-width: 133%; +} + +.root:not([data-disable-animation]) { + transition: + color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, + transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms, + max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms; +} + +.root[data-variant="filled"] { + z-index: 1; + pointer-events: none; + transform: translate(12px, 16px) scale(1); + max-width: calc(100% - 24px); +} + +.root[data-variant="filled"][data-size="small"] { + transform: translate(12px, 13px) scale(1); +} + +.root[data-variant="filled"][data-shrink] { + user-select: none; + pointer-events: auto; + transform: translate(12px, 7px) scale(0.75); + max-width: calc(133% - 24px); +} + +.root[data-variant="filled"][data-shrink][data-size="small"] { + transform: translate(12px, 4px) scale(0.75); +} + +.root[data-variant="outlined"] { + z-index: 1; + pointer-events: none; + transform: translate(14px, 16px) scale(1); + max-width: calc(100% - 24px); +} + +.root[data-variant="outlined"][data-size="small"] { + transform: translate(14px, 9px) scale(1); +} + +.root[data-variant="outlined"][data-shrink] { + user-select: none; + pointer-events: auto; + transform: translate(14px, -9px) scale(0.75); + max-width: calc(133% - 24px); +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx @@ -13,78 +13,11 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { ComponentChildren, h, VNode } from "preact"; -// eslint-disable-next-line import/extensions -import { Colors, theme } from "../style.js"; +import { Colors } from "../style.js"; import { useFormControl } from "./FormControl.js"; import { FormLabel } from "./FormLabel.js"; - -const root = css` - display: block; - transform-origin: top left; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 100%; - - &[data-form-control] { - position: absolute; - left: 0px; - top: 0px; - transform: translate(0, 20px) scale(1); - } - &[data-size="small"] { - transform: translate(0, 17px) scale(1); - } - &[data-shrink] { - transform: translate(0, -1.5px) scale(0.75); - transform-origin: top left; - max-width: 133%; - } - &:not([data-disable-animation]) { - transition: ${theme.transitions.create( - ["color", "transform", "max-width"], - { - duration: theme.transitions.duration.shorter, - easing: theme.transitions.easing.easeOut, - }, - )}; - } - &[data-variant="filled"] { - z-index: 1; - pointer-events: none; - transform: translate(12px, 16px) scale(1); - max-width: calc(100% - 24px); - &[data-size="small"] { - transform: translate(12px, 13px) scale(1); - } - &[data-shrink] { - user-select: none; - pointer-events: auto; - transform: translate(12px, 7px) scale(0.75); - max-width: calc(133% - 24px); - &[data-size="small"] { - transform: translate(12px, 4px) scale(0.75); - } - } - } - &[data-variant="outlined"] { - z-index: 1; - pointer-events: none; - transform: translate(14px, 16px) scale(1); - max-width: calc(100% - 24px); - &[data-size="small"] { - transform: translate(14px, 9px) scale(1); - } - &[data-shrink] { - user-select: none; - pointer-events: auto; - transform: translate(14px, -9px) scale(0.75); - max-width: calc(133% - 24px); - } - } -`; +import styles from "./InputLabel.module.css"; interface InputLabelProps { color: Colors; @@ -107,7 +40,7 @@ export function InputLabel(props: Partial<InputLabelProps>): VNode { data-shrink={props.shrink || fcs.filled || fcs.focused ? true : undefined} data-disable-animation={props.disableAnimation ? true : undefined} data-variant={fcs.variant} - class={root} + class={styles.root} {...props} /> ); diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.module.css b/packages/taler-wallet-webextension/src/mui/input/InputStandard.module.css @@ -0,0 +1,67 @@ +.root { + position: relative; + padding: 4px 0 5px; +} + +.formControl { + /* label + & { margin-top: 16px; } */ +} + +/* Standard way to handle label + & in CSS modules might be tricky if label is outside. + But we can use a global selector or just apply the margin if we know the context. + In InputStandard.tsx it was used as formControlStyle. +*/ + +:global(label) + .formControl { + margin-top: 16px; +} + +.underline { + position: relative; +} + +.underline:after { + border-bottom: 2px solid var(--color-main); + left: 0px; + bottom: 0px; + content: ""; + position: absolute; + right: 0px; + transform: scaleX(0); + transition: transform 200ms cubic-bezier(0, 0, 0.2, 1); + pointer-events: none; +} + +.underline[data-focused]:after { + transform: scaleX(1); +} + +.underline[data-error]:after { + border-bottom-color: var(--palette-error-main); + transform: scaleY(1); +} + +.underline:before { + border-bottom: 1px solid rgba(0, 0, 0, 0.42); + left: 0px; + bottom: 0px; + right: 0px; + content: "\00a0"; + position: absolute; + transition: border-bottom-color 200ms; + pointer-events: none; +} + +.underline:hover:not([data-disabled]):before { + border-bottom: 2px solid var(--color-main); +} + +@media (hover: none) { + .underline:hover:not([data-disabled]):before { + border-bottom: 1px solid rgba(0, 0, 0, 0.42); + } +} + +.underline[data-disabled]:before { + border-bottom-style: solid; +} diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx @@ -13,11 +13,12 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { h, VNode } from "preact"; +// eslint-disable-next-line import/extensions import { Colors, theme } from "../style.js"; import { useFormControl } from "./FormControl.js"; import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase.js"; +import styles from "./InputStandard.module.css"; export interface Props { autoComplete?: string; @@ -62,75 +63,24 @@ export function InputStandard({ ); } -const rootStyle = css` - position: relative; - padding: 4px 0 5px; -`; -const formControlStyle = css` - label + & { - margin-top: 16px; - } -`; -const underlineStyle = css` - // when is not disabled underline - &:after { - border-bottom: 2px solid var(--color-main); - left: 0px; - bottom: 0px; - content: ""; - position: absolute; - right: 0px; - transform: scaleX(0); - transition: ${theme.transitions.create("transform", { - duration: theme.transitions.duration.shorter, - easing: theme.transitions.easing.easeOut, - })}; - pointer-events: none; - } - &[data-focused]:after { - transform: scaleX(1); - } - &[data-error]:after { - border-bottom-color: ${theme.palette.error.main}; - transform: scaleY(1); - } - &:before { - border-bottom: 1px solid - ${theme.palette.mode === "light" - ? "rgba(0, 0, 0, 0.42)" - : "rgba(255, 255, 255, 0.7)"}; - left: 0px; - bottom: 0px; - right: 0px; - content: "\\00a0"; - position: absolute; - transition: ${theme.transitions.create("border-bottom-color", { - duration: theme.transitions.duration.shorter, - })}; - pointer-events: none; - } - &:hover:not([data-disabled]:before) { - border-bottom: 2px solid var(--color-main); - @media (hover: none) { - border-bottom: 1px solid - ${theme.palette.mode === "light" - ? "rgba(0, 0, 0, 0.42)" - : "rgba(255, 255, 255, 0.7)"}; - } - } - &[data-disabled]:before { - border-bottom-style: solid; - } -`; - -function Root({ fullWidth, disabled, focused, error, children }: any): VNode { +function Root({ + fullWidth, + disabled, + focused, + error, + children, + color = "primary", +}: any): VNode { return ( <InputBaseRoot disabled={disabled} focused={focused ? true : undefined} fullWidth={fullWidth} error={error} - class={[rootStyle, formControlStyle, underlineStyle].join(" ")} + class={[styles.root, styles.formControl, styles.underline].join(" ")} + style={{ + "--color-main": theme.palette[color as Colors].main, + }} > {children} </InputBaseRoot> diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectStandard.module.css b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.module.css @@ -0,0 +1,20 @@ +.select { + height: auto; + min-height: 1.4375em; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.nativeInput { + bottom: 0px; + left: 0px; + position: absolute; + opacity: 0; + pointer-events: none; + width: 100%; + box-sizing: border-box; +} + +.icon { +} diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx @@ -13,55 +13,14 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; import { h, VNode, Fragment } from "preact"; import { useRef } from "preact/hooks"; -import { Paper } from "../Paper.js"; +import styles from "./SelectStandard.module.css"; function hasValue(value: any): boolean { return value != null && !(Array.isArray(value) && value.length === 0); } -const SelectSelect = css` - height: "auto"; - min-height: "1.4374em"; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; -`; - -const SelectIcon = css``; - -const SelectNativeInput = css` - bottom: 0px; - left: 0px; - position: "absolute"; - opacity: 0px; - pointer-events: "none"; - width: 100%; - box-sizing: border-box; -`; - -// export function SelectStandard({ value }: any): VNode { -// return ( -// <Fragment> -// <div class={SelectSelect} role="button"> -// {!value ? ( -// // notranslate needed while Google Translate will not fix zero-width space issue -// <span className="notranslate">​</span> -// ) : ( -// value -// )} -// <input -// class={SelectNativeInput} -// aria-hidden -// tabIndex={-1} -// value={Array.isArray(value) ? value.join(",") : value} -// /> -// </div> -// </Fragment> -// ); -// } function isFilled(obj: any, SSR = false): boolean { return ( obj && @@ -159,15 +118,7 @@ export function SelectStandard({ }; return ( <Fragment> - <div - class={css` - height: auto; - min-height: 14375em; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - `} - > + <div class={styles.select}> {isEmpty(display) ? ( // notranslate needed while Google Translate will not fix zero-width space issue <span class="notranslate">​</span> @@ -175,26 +126,8 @@ export function SelectStandard({ display )} </div> - <input - class={css` - bottom: 0px; - left: 0px; - position: "absolute"; - opacity: 0; - pointer-events: none; - width: 100%; - box-sizing: border-box; - `} - /> - <svg /> + <input class={styles.nativeInput} /> + <svg class={styles.icon} /> </Fragment> ); } - -// function Popover(): VNode { -// return; -// } - -// function Menu(): VNode { -// return <Paper></Paper>; -// } diff --git a/packages/taler-wallet-webextension/src/mui/style.module.css b/packages/taler-wallet-webextension/src/mui/style.module.css @@ -0,0 +1,59 @@ +.ripple { + background-position: center; + transition: background 0.2s; +} + +.ripple:hover { + background: var(--color-main) + radial-gradient(circle, transparent 1%, var(--color-dark) 1%) center/15000%; +} + +.ripple:active { + background-color: var(--color-main); + background-size: 100%; + transition: background 0s; +} + +.rippleEnabled { + background-position: center; + transition: background 0.2s; +} + +.rippleEnabled:hover:enabled { + background: var(--color-main) + radial-gradient(circle, transparent 1%, var(--color-dark) 1%) center/15000%; +} + +.rippleEnabled:active:enabled { + background-color: var(--color-main); + background-size: 100%; + transition: background 0s; +} + +.rippleEnabledOutlined { + background-position: center; + transition: background 0.2s; +} + +.rippleEnabledOutlined:hover:enabled { + background: var(--color-contrastText) + radial-gradient(circle, transparent 1%, var(--color-light) 1%) center/15000%; +} + +.rippleEnabledOutlined:active:enabled { + background-color: var(--color-contrastText); + background-size: 100%; + transition: background 0s; +} + +.shape-roundBorder { + border-radius: 4px; +} + +.shape-squareBorder { + border-radius: 0px; +} + +.shape-circularBorder { + border-radius: 50%; +} diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -14,8 +14,9 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ /* eslint-disable @typescript-eslint/explicit-function-return-type */ -import { css } from "@linaria/core"; import { darken, lighten } from "polished"; +import styles from "./style.module.css"; +import "./theme.css"; import { blue, common, @@ -68,57 +69,11 @@ const zIndex = { export const theme = createTheme(); -export const ripple = css` - background-position: center; +export const ripple = styles.ripple; - transition: background 0.2s; +export const rippleEnabled = styles.rippleEnabled; - &:hover { - background: var(--color-main) - radial-gradient(circle, transparent 1%, var(--color-dark) 1%) - center/15000%; - } - &:active { - background-color: var(--color-main); - background-size: 100%; - transition: background 0s; - } -`; - -export const rippleEnabled = css` - background-position: center; - - transition: background 0.2s; - - &:hover:enabled { - background: var(--color-main) - radial-gradient(circle, transparent 1%, var(--color-dark) 1%) - center/15000%; - } - &:active:enabled { - background-color: var(--color-main); - background-size: 100%; - transition: background 0s; - } -`; - -export const rippleEnabledOutlined = css` - background-position: center; - - transition: background 0.2s; - - &:hover:enabled { - background: var(--color-contrastText) - radial-gradient(circle, transparent 1%, var(--color-light) 1%) - center/15000%; - } - - &:active:enabled { - background-color: var(--color-contrastText); - background-size: 100%; - transition: background 0s; - } -`; +export const rippleEnabledOutlined = styles.rippleEnabledOutlined; function createTheme() { const light = { @@ -200,15 +155,9 @@ function createTheme() { const breakpoints = createBreakpoints({}); const spacing = createSpacing(); const shape = { - roundBorder: css` - border-radius: 4px; - `, - squareBorder: css` - border-radius: 0px; - `, - circularBorder: css` - border-radius: 50%; - `, + roundBorder: styles["shape-roundBorder"], + squareBorder: styles["shape-squareBorder"], + circularBorder: styles["shape-circularBorder"], borderRadius: 4, }; @@ -400,76 +349,19 @@ function createTheme() { ]; } - ///////////////////// - ///////////////////// TYPOGRAPHY - ///////////////////// - /** - * @see @link{https://material.io/design/typography/the-type-system.html} - * @see @link{https://material.io/design/typography/understanding-typography.html} - */ function createTypography(typography: any) { - // const { const fontFamily = defaultFontFamily, - // The default font size of the Material Specification. fontSize = 14, // px fontWeightLight = 300, fontWeightRegular = 400, fontWeightMedium = 500, fontWeightBold = 700, - // Tell MUI what's the font-size on the html element. - // 16px is the default font-size used by browsers. htmlFontSize = 16; - // Apply the CSS properties to all the variants. - // allVariants, - // pxToRem: pxToRem2, - // ...other - // } = typography; const variants = { - // (fontWeight, size, lineHeight, letterSpacing, casing) => - // h1: buildVariant(fontWeightLight, 96, 1.167, -1.5), - // h2: buildVariant(fontWeightLight, 60, 1.2, -0.5), - // h3: buildVariant(fontWeightRegular, 48, 1.167, 0), - // h4: buildVariant(fontWeightRegular, 34, 1.235, 0.25), - // h5: buildVariant(fontWeightRegular, 24, 1.334, 0), - // h6: buildVariant(fontWeightMedium, 20, 1.6, 0.15), - // subtitle1: buildVariant(fontWeightRegular, 16, 1.75, 0.15), - // subtitle2: buildVariant(fontWeightMedium, 14, 1.57, 0.1), - body1: css` - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-weight: ${fontWeightRegular}; - font-size: ${pxToRem(16)}; - line-height: 1.5; - letter-spacing: ${round(0.15 / 16)}em; - `, - // body1: buildVariant(fontWeightRegular, 16, 1.5, 0.15), - body2: css` - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-weight: ${fontWeightRegular}; - font-size: ${pxToRem(14)}; - line-height: 1.43; - letter-spacing: ${round(0.15 / 14)}em; - `, - // body2: buildVariant(fontWeightRegular, 14, 1.43, 0.15), - button: css` - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-weight: ${fontWeightMedium}; - font-size: ${pxToRem(14)}; - line-height: 1.75; - letter-spacing: ${round(0.4 / 14)}em; - text-transform: uppercase; - `, - /* just of caseAllCaps */ - // button: buildVariant(fontWeightMedium, 14, 1.75, 0.4, caseAllCaps), - - caption: css` - font-family: "Roboto", "Helvetica", "Arial", sans-serif; - font-weight: ${fontWeightMedium}; - font-size: ${pxToRem(12)}; - line-height: 1.66; - letter-spacing: ${round(0.4 / 12)}em; - `, - // caption: buildVariant(fontWeightRegular, 12, 1.66, 0.4), - // overline: buildVariant(fontWeightRegular, 12, 2.66, 1, caseAllCaps), + body1: "typography-body1", + body2: "typography-body2", + button: "typography-button", + caption: "typography-caption", }; return deepmerge( @@ -484,34 +376,12 @@ function createTheme() { fontWeightBold, ...variants, }, - // other, { - clone: false, // No need to clone deep + clone: false, }, ); } - ///////////////////// - ///////////////////// MIXINS - ///////////////////// - // function createMixins(breakpoints: any, spacing: any, mixins: any) { - // return { - // toolbar: { - // minHeight: 56, - // [`${breakpoints.up("xs")} and (orientation: landscape)`]: { - // minHeight: 48, - // }, - // [breakpoints.up("sm")]: { - // minHeight: 64, - // }, - // }, - // ...mixins, - // }; - // } - - ///////////////////// - ///////////////////// TRANSITION - ///////////////////// function formatMs(milliseconds: number) { return `${Math.round(milliseconds)}ms`; } @@ -520,41 +390,25 @@ function createTheme() { if (!height) { return 0; } - const constant = height / 36; - - // https://www.wolframalpha.com/input/?i=(4+%2B+15+*+(x+%2F+36+)+**+0.25+%2B+(x+%2F+36)+%2F+5)+*+10 return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10); } function createTransitions(inputTransitions: any) { - // Follow https://material.google.com/motion/duration-easing.html#duration-easing-natural-easing-curves - // to learn the context in which each easing should be used. const easing = { - // This is the most common easing curve. easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)", - // Objects enter the screen at full velocity from off-screen and - // slowly decelerate to a resting point. easeOut: "cubic-bezier(0.0, 0, 0.2, 1)", - // Objects leave the screen at full velocity. They do not decelerate when off-screen. easeIn: "cubic-bezier(0.4, 0, 1, 1)", - // The sharp curve is used by objects that may return to the screen at any time. sharp: "cubic-bezier(0.4, 0, 0.6, 1)", }; - // Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations - // to learn when use what timing const duration = { shortest: 150, shorter: 200, short: 250, - // most basic recommended timing standard: 300, - // this is to be used in complex animations complex: 375, - // recommended when something is entering screen enteringScreen: 225, - // recommended when something is leaving screen leavingScreen: 195, }; @@ -573,7 +427,6 @@ function createTheme() { duration: durationOption = mergedDuration.standard, easing: easingOption = mergedEasing.easeInOut, delay = 0, - // ...other } = options; return (Array.isArray(props) ? props : [props]) @@ -599,16 +452,10 @@ function createTheme() { }; } - ///////////////////// - ///////////////////// PALETTE - ///////////////////// function createPalette(palette: any) { - // const { const mode: "light" | "dark" = "light"; const contrastThreshold = 3; const tonalOffset = 0.2; - // ...other - // } = palette; const primary = palette.primary || getDefaultPrimary(mode); const secondary = palette.secondary || getDefaultSecondary(mode); @@ -617,15 +464,11 @@ function createTheme() { const success = palette.success || getDefaultSuccess(mode); const warning = palette.warning || getDefaultWarning(mode); - // Use the same logic as - // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59 - // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54 function getContrastText(background: string): string { const contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary; - return contrastText; } @@ -640,32 +483,21 @@ function createTheme() { if (!color.main && color[mainShade]) { color.main = color[mainShade]; } - addLightOrDark(color, "light", lightShade, tonalOffset); addLightOrDark(color, "dark", darkShade, tonalOffset); if (!color.contrastText) { color.contrastText = getContrastText(color.main); } - return color; }; const modes = { dark, light }; - // if (process.env.NODE_ENV !== "production") { - // if (!modes[mode]) { - // console.error(`MUI: The palette mode \`${mode}\` is not supported.`); - // } - // } const paletteOutput = deepmerge( { - // A collection of common colors. common, - // The palette mode, can be light or dark. mode, - // The colors used to represent primary interface elements for a user. primary: augmentColor({ color: primary, name: "primary" }), - // The colors used to represent secondary interface elements for a user. secondary: augmentColor({ color: secondary, name: "secondary", @@ -673,31 +505,17 @@ function createTheme() { lightShade: "A200", darkShade: "A700", }), - // The colors used to represent interface elements that the user should be made aware of. error: augmentColor({ color: error, name: "error" }), - // The colors used to represent potentially dangerous actions or important messages. warning: augmentColor({ color: warning, name: "warning" }), - // The colors used to present information to the user that is neutral and not necessarily important. info: augmentColor({ color: info, name: "info" }), - // The colors used to indicate the successful completion of an action that user triggered. success: augmentColor({ color: success, name: "success" }), - // The grey colors. grey, - // Used by `getContrastText()` to maximize the contrast between - // the background and the text. contrastThreshold, - // Takes a background color and returns the text color that maximizes the contrast. getContrastText, - // Generate a rich color object. augmentColor, - // Used by the functions below to shift a color's luminance by approximately - // two indexes within its tonal palette. - // E.g., shift from Red 500 to Red 300 or Red 700. tonalOffset, - // The light and dark mode object. ...modes[mode], }, - // other: {}, ); @@ -726,47 +544,23 @@ function createTheme() { function getDefaultPrimary(mode = "light") { if (mode === "dark") { - return { - main: blue[200], - light: blue[50], - dark: blue[400], - }; + return { main: blue[200], light: blue[50], dark: blue[400] }; } - return { - main: blue[700], - light: blue[400], - dark: blue[800], - }; + return { main: blue[700], light: blue[400], dark: blue[800] }; } function getDefaultSecondary(mode = "light") { if (mode === "dark") { - return { - main: grey[200], - light: grey[50], - dark: grey[400], - }; + return { main: grey[200], light: grey[50], dark: grey[400] }; } - return { - main: grey[300], - light: grey[100], - dark: grey[600], - }; + return { main: grey[300], light: grey[100], dark: grey[600] }; } function getDefaultError(mode = "light") { if (mode === "dark") { - return { - main: red[500], - light: red[300], - dark: red[700], - }; + return { main: red[500], light: red[300], dark: red[700] }; } - return { - main: red[700], - light: red[400], - dark: red[800], - }; + return { main: red[700], light: red[400], dark: red[800] }; } function getDefaultInfo(mode = "light") { @@ -786,37 +580,18 @@ function createTheme() { function getDefaultSuccess(mode = "light") { if (mode === "dark") { - return { - main: green[400], - light: green[300], - dark: green[700], - }; + return { main: green[400], light: green[300], dark: green[700] }; } - return { - main: green[800], - light: green[500], - dark: green[900], - }; + return { main: green[800], light: green[500], dark: green[900] }; } function getDefaultWarning(mode = "light") { if (mode === "dark") { - return { - main: orange[400], - light: orange[300], - dark: orange[700], - }; + return { main: orange[400], light: orange[300], dark: orange[700] }; } - return { - main: "#ed6c02", - light: orange[500], - dark: orange[900], - }; + return { main: "#ed6c02", light: orange[500], dark: orange[900] }; } - ///////////////////// - ///////////////////// DEEP MERGE - ///////////////////// function isPlainObject(item: unknown): item is Record<keyof any, unknown> { return ( item !== null && typeof item === "object" && item.constructor === Object @@ -833,20 +608,14 @@ function createTheme() { options: DeepmergeOptions = { clone: true }, ): T { const output = options.clone ? { ...target } : target; - if (isPlainObject(target) && isPlainObject(source)) { Object.keys(source).forEach((key) => { - // Avoid prototype pollution - if (key === "__proto__") { - return; - } - + if (key === "__proto__") return; if ( isPlainObject(source[key]) && key in target && isPlainObject(target[key]) ) { - // Since `output` is a clone of `target` and we have narrowed `target` in this block we can cast to the same type. (output as Record<keyof any, unknown>)[key] = deepmerge( target[key], source[key], @@ -857,9 +626,9 @@ function createTheme() { } }); } - return output; } + return { typography, palette, diff --git a/packages/taler-wallet-webextension/src/mui/theme.css b/packages/taler-wallet-webextension/src/mui/theme.css @@ -0,0 +1,167 @@ +:root { + --palette-common-black: #000; + --palette-common-white: #fff; + --palette-mode: light; + --palette-primary-main: #1976d2; + --palette-primary-light: #42a5f5; + --palette-primary-dark: #1565c0; + --palette-primary-contrastText: #fff; + --palette-secondary-main: #e0e0e0; + --palette-secondary-light: #f5f5f5; + --palette-secondary-dark: #757575; + --palette-secondary-contrastText: rgba(0, 0, 0, 0.87); + --palette-error-main: #d32f2f; + --palette-error-light: #ef5350; + --palette-error-dark: #c62828; + --palette-error-contrastText: #fff; + --palette-warning-main: #ed6c02; + --palette-warning-light: #ff9800; + --palette-warning-dark: #e65100; + --palette-warning-contrastText: #fff; + --palette-info-main: #0288d1; + --palette-info-light: #03a9f4; + --palette-info-dark: #01579b; + --palette-info-contrastText: #fff; + --palette-success-main: #2e7d32; + --palette-success-light: #4caf50; + --palette-success-dark: #1b5e20; + --palette-success-contrastText: #fff; + --palette-grey-50: #fafafa; + --palette-grey-100: #f5f5f5; + --palette-grey-200: #eeeeee; + --palette-grey-300: #e0e0e0; + --palette-grey-400: #bdbdbd; + --palette-grey-500: #9e9e9e; + --palette-grey-600: #757575; + --palette-grey-700: #616161; + --palette-grey-800: #424242; + --palette-grey-900: #212121; + --palette-grey-A100: #f5f5f5; + --palette-grey-A200: #eeeeee; + --palette-grey-A400: #bdbdbd; + --palette-grey-A700: #616161; + --palette-text-primary: rgba(0, 0, 0, 0.87); + --palette-text-secondary: rgba(0, 0, 0, 0.6); + --palette-text-disabled: rgba(0, 0, 0, 0.38); + --palette-divider: rgba(0, 0, 0, 0.12); + --palette-background-paper: #fff; + --palette-background-default: #fff; + --palette-action-active: rgba(0, 0, 0, 0.54); + --palette-action-hover: rgba(0, 0, 0, 0.04); + --palette-action-hoverOpacity: 0.04; + --palette-action-selected: rgba(0, 0, 0, 0.08); + --palette-action-selectedOpacity: 0.08; + --palette-action-disabled: rgba(0, 0, 0, 0.26); + --palette-action-disabledBackground: rgba(0, 0, 0, 0.12); + --palette-action-disabledOpacity: 0.38; + --palette-action-focus: rgba(0, 0, 0, 0.12); + --palette-action-focusOpacity: 0.12; + --palette-action-activatedOpacity: 0.12; + --shadow-0: none; + --shadow-1: + 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), + 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + --shadow-2: + 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), + 0px 1px 5px 0px rgba(0, 0, 0, 0.12); + --shadow-3: + 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), + 0px 1px 8px 0px rgba(0, 0, 0, 0.12); + --shadow-4: + 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), + 0px 1px 10px 0px rgba(0, 0, 0, 0.12); + --shadow-5: + 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), + 0px 1px 14px 0px rgba(0, 0, 0, 0.12); + --shadow-6: + 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), + 0px 1px 18px 0px rgba(0, 0, 0, 0.12); + --shadow-7: + 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), + 0px 2px 16px 1px rgba(0, 0, 0, 0.12); + --shadow-8: + 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), + 0px 3px 14px 2px rgba(0, 0, 0, 0.12); + --shadow-9: + 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), + 0px 3px 16px 2px rgba(0, 0, 0, 0.12); + --shadow-10: + 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), + 0px 4px 18px 3px rgba(0, 0, 0, 0.12); + --shadow-11: + 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), + 0px 4px 20px 3px rgba(0, 0, 0, 0.12); + --shadow-12: + 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), + 0px 5px 22px 4px rgba(0, 0, 0, 0.12); + --shadow-13: + 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), + 0px 5px 24px 4px rgba(0, 0, 0, 0.12); + --shadow-14: + 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), + 0px 5px 26px 4px rgba(0, 0, 0, 0.12); + --shadow-15: + 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), + 0px 6px 28px 5px rgba(0, 0, 0, 0.12); + --shadow-16: + 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), + 0px 6px 30px 5px rgba(0, 0, 0, 0.12); + --shadow-17: + 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), + 0px 6px 32px 5px rgba(0, 0, 0, 0.12); + --shadow-18: + 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), + 0px 7px 34px 6px rgba(0, 0, 0, 0.12); + --shadow-19: + 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), + 0px 7px 36px 6px rgba(0, 0, 0, 0.12); + --shadow-20: + 0px 10px 13px -6px rgba(0, 0, 0, 0.2), + 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12); + --shadow-21: + 0px 10px 13px -6px rgba(0, 0, 0, 0.2), + 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12); + --shadow-22: + 0px 10px 14px -6px rgba(0, 0, 0, 0.2), + 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12); + --shadow-23: + 0px 11px 14px -7px rgba(0, 0, 0, 0.2), + 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12); + --shadow-24: + 0px 11px 15px -7px rgba(0, 0, 0, 0.2), + 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); + --typography-fontFamily: "Roboto", "Helvetica", "Arial", sans-serif; +} + +.typography-body1 { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 400; + font-size: 1rem; + line-height: 1.5; + letter-spacing: 0.00938em; +} + +.typography-body2 { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 400; + font-size: 0.875rem; + line-height: 1.43; + letter-spacing: 0.01071em; +} + +.typography-button { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 500; + font-size: 0.875rem; + line-height: 1.75; + letter-spacing: 0.02857em; + text-transform: uppercase; +} + +.typography-caption { + font-family: "Roboto", "Helvetica", "Arial", sans-serif; + font-weight: 500; + font-size: 0.75rem; + line-height: 1.66; + letter-spacing: 0.03333em; +} diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.module.css b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.module.css @@ -0,0 +1,3 @@ +.margin { + margin: 1em; +} diff --git a/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx b/packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx @@ -13,17 +13,13 @@ You should have received a copy of the GNU General Public License along with GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { css } from "@linaria/core"; -import { Fragment, h, VNode } from "preact"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Fragment, h, VNode } from "preact"; import { Alert } from "../mui/Alert.js"; import { Button } from "../mui/Button.js"; import { ButtonHandler } from "../mui/handlers.js"; import { Paper } from "../mui/Paper.js"; - -const margin = css` - margin: 1em; -`; +import styles from "./NoBalanceHelp.module.css"; export function NoBalanceHelp({ goToWalletManualWithdraw, @@ -33,7 +29,7 @@ export function NoBalanceHelp({ const { i18n } = useTranslationContext(); return ( <Fragment> - <Paper class={margin}> + <Paper class={styles.margin}> <Alert title={i18n.str`Your wallet is empty.`} severity="info"> <Button fullWidth diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.module.css b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.module.css @@ -0,0 +1,111 @@ +.container { + display: flex; + flex-direction: column; +} + +.container > * { + margin: 8px; +} + +.contactTable { + width: 100%; +} + +.contactTable > tr > td { + color: black; +} + +.contactTable > tr > td > div:not([data-disabled]):hover { + background-color: lightblue; +} + +.contactTable div[data-disabled] > * { + color: gray; +} + +.contactTable > tr:nth-child(2n) { + background: #ebebeb; +} + +.mediaExample { + text-size-adjust: 100%; + color: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + text-transform: none; + text-align: left; + box-sizing: border-box; + align-items: center; + display: flex; + padding: 8px 8px; + cursor: pointer; +} + +.mediaExample[data-disabled]:hover { + cursor: inherit; +} + +.mediaLeft { + text-size-adjust: 100%; + color: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + text-transform: none; + text-align: left; + box-sizing: border-box; + padding-right: 8px; + display: block; +} + +.mediaBody { + text-size-adjust: 100%; + font-family: inherit; + text-transform: none; + text-align: left; + box-sizing: border-box; + flex: 1 1; + font-size: 14px; + font-weight: 500; + line-height: 1.42857; +} + +.mediaRight { + text-size-adjust: 100%; + color: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + text-transform: none; + text-align: left; + box-sizing: border-box; + padding-left: 8px; +} + +.circleDiv { + box-sizing: border-box; + align-items: center; + background-position: 50%; + background-repeat: no-repeat; + background-size: cover; + border-radius: 50%; + display: flex; + justify-content: center; + margin-left: auto; + margin-right: auto; + overflow: hidden; + text-align: center; + text-decoration: none; + text-transform: uppercase; + transition: + background-color 0.15s ease, + border-color 0.15s ease, + color 0.15s ease; + font-size: 16px; + background-color: #86a7bd1a; + height: 40px; + line-height: 40px; + width: 40px; + border: none; +} diff --git a/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/DestinationSelection/views.tsx @@ -21,7 +21,6 @@ import { assertUnreachable, } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { SelectList } from "../../components/SelectList.js"; import { @@ -37,6 +36,7 @@ import { Pages } from "../../NavigationBar.js"; import arrowIcon from "../../svg/chevron-down.inline.svg"; import bankIcon from "../../svg/ri-bank-line.inline.svg"; import { State } from "./index.js"; +import styles from "./views.module.css"; export function SelectCurrencyView({ currencies, @@ -73,116 +73,6 @@ export function SelectCurrencyView({ ); } -const Container = styled.div` - display: flex; - flex-direction: column; - & > * { - margin: 8px; - } -`; - -const ContactTable = styled.table` - width: 100%; - & > tr > td { - & > div:not([data-disabled]):hover { - background-color: lightblue; - } - color: black; - div[data-disabled] > * { - color: gray; - } - } - - & > tr:nth-child(2n) { - background: #ebebeb; - } -`; - -const MediaExample = styled.div` - text-size-adjust: 100%; - color: inherit; - font-family: inherit; - font-size: inherit; - line-height: inherit; - text-transform: none; - text-align: left; - box-sizing: border-box; - align-items: center; - display: flex; - padding: 8px 8px; - - &[data-disabled]:hover { - cursor: inherit; - } - cursor: pointer; -`; - -const MediaLeft = styled.div` - text-size-adjust: 100%; - - color: inherit; - font-family: inherit; - font-size: inherit; - line-height: inherit; - text-transform: none; - text-align: left; - box-sizing: border-box; - padding-right: 8px; - display: block; -`; - -const MediaBody = styled.div` - text-size-adjust: 100%; - - font-family: inherit; - text-transform: none; - text-align: left; - box-sizing: border-box; - flex: 1 1; - font-size: 14px; - font-weight: 500; - line-height: 1.42857; -`; -const MediaRight = styled.div` - text-size-adjust: 100%; - - color: inherit; - font-family: inherit; - font-size: inherit; - line-height: inherit; - text-transform: none; - text-align: left; - box-sizing: border-box; - padding-left: 8px; -`; - -const CircleDiv = styled.div` - box-sizing: border-box; - align-items: center; - background-position: 50%; - background-repeat: no-repeat; - background-size: cover; - border-radius: 50%; - display: flex; - justify-content: center; - margin-left: auto; - margin-right: auto; - overflow: hidden; - text-align: center; - text-decoration: none; - text-transform: uppercase; - transition: - background-color 0.15s ease, - border-color 0.15s ease, - color 0.15s ease; - font-size: 16px; - background-color: #86a7bd1a; - height: 40px; - line-height: 40px; - width: 40px; - border: none; -`; - export function ReadyView(props: State.Ready): VNode { switch (props.type) { case "get": @@ -202,7 +92,7 @@ export function ReadyGetView({ const { i18n } = useTranslationContext(); return ( - <Container> + <div class={styles.container}> <h1> <i18n.Translate>Specify the origin</i18n.Translate> </h1> @@ -215,7 +105,7 @@ export function ReadyGetView({ </p> <Grid item xs={1}> <Paper style={{ padding: 8 }}> - <ContactTable> + <table class={styles.contactTable}> {previous.map((info, i) => ( <tr key={i}> <td> @@ -226,7 +116,7 @@ export function ReadyGetView({ </td> </tr> ))} - </ContactTable> + </table> </Paper> </Grid> </Fragment> @@ -269,7 +159,7 @@ export function ReadyGetView({ </Grid> </Grid> </Grid> - </Container> + </div> ); } export function ReadySendView({ @@ -282,7 +172,7 @@ export function ReadySendView({ const { i18n } = useTranslationContext(); return ( - <Container> + <div class={styles.container}> <h1> <i18n.Translate>Specify the destination</i18n.Translate> </h1> @@ -295,7 +185,7 @@ export function ReadySendView({ </p> <Grid item xs={1}> <Paper style={{ padding: 8 }}> - <ContactTable> + <table class={styles.contactTable}> {previous.map((info, i) => ( <tr key={i}> <td> @@ -309,7 +199,7 @@ export function ReadySendView({ </td> </tr> ))} - </ContactTable> + </table> </Paper> </Grid> </Fragment> @@ -352,7 +242,7 @@ export function ReadySendView({ </Grid> </Grid> </Grid> - </Container> + </div> ); } @@ -366,9 +256,9 @@ function RowExample({ onClick?: () => void; }): VNode { return ( - <MediaExample data-disabled={disabled} onClick={onClick}> - <MediaLeft> - <CircleDiv> + <div class={styles.mediaExample} data-disabled={disabled} onClick={onClick}> + <div class={styles.mediaLeft}> + <div class={styles.circleDiv}> <SvgIcon title={info.label} dangerouslySetInnerHTML={{ @@ -376,21 +266,21 @@ function RowExample({ }} color="currentColor" /> - </CircleDiv> - </MediaLeft> - <MediaBody> + </div> + </div> + <div class={styles.mediaBody}> <span>{info.label}</span> <LightText>{describeAccount(info.paytoUri)}</LightText> - </MediaBody> - <MediaRight> + </div> + <div class={styles.mediaRight}> <SvgIcon title="Select this contact" dangerouslySetInnerHTML={{ __html: arrowIcon }} color="currentColor" transform="rotate(-90deg)" /> - </MediaRight> - </MediaExample> + </div> + </div> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.module.css b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.module.css @@ -0,0 +1,83 @@ +.buttonGroup > button { + margin-left: 8px; + margin-right: 8px; +} + +.buttonGroupFooter { + display: flex; + justify-content: space-between; +} + +.buttonGroupFooter > button { + margin-left: 8px; + margin-right: 8px; +} + +.feeDescriptionTable { + margin-bottom: 20px; + width: 100%; + border-collapse: collapse; +} + +.feeDescriptionTable td { + padding: 8px; +} + +.feeDescriptionTable td.fee, +.feeDescriptionTable th.fee { + text-align: center; +} + +.feeDescriptionTable td.value { + text-align: right; + width: 15%; + white-space: nowrap; +} + +.feeDescriptionTable td.icon { + width: 24px; +} + +.feeDescriptionTable td.icon > div { + width: 24px; + height: 24px; + margin: 0px; +} + +.feeDescriptionTable td.expiration { + text-align: center; +} + +.feeDescriptionTable tr[data-main="true"] { + background-color: #add8e662; +} + +.feeDescriptionTable tr[data-main="true"] > td.value, +.feeDescriptionTable tr[data-main="true"] > td.expiration, +.feeDescriptionTable tr[data-main="true"] > td.fee { + border-bottom: lightgray solid 1px; +} + +.feeDescriptionTable tr[data-hidden="true"] { + display: none; +} + +.feeDescriptionTable tbody > tr.value[data-hasMore="true"], +.feeDescriptionTable tbody > tr.value[data-hasMore="true"] > td { + cursor: pointer; +} + +.feeDescriptionTable th { + position: sticky; + top: 0; + background-color: white; +} + +.container { + display: flex; + flex-direction: column; +} + +.container > * { + margin-bottom: 20px; +} diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSelection/views.tsx @@ -15,7 +15,6 @@ */ import { FeeDescription, FeeDescriptionPair } from "@gnu-taler/taler-util"; -import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Amount } from "../../components/Amount.js"; @@ -30,85 +29,7 @@ import { State as SelectExchangeState } from "../../hooks/useSelectedExchange.js import { Button } from "../../mui/Button.js"; import arrowDown from "../../svg/chevron-down.inline.svg"; import { State } from "./index.js"; - -const ButtonGroup = styled.div` - & > button { - margin-left: 8px; - margin-right: 8px; - } -`; -const ButtonGroupFooter = styled.div` - & { - display: flex; - justify-content: space-between; - } - & > button { - margin-left: 8px; - margin-right: 8px; - } -`; - -const FeeDescriptionTable = styled.table` - & { - margin-bottom: 20px; - width: 100%; - border-collapse: collapse; - } - td { - padding: 8px; - } - td.fee { - text-align: center; - } - th.fee { - text-align: center; - } - td.value { - text-align: right; - width: 15%; - white-space: nowrap; - } - td.icon { - width: 24px; - } - td.icon > div { - width: 24px; - height: 24px; - margin: 0px; - } - td.expiration { - text-align: center; - } - - tr[data-main="true"] { - background-color: #add8e662; - } - tr[data-main="true"] > td.value, - tr[data-main="true"] > td.expiration, - tr[data-main="true"] > td.fee { - border-bottom: lightgray solid 1px; - } - tr[data-hidden="true"] { - display: none; - } - tbody > tr.value[data-hasMore="true"], - tbody > tr.value[data-hasMore="true"] > td { - cursor: pointer; - } - th { - position: sticky; - top: 0; - background-color: white; - } -`; - -const Container = styled.div` - display: flex; - flex-direction: column; - & > * { - margin-bottom: 20px; - } -`; +import styles from "./views.module.css"; export function PrivacyContentView({ exchangeUrl, @@ -189,7 +110,7 @@ export function ComparingView({ }: State.Comparing): VNode { const { i18n } = useTranslationContext(); return ( - <Container> + <div class={styles.container}> <h2> <i18n.Translate>Service fee description</i18n.Translate> </h2> @@ -218,14 +139,14 @@ export function ComparingView({ /> </Input> </p> - <ButtonGroup> + <div class={styles.buttonGroup}> <Button variant="outlined" onClick={onReset.onClick}> <i18n.Translate>Reset</i18n.Translate> </Button> <Button variant="contained" onClick={onSelect.onClick}> <i18n.Translate>Use this exchange</i18n.Translate> </Button> - </ButtonGroup> + </div> </div> </section> <section> @@ -266,7 +187,7 @@ export function ComparingView({ <p> <i18n.Translate>Deposits</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -290,11 +211,11 @@ export function ComparingView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable> + </table> <p> <i18n.Translate>Withdrawals</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -318,11 +239,11 @@ export function ComparingView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable> + </table> <p> <i18n.Translate>Refunds</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -346,11 +267,11 @@ export function ComparingView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable>{" "} + </table>{" "} <p> <i18n.Translate>Refresh</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -374,7 +295,7 @@ export function ComparingView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable>{" "} + </table>{" "} </section> <section> <h2> @@ -400,7 +321,7 @@ export function ComparingView({ <p> Wire <b>{type}</b> is not supported for the previous exchange. </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -420,7 +341,7 @@ export function ComparingView({ list={selected.transferFees[type]} /> </tbody> - </FeeDescriptionTable> + </table> </Fragment> ); })} @@ -428,7 +349,7 @@ export function ComparingView({ return ( <Fragment key={idx}> <p>{type}</p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -452,7 +373,7 @@ export function ComparingView({ sorting={(a, b) => a.localeCompare(b)} /> </tbody> - </FeeDescriptionTable> + </table> </Fragment> ); })} @@ -468,7 +389,7 @@ export function ComparingView({ indicated amount every time a transfer is made. </i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -492,29 +413,29 @@ export function ComparingView({ sorting={(a, b) => a.localeCompare(b)} /> </tbody> - </FeeDescriptionTable> + </table> </section> <section> - <ButtonGroupFooter> + <div class={styles.buttonGroupFooter}> <Button onClick={onShowPrivacy.onClick} variant="outlined"> Privacy policy </Button> <Button onClick={onShowTerms.onClick} variant="outlined"> Terms of service </Button> - </ButtonGroupFooter> + </div> </section> <section> - <ButtonGroupFooter> + <div class={styles.buttonGroupFooter}> <Button onClick={onShowPrivacy.onClick} variant="outlined"> Privacy policy </Button> <Button onClick={onShowTerms.onClick} variant="outlined"> Terms of service </Button> - </ButtonGroupFooter> + </div> </section> - </Container> + </div> ); } @@ -528,7 +449,7 @@ export function ReadyView({ const { i18n } = useTranslationContext(); return ( - <Container> + <div class={styles.container}> <h2> <i18n.Translate>Service fee description</i18n.Translate> </h2> @@ -609,7 +530,7 @@ export function ReadyView({ <p> <i18n.Translate>Deposits</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -630,11 +551,11 @@ export function ReadyView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable> + </table> <p> <i18n.Translate>Withdrawals</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -655,11 +576,11 @@ export function ReadyView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable> + </table> <p> <i18n.Translate>Refunds</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -680,11 +601,11 @@ export function ReadyView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable>{" "} + </table>{" "} <p> <i18n.Translate>Refresh</i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -705,7 +626,7 @@ export function ReadyView({ sorting={(a, b) => Number(a) - Number(b)} /> </tbody> - </FeeDescriptionTable> + </table> </section> <section> <h2> @@ -722,7 +643,7 @@ export function ReadyView({ return ( <Fragment key={idx}> <p>{type}</p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -740,7 +661,7 @@ export function ReadyView({ <tbody> <RenderFeeDescriptionByValue list={fees} /> </tbody> - </FeeDescriptionTable> + </table> </Fragment> ); })} @@ -756,7 +677,7 @@ export function ReadyView({ indicated amount every time a transfer is made. </i18n.Translate> </p> - <FeeDescriptionTable> + <table class={styles.feeDescriptionTable}> <thead> <tr> <th> </th> @@ -774,19 +695,19 @@ export function ReadyView({ <tbody> <RenderFeeDescriptionByValue list={selected.globalFees} /> </tbody> - </FeeDescriptionTable> + </table> </section> <section> - <ButtonGroupFooter> + <div class={styles.buttonGroupFooter}> <Button onClick={onShowPrivacy.onClick} variant="outlined"> Privacy policy </Button> <Button onClick={onShowTerms.onClick} variant="outlined"> Terms of service </Button> - </ButtonGroupFooter> + </div> </section> - </Container> + </div> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.module.css b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.module.css @@ -0,0 +1,15 @@ +.accountTable { + width: 100%; + border-collapse: separate; + border-spacing: 0px 10px; +} + +.accountTable tbody tr:nth-child(odd) > td:not(.actions, .kyc) { + background-color: lightgrey; +} + +.accountTable .actions, +.accountTable .kyc { + width: 10px; + background-color: inherit; +} diff --git a/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx b/packages/taler-wallet-webextension/src/wallet/ManageAccount/views.tsx @@ -34,7 +34,6 @@ import { WireTypeDetails, } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { styled } from "@linaria/react"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { ErrorMessage } from "../../components/ErrorMessage.js"; @@ -44,6 +43,7 @@ import { TextFieldHandler } from "../../mui/handlers.js"; import { TextField } from "../../mui/TextField.js"; import deleteIcon from "../../svg/delete_24px.inline.svg"; import { State } from "./index.js"; +import styles from "./views.module.css"; type AccountType = "bitcoin" | "x-taler-bank" | "iban"; type ComponentFormByAccountType = { @@ -73,21 +73,6 @@ const tableComponentByAccountType: ComponentListByAccountType = { "x-taler-bank": TalerBankTable, }; -const AccountTable = styled.table` - width: 100%; - - border-collapse: separate; - border-spacing: 0px 10px; - tbody tr:nth-child(odd) > td:not(.actions, .kyc) { - background-color: lightgrey; - } - .actions, - .kyc { - width: 10px; - background-color: inherit; - } -`; - export function ReadyView({ currency, error, @@ -215,7 +200,7 @@ function IbanTable({ <h1> <i18n.Translate>IBAN accounts</i18n.Translate> </h1> - <AccountTable> + <table class={styles.accountTable}> <thead> <tr> <th> @@ -283,7 +268,7 @@ function IbanTable({ ); })} </tbody> - </AccountTable> + </table> </div> ); } @@ -303,7 +288,7 @@ function TalerBankTable({ <h1> <i18n.Translate>Taler accounts</i18n.Translate> </h1> - <AccountTable> + <table class={styles.accountTable}> <thead> <tr> <th> @@ -359,7 +344,7 @@ function TalerBankTable({ ); })} </tbody> - </AccountTable> + </table> </div> ); } @@ -380,7 +365,7 @@ function BitcoinTable({ <h2> <i18n.Translate>Bitcoin accounts</i18n.Translate> </h2> - <AccountTable> + <table class={styles.accountTable}> <thead> <tr> <th> @@ -432,7 +417,7 @@ function BitcoinTable({ ); })} </tbody> - </AccountTable> + </table> </div> ); } diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.module.css b/packages/taler-wallet-webextension/src/wallet/QrReader.module.css @@ -0,0 +1,16 @@ +.qrCanvas { + width: 80%; + margin-left: auto; + margin-right: auto; + padding: 8px; + background-color: black; +} + +.container { + display: flex; + flex-direction: column; +} + +.container > * { + margin-bottom: 20px; +} diff --git a/packages/taler-wallet-webextension/src/wallet/QrReader.tsx b/packages/taler-wallet-webextension/src/wallet/QrReader.tsx @@ -34,8 +34,6 @@ import { InternationalizationAPI, useTranslationContext, } from "@gnu-taler/web-util/browser"; -import { css } from "@linaria/core"; -import { styled } from "@linaria/react"; import jsQR, * as pr from "jsqr"; import { h, VNode } from "preact"; import { useRef, useState } from "preact/hooks"; @@ -45,25 +43,10 @@ import { Button } from "../mui/Button.js"; import { Grid } from "../mui/Grid.js"; import { InputFile } from "../mui/InputFile.js"; import { TextField } from "../mui/TextField.js"; - -const QrCanvas = css` - width: 80%; - margin-left: auto; - margin-right: auto; - padding: 8px; - background-color: black; -`; +import styles from "./QrReader.module.css"; const LINE_COLOR = "#FF3B58"; -const Container = styled.div` - display: flex; - flex-direction: column; - & > * { - margin-bottom: 20px; - } -`; - export interface Props { onDetected: (url: TalerUri) => void; } @@ -455,7 +438,7 @@ export function QrReaderPage({ onDetected }: Props): VNode { } return ( - <Container> + <div class={styles.container}> <section> <h1> <i18n.Translate> @@ -555,12 +538,12 @@ export function QrReaderPage({ onDetected }: Props): VNode { /> <canvas id="este" - class={QrCanvas} + class={styles.qrCanvas} ref={canvasRef} style={{ display: show === "canvas" ? "unset " : "none" }} /> </div> - </Container> + </div> ); } const httpClient = new BrowserFetchHttpLib(); diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.module.css b/packages/taler-wallet-webextension/src/wallet/Transaction.module.css @@ -0,0 +1,7 @@ +.purchaseDetailsTable { + width: 100%; +} + +.purchaseDetailsTable > tr > td:nth-child(2n) { + text-align: right; +} diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -47,7 +47,6 @@ import { } from "@gnu-taler/taler-util"; import { WalletApiOperation } from "@gnu-taler/taler-wallet-core"; import { QR_Taler, useTranslationContext } from "@gnu-taler/web-util/browser"; -import { styled } from "@linaria/react"; import { isPast } from "date-fns"; import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; @@ -77,6 +76,7 @@ import { Button } from "../mui/Button.js"; import { SafeHandler } from "../mui/handlers.js"; import { Pages } from "../NavigationBar.js"; import refreshIcon from "../svg/refresh_24px.inline.svg"; +import styles from "./Transaction.module.css"; interface Props { tid: string; @@ -190,14 +190,6 @@ export interface WalletTransactionProps { onForwardToContact?: (id: TransactionIdStr) => Promise<void>; } -const PurchaseDetailsTable = styled.table` - width: 100%; - - & > tr > td:nth-child(2n) { - text-align: right; - } -`; - type TransactionTemplateProps = Omit< Omit<WalletTransactionProps, "onRefund">, "onBack" @@ -1356,7 +1348,7 @@ export function InvoiceCreationDetails({ const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Invoice</i18n.Translate> @@ -1391,7 +1383,7 @@ export function InvoiceCreationDetails({ </tr> </Fragment> )} - </PurchaseDetailsTable> + </table> ); } @@ -1403,7 +1395,7 @@ export function InvoicePaymentDetails({ const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Invoice</i18n.Translate> @@ -1438,7 +1430,7 @@ export function InvoicePaymentDetails({ </tr> </Fragment> )} - </PurchaseDetailsTable> + </table> ); } @@ -1450,7 +1442,7 @@ export function TransferCreationDetails({ const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Sent</i18n.Translate> @@ -1485,7 +1477,7 @@ export function TransferCreationDetails({ </tr> </Fragment> )} - </PurchaseDetailsTable> + </table> ); } @@ -1497,7 +1489,7 @@ export function TransferPickupDetails({ const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Transfer</i18n.Translate> @@ -1532,7 +1524,7 @@ export function TransferPickupDetails({ </tr> </Fragment> )} - </PurchaseDetailsTable> + </table> ); } @@ -1548,7 +1540,7 @@ export function WithdrawDetails({ const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> {conversion ? ( <Fragment> <tr> @@ -1616,7 +1608,7 @@ export function WithdrawDetails({ </td> </tr> )} - </PurchaseDetailsTable> + </table> ); } @@ -1634,7 +1626,7 @@ export function PurchaseDetails({ const total = Amounts.add(price.value, price.fee).amount; return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Price</i18n.Translate> @@ -1755,7 +1747,7 @@ export function PurchaseDetails({ </td> </tr> )} */} - </PurchaseDetailsTable> + </table> ); } @@ -1763,7 +1755,7 @@ function RefundDetails({ amount }: { amount: AmountWithFee }): VNode { const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Refund</i18n.Translate> @@ -1798,7 +1790,7 @@ function RefundDetails({ amount }: { amount: AmountWithFee }): VNode { </tr> </Fragment> )} - </PurchaseDetailsTable> + </table> ); } @@ -1847,7 +1839,7 @@ function TrackingDepositDetails({ const wireTransfers = calculateAmountByWireTransfer(trackingState); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Transfer identification</i18n.Translate> @@ -1865,7 +1857,7 @@ function TrackingDepositDetails({ </td> </tr> ))} - </PurchaseDetailsTable> + </table> ); } @@ -1873,7 +1865,7 @@ export function DepositDetails({ amount }: { amount: AmountWithFee }): VNode { const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Sent</i18n.Translate> @@ -1908,7 +1900,7 @@ export function DepositDetails({ amount }: { amount: AmountWithFee }): VNode { </tr> </Fragment> )} - </PurchaseDetailsTable> + </table> ); } @@ -1916,7 +1908,7 @@ function RefreshDetails({ amount }: { amount: AmountWithFee }): VNode { const { i18n } = useTranslationContext(); return ( - <PurchaseDetailsTable> + <table class={styles.purchaseDetailsTable}> <tr> <td> <i18n.Translate>Refresh</i18n.Translate> @@ -1946,7 +1938,7 @@ function RefreshDetails({ amount }: { amount: AmountWithFee }): VNode { <Amount value={amount.total} maxFracSize={amount.maxFrac} /> </td> </tr> - </PurchaseDetailsTable> + </table> ); } @@ -1998,191 +1990,156 @@ function NicePayto({ payto }: { payto: PaytoUri }): VNode { return <div>{payto.targetPath.substring(0, 20)}...</div>; } case "x-taler-bank": { - const url = new URL("/", `https://${payto.host}`); - return ( - <Fragment> - <div>{"payto.account"}</div> - <SmallLightText> - <a href={url.href} target="_bank" rel="noreferrer"> - {url.href} - </a> - </SmallLightText> - </Fragment> - ); + return <div>{payto.account}</div>; } case "iban": { - return <div>{payto.targetPath.substring(0, 20)}</div>; + return <div>{payto.iban}</div>; + } + case "taler-reserve": { + return <div>{payto.reservePub}</div>; + } + case "taler-reserve-http": { + return <div>{payto.reservePub}</div>; + } + case "cyclos": { + return <div>{payto.account}</div>; + } + case "ethereum": { + return <div>{payto.address.substring(0, 20)}...</div>; } } + } else { + return <div>{stringifyPaytoUri(payto).substring(0, 20)}...</div>; } - return <Fragment>{stringifyPaytoUri(payto)}</Fragment>; } function ShowQrWithCopy({ uri, - startOpen, onForwardToContact, + startOpen = false, }: { uri: TalerUris.URI; - startOpen?: boolean; onForwardToContact?: () => void; + startOpen?: boolean; }): VNode { - const [showing, setShowing] = useState(startOpen); const { i18n } = useTranslationContext(); - const strUri = TalerUris.toString(uri); - async function copy(): Promise<void> { - navigator.clipboard.writeText(strUri); - } - async function toggle(): Promise<void> { - setShowing((s) => !s); + const [open, setOpen] = useState(startOpen); + const [copied, setCopied] = useState(false); + + async function copyToClipboard(): Promise<void> { + await navigator.clipboard.writeText(TalerUris.toString(uri)); + setCopied(true); + setTimeout(() => setCopied(false), 2000); } - if (showing) { - return ( - <div> - <QR_Taler uri={uri} /> - <Button onClick={copy as SafeHandler<void>}> - <i18n.Translate>copy</i18n.Translate> - </Button> - <Button onClick={toggle as SafeHandler<void>}> - <i18n.Translate>hide qr</i18n.Translate> + + return ( + <div style={{ textAlign: "center" }}> + <p> + <Button variant="outlined" onClick={async () => setOpen((o) => !o)}> + {open ? ( + <i18n.Translate>Hide QR code</i18n.Translate> + ) : ( + <i18n.Translate>Show QR code</i18n.Translate> + )} </Button> - <EnabledBySettings name="p2p_aliases"> - {onForwardToContact && ( - <Button onClick={onForwardToContact as SafeHandler<void>}> - <i18n.Translate>forward to contact</i18n.Translate> + </p> + {open && ( + <Fragment> + <p> + <i18n.Translate> + Scan this QR code with another wallet to complete the operation. + </i18n.Translate> + </p> + <div style={{ backgroundColor: "white", padding: 16 }}> + <QR_Taler uri={uri} /> + </div> + <p> + <Button variant="outlined" onClick={copyToClipboard}> + {copied ? ( + <i18n.Translate>Copied!</i18n.Translate> + ) : ( + <i18n.Translate>Copy URI</i18n.Translate> + )} </Button> - )} - </EnabledBySettings> - </div> - ); - } - return ( - <div> - <div>{strUri.substring(0, 64)}...</div> - <Button onClick={copy as SafeHandler<void>}> - <i18n.Translate>copy</i18n.Translate> - </Button> - <Button onClick={toggle as SafeHandler<void>}> - <i18n.Translate>show qr</i18n.Translate> - </Button> - <EnabledBySettings name="p2p_aliases"> - {onForwardToContact && ( - <Button onClick={onForwardToContact as SafeHandler<void>}> - <i18n.Translate>forward to contact</i18n.Translate> - </Button> - )} - </EnabledBySettings> + {onForwardToContact && ( + <Button + variant="outlined" + onClick={async () => onForwardToContact()} + > + <i18n.Translate>Send to contact</i18n.Translate> + </Button> + )} + </p> + </Fragment> + )} </div> ); } -function getShowButtonStates(transaction: Transaction) { - let abort = false; - let fail = false; - let resume = false; - let remove = false; - let suspend = false; - - transaction.txActions.forEach((a) => { - switch (a) { - case TransactionAction.Delete: - remove = true; - break; - case TransactionAction.Suspend: - suspend = true; - break; - case TransactionAction.Resume: - resume = true; - break; - case TransactionAction.Abort: - abort = true; - break; - case TransactionAction.Fail: - fail = true; - break; - case TransactionAction.Retry: - break; - default: - assertUnreachable(a); - break; - } - }); - return { abort, fail, resume, remove, suspend }; -} - function ShowWithdrawalDetailForBankIntegrated({ transaction, }: { transaction: TransactionWithdrawal | TransactionInternalWithdrawal; }): VNode { const { i18n } = useTranslationContext(); - const [showDetails, setShowDetails] = useState(false); - if ( - transaction.txState.major !== TransactionMajorState.Pending || - transaction.withdrawalDetails.type === WithdrawalType.ManualTransfer - ) { - return <Fragment />; + if (transaction.type === TransactionType.InternalWithdrawal) { + return ( + <InfoBox> + <i18n.Translate> + Transferring from another of your own accounts. + </i18n.Translate> + </InfoBox> + ); } - const raw = Amounts.parseOrThrow(transaction.amountRaw); - return ( - <Fragment> - <EnabledBySettings name="advancedMode"> - <a - href="#" - onClick={(e) => { - e.preventDefault(); - setShowDetails(!showDetails); - }} - > - Show details. - </a> - </EnabledBySettings> - - {showDetails && ( - <BankDetailsByPaytoType - amount={raw} - accounts={ - transaction.withdrawalDetails.exchangeCreditAccountDetails ?? [] - } - subject={transaction.withdrawalDetails.reservePub} - /> - )} - {!transaction.withdrawalDetails.confirmed && - transaction.withdrawalDetails.bankConfirmationUrl ? ( + switch (transaction.withdrawalDetails.type) { + case WithdrawalType.TalerBankIntegrationApi: { + return ( <InfoBox> - <div style={{ display: "block" }}> - <i18n.Translate> - Wire transfer need a confirmation. Go to the{" "} - <a - href={transaction.withdrawalDetails.bankConfirmationUrl} - target="_blank" - rel="noreferrer" - style={{ display: "inline" }} - > - <i18n.Translate>bank site</i18n.Translate> - </a>{" "} - and check wire transfer operation to exchange account is complete. - </i18n.Translate> - </div> + <i18n.Translate> + Waiting for the bank to confirm the withdrawal. + </i18n.Translate> </InfoBox> - ) : undefined} - {transaction.withdrawalDetails.confirmed && - !transaction.withdrawalDetails.reserveIsReady && ( - <InfoBox> - <i18n.Translate> - Bank has confirmed the wire transfer. Waiting for the exchange to - send the coins. - </i18n.Translate> - </InfoBox> - )} - {transaction.withdrawalDetails.confirmed && - transaction.withdrawalDetails.reserveIsReady && ( - <InfoBox> - <i18n.Translate> - Exchange is ready to send the coins, withdrawal in progress. - </i18n.Translate> - </InfoBox> - )} - </Fragment> - ); + ); + } + case WithdrawalType.ManualTransfer: { + return <Fragment />; + } + default: + assertUnreachable(transaction.withdrawalDetails); + } +} + +function getShowButtonStates(transaction: Transaction): { + abort: boolean; + resume: boolean; + suspend: boolean; + fail: boolean; + remove: boolean; +} { + const { major, minor } = transaction.txState; + const isPending = major === TransactionMajorState.Pending; + const isFailed = major === TransactionMajorState.Failed; + const isAborted = major === TransactionMajorState.Aborted; + const isExpired = major === TransactionMajorState.Expired; + + const canAbort = + isPending && + (transaction.txActions.includes(TransactionAction.Abort) || + transaction.txActions.includes(TransactionAction.Fail)); + + const canSuspend = isPending; + const canResume = isPending; + + const canFail = + isPending && transaction.txActions.includes(TransactionAction.Fail); + + const canRemove = !isPending || isFailed || isAborted || isExpired; + + return { + abort: canAbort, + resume: canResume, + suspend: canSuspend, + fail: canFail, + remove: canRemove, + }; } diff --git a/packages/taler-wallet-webextension/test.mjs b/packages/taler-wallet-webextension/test.mjs @@ -26,7 +26,4 @@ await build({ assets: [], }, destination: "./dist/test", - css: "linaria", - // no need to produce css - // linariaPlugin: () => {}, }); diff --git a/packages/taler-wallet-webextension/trim-extension.cjs b/packages/taler-wallet-webextension/trim-extension.cjs @@ -1,5 +1,5 @@ // Simple plugin to trim extensions from the filename of relative import statements. -// Required to get linaria to work with `moduleResolution: "Node16"` imports. +// Required to get standard build tools to work with `moduleResolution: "Node16"` imports. // @author Florian Dold // diff --git a/packages/web-util/package.json b/packages/web-util/package.json @@ -39,10 +39,6 @@ "@gnu-taler/pogen": "workspace:*", "@gnu-taler/taler-util": "workspace:*", "@heroicons/react": "^2.0.17", - "@linaria/babel-preset": "5.0.4", - "@linaria/core": "5.0.2", - "@linaria/esbuild": "5.0.4", - "@linaria/react": "5.0.3", "@types/express": "^4.17.14", "@types/node": "^18.11.17", "@types/web": "^0.0.82", diff --git a/packages/web-util/src/index.build.ts b/packages/web-util/src/index.build.ts @@ -1,5 +1,4 @@ import esbuild, { PluginBuild } from "esbuild"; -import linaria from "@linaria/esbuild"; import fs from "node:fs"; import path from "node:path"; import postcss from "postcss"; @@ -192,22 +191,6 @@ const postCssPlugin: esbuild.Plugin = { }, }; -/** - * This should be able to load the plugin but but some reason it does not work - * - * text: "Cannot find module '../plugins/preeval'\n" + - * - */ -function linariaPlugin() { - const linariaCssPlugin: esbuild.Plugin = (linaria as any)({ - babelOptions: { - presets: ["@babel/preset-typescript", "@babel/preset-react", "@linaria"], - }, - sourceMap: true, - }); - return linariaCssPlugin; -} - const defaultEsBuildConfig: esbuild.BuildOptions = { bundle: true, loader: { @@ -247,8 +230,7 @@ export interface BuildParams { * Location directory of the output. Can be redirected with SERVER_DIR environment */ destination: string; - css: "sass" | "postcss" | "linaria"; - linariaPlugin?: () => esbuild.Plugin; + css?: "sass" | "postcss"; } function getPackageAndGitRoot(meta: undefined | ImportMeta) { @@ -307,13 +289,6 @@ export function computeConfig(params: BuildParams): { break; } - case "linaria": { - if (params.linariaPlugin) { - plugins.push(params.linariaPlugin()); - } - break; - } - default: { const cssType: never = params.css; throw Error(`not supported: ${cssType}`); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml @@ -11,12 +11,6 @@ importers: '@babel/core': specifier: 7.13.16 version: 7.13.16 - '@linaria/esbuild': - specifier: ^3.0.0-beta.15 - version: 3.0.0-beta.23 - '@linaria/shaker': - specifier: ^3.0.0-beta.15 - version: 3.0.0-beta.23 esbuild: specifier: ^0.19.9 version: 0.19.9 @@ -624,21 +618,6 @@ importers: '@gnu-taler/pogen': specifier: workspace:* version: link:../pogen - '@linaria/babel-preset': - specifier: 3.0.0-beta.22 - version: 3.0.0-beta.22 - '@linaria/core': - specifier: 3.0.0-beta.22 - version: 3.0.0-beta.22 - '@linaria/react': - specifier: 3.0.0-beta.22 - version: 3.0.0-beta.22(react@18.3.1) - '@linaria/shaker': - specifier: 3.0.0-beta.22 - version: 3.0.0-beta.22 - '@linaria/webpack-loader': - specifier: 3.0.0-beta.22 - version: 3.0.0-beta.22(webpack@4.46.0) '@types/mocha': specifier: ^8.2.2 version: 8.2.3 @@ -650,25 +629,19 @@ importers: version: 20.11.13 '@typescript-eslint/eslint-plugin': specifier: ^8.59.3 - version: 8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0(jiti@1.21.7))(typescript@5.7.3))(eslint@10.3.0(jiti@1.21.7))(typescript@5.7.3) + version: 8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.7.3))(eslint@10.3.0)(typescript@5.7.3) '@typescript-eslint/parser': specifier: ^8.59.3 - version: 8.59.3(eslint@10.3.0(jiti@1.21.7))(typescript@5.7.3) - babel-loader: - specifier: ^8.2.2 - version: 8.2.5(@babel/core@7.18.9)(webpack@4.46.0) - base64-inline-loader: - specifier: ^1.1.1 - version: 1.1.1(webpack@4.46.0) + version: 8.59.3(eslint@10.3.0)(typescript@5.7.3) eslint: specifier: ^10.3.0 - version: 10.3.0(jiti@1.21.7) + version: 10.3.0 eslint-config-preact: specifier: ^2.0.0 - version: 2.0.0(eslint@10.3.0(jiti@1.21.7)) + version: 2.0.0(eslint@10.3.0) eslint-plugin-header: specifier: ^3.1.1 - version: 3.1.1(eslint@10.3.0(jiti@1.21.7)) + version: 3.1.1(eslint@10.3.0) mustache: specifier: ^4.2.0 version: 4.2.0 @@ -1057,31 +1030,16 @@ importers: devDependencies: '@babel/preset-react': specifier: ^7.22.3 - version: 7.22.3(@babel/core@7.13.16) + version: 7.22.3(@babel/core@7.29.0) '@babel/preset-typescript': specifier: 7.18.6 - version: 7.18.6(@babel/core@7.13.16) + version: 7.18.6(@babel/core@7.29.0) '@gnu-taler/pogen': specifier: workspace:* version: link:../pogen '@gnu-taler/web-util': specifier: workspace:* version: link:../web-util - '@linaria/babel-preset': - specifier: 5.0.4 - version: 5.0.4 - '@linaria/core': - specifier: 5.0.2 - version: 5.0.2 - '@linaria/esbuild': - specifier: 5.0.4 - version: 5.0.4(esbuild@0.19.9) - '@linaria/react': - specifier: 5.0.3 - version: 5.0.3(react@18.3.1) - '@linaria/shaker': - specifier: 5.0.3 - version: 5.0.3 '@types/chai': specifier: ^4.3.0 version: 4.3.3 @@ -1129,7 +1087,7 @@ importers: version: 4.2.2 preact-cli: specifier: ^3.3.5 - version: 3.4.1(encoding@0.1.13)(eslint@8.56.0)(preact-render-to-string@5.2.6(preact@10.11.3))(preact@10.11.3)(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)) + version: 3.4.1(eslint@8.56.0)(preact-render-to-string@5.2.6(preact@10.11.3))(preact@10.11.3) preact-render-to-string: specifier: ^5.1.19 version: 5.2.6(preact@10.11.3) @@ -1138,7 +1096,7 @@ importers: version: 5.7.3 web-ext: specifier: ^10.1.0 - version: 10.1.0(jiti@1.21.7) + version: 10.1.0 packages/web-util: dependencies: @@ -1156,7 +1114,7 @@ importers: version: 1.4.4 tailwindcss: specifier: 3.4.17 - version: 3.4.17(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)) + version: 3.4.17 devDependencies: '@babel/preset-react': specifier: ^7.22.3 @@ -1173,18 +1131,6 @@ importers: '@heroicons/react': specifier: ^2.0.17 version: 2.0.17(react@18.3.1) - '@linaria/babel-preset': - specifier: 5.0.4 - version: 5.0.4 - '@linaria/core': - specifier: 5.0.2 - version: 5.0.2 - '@linaria/esbuild': - specifier: 5.0.4 - version: 5.0.4(esbuild@0.19.9) - '@linaria/react': - specifier: 5.0.3 - version: 5.0.3(react@18.3.1) '@types/express': specifier: ^4.17.14 version: 4.17.14 @@ -1217,7 +1163,7 @@ importers: version: 8.4.23 postcss-load-config: specifier: ^4.0.1 - version: 4.0.1(postcss@8.4.23)(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)) + version: 4.0.1(postcss@8.4.23) preact: specifier: 10.11.3 version: 10.11.3 @@ -1283,10 +1229,6 @@ packages: resolution: {integrity: sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==} engines: {node: '>=6.9.0'} - '@babel/compat-data@7.19.4': - resolution: {integrity: sha512-CHIGpJcUQ5lU9KrPHTjBMhVwQG6CQjxfg36fGXl3qk/Gik1WwWachaXFuo0uCWJT/mStOKtcbFJCaVLihC1CMw==} - engines: {node: '>=6.9.0'} - '@babel/compat-data@7.21.7': resolution: {integrity: sha512-KYMqFYTaenzMK4yUtf4EW9wc4N9ef80FsbMtkwool5zpwl4YrT1SdWYSTRcT94KO4hannogdS+LxY7L+arP3gA==} engines: {node: '>=6.9.0'} @@ -1307,14 +1249,6 @@ packages: resolution: {integrity: sha512-1LIb1eL8APMy91/IMW+31ckrfBM4yCoLaVzoDhZUKSM4cu1L1nIidyxkCgzPAgrC5WEz36IPEr/eSeSF9pIn+g==} engines: {node: '>=6.9.0'} - '@babel/core@7.22.1': - resolution: {integrity: sha512-Hkqu7J4ynysSXxmAahpN1jjRwVJ+NdpraFLIWflgjpVob3KNyK3/tIUc7Q7szed8WMp0JNa7Qtd1E9Oo22F9gA==} - engines: {node: '>=6.9.0'} - - '@babel/core@7.23.5': - resolution: {integrity: sha512-Cwc2XjUrG4ilcfOw4wBAK+enbdgwAcAJCfGUItPBKR7Mjw4aEfAFYrLxeRp4jWgtNIKn3n2AlBOfwwafl+42/g==} - engines: {node: '>=6.9.0'} - '@babel/core@7.29.0': resolution: {integrity: sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==} engines: {node: '>=6.9.0'} @@ -1360,12 +1294,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0 - '@babel/helper-compilation-targets@7.21.5': - resolution: {integrity: sha512-1RkbFGUKex4lvsB9yhIfWltJM5cZKUftB2eNajaDv3dCMEp49iBG0K14uH8NnX9IPux2+mK7JGEOB0jn48/J6w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - '@babel/helper-compilation-targets@7.22.15': resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==} engines: {node: '>=6.9.0'} @@ -1386,11 +1314,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0 - '@babel/helper-define-polyfill-provider@0.3.3': - resolution: {integrity: sha512-z5aQKU4IzbqCC1XH0nAqfsFLMVSo22SBKUc0BxGrLkolTdPTructy0ToNnlO2zA4j9Q/7pjMZf0DSY+DSTYzww==} - peerDependencies: - '@babel/core': ^7.4.0-0 - '@babel/helper-define-polyfill-provider@0.4.3': resolution: {integrity: sha512-WBrLmuPP47n7PNwsZ57pqam6G/RGo1vw/87b0Blc53tZNGZ4x7YvZ6HgQe2vo1W/FR20OgjeZuGXzudPiXHFug==} peerDependencies: @@ -1432,10 +1355,6 @@ packages: resolution: {integrity: sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==} engines: {node: '>=6.9.0'} - '@babel/helper-module-imports@7.21.4': - resolution: {integrity: sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==} - engines: {node: '>=6.9.0'} - '@babel/helper-module-imports@7.22.15': resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} engines: {node: '>=6.9.0'} @@ -1568,10 +1487,6 @@ packages: resolution: {integrity: sha512-BSY+JSlHxOmGsPTydUkPf1MdMQ3M81x5xGCOVgWM3G8XH77sJ292Y2oqcp0CbbgxhqBuI46iUz1tT7hqP7EfgA==} engines: {node: '>=6.9.0'} - '@babel/helpers@7.23.5': - resolution: {integrity: sha512-oO7us8FzTEsG3U6ag9MfdF1iA/7Z6dz+MtFhifZk8C8o453rGJFFWUP1t+ULM9TUIAzC9uxXEiXjOiVMyd7QPg==} - engines: {node: '>=6.9.0'} - '@babel/helpers@7.29.2': resolution: {integrity: sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==} engines: {node: '>=6.9.0'} @@ -1604,24 +1519,12 @@ packages: engines: {node: '>=6.0.0'} hasBin: true - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6': - resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3': resolution: {integrity: sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.18.9': - resolution: {integrity: sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.13.0 - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.23.3': resolution: {integrity: sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==} engines: {node: '>=6.9.0'} @@ -1634,13 +1537,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0 - '@babel/plugin-proposal-async-generator-functions@7.19.1': - resolution: {integrity: sha512-0yu8vNATgLy4ivqMNBIwb1HebCelqN7YX8SL3FDXORv/RqT0zEEWUCH4GH44JsSrvCu6GqnAdR5EBFAPeNBB4Q==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-proposal-class-properties@7.18.6': resolution: {integrity: sha512-cumfXOF0+nzZrrN8Rf0t7M+tF6sZc7vhQwYQck9q1/5w2OExlD+b4v4RpMJFaV1Z7WcDRgO6FqvxqxGlwo+RHQ==} engines: {node: '>=6.9.0'} @@ -1648,61 +1544,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-proposal-class-static-block@7.18.6': - resolution: {integrity: sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-static-block instead. - peerDependencies: - '@babel/core': ^7.12.0 - '@babel/plugin-proposal-decorators@7.19.6': resolution: {integrity: sha512-PKWforYpkVkogpOW0RaPuh7eQ7AoFgBJP+d87tQCRY2LVbvyGtfRM7RtrhCBsNgZb+2EY28SeWB6p2xe1Z5oAw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-proposal-dynamic-import@7.18.6': - resolution: {integrity: sha512-1auuwmK+Rz13SJj36R+jqFPMJWyKEDd7lLSdOj4oJK0UTgGueSAtkrCvz9ewmgyU/P941Rv2fQwZJN8s6QruXw==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-export-namespace-from@7.18.9': - resolution: {integrity: sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-json-strings@7.18.6': - resolution: {integrity: sha512-lr1peyn9kOdbYc0xr0OdHTZ5FMqS6Di+H0Fz2I/JwMzGmzJETNeOFq2pBySw6X/KFL5EWDjlJuMsUGRFb8fQgQ==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-logical-assignment-operators@7.18.9': - resolution: {integrity: sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-logical-assignment-operators instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6': - resolution: {integrity: sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-numeric-separator@7.18.6': - resolution: {integrity: sha512-ozlZFogPqoLm8WBr5Z8UckIoE4YQ5KESVcNudyXOR8uqIkliTEgJ3RoketfG6pmzLdeZF0H/wjE9/cCEitBl7Q==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-proposal-object-rest-spread@7.19.4': resolution: {integrity: sha512-wHmj6LDxVDnL+3WhXteUBaoM1aVILZODAUjg11kHqG4cOlfgMQGxw6aCgvrXrmaJR3Bn14oZhImyCPZzRpC93Q==} engines: {node: '>=6.9.0'} @@ -1710,47 +1557,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-proposal-optional-catch-binding@7.18.6': - resolution: {integrity: sha512-Q40HEhs9DJQyaZfUjjn6vE8Cv4GmMHCYuMGIWUnlxH6400VGxOuwWsPt4FxXxJkC/5eOzgn0z21M9gMT4MOhbw==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-optional-chaining@7.18.9': - resolution: {integrity: sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-private-methods@7.18.6': - resolution: {integrity: sha512-nutsvktDItsNn4rpGItSNV2sz1XwS+nfU0Rg8aCx3W3NOKVzdMjJRu0O5OkgDp3ZGICSTbgRpxZoWsxoKRvbeA==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-proposal-private-property-in-object@7.18.6': - resolution: {integrity: sha512-9Rysx7FOctvT5ouj5JODjAFAkgGoudQuLPamZb0v1TGLpapdNaftzifU8NTWQm0IRjqoYypdrSmyWgkocDQ8Dw==} - engines: {node: '>=6.9.0'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2': resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-proposal-unicode-property-regex@7.18.6': - resolution: {integrity: sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==} - engines: {node: '>=4'} - deprecated: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead. - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-syntax-async-generators@7.8.4': resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} peerDependencies: @@ -1783,12 +1595,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-syntax-import-assertions@7.18.6': - resolution: {integrity: sha512-/DU3RXad9+bZwrgWJQKbr39gYbJpLJHezqEzRzi/BHRlJ9zsQb4CK2CA/5apllXNomwA1qHwzvHl+AdEmC5krQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-syntax-import-assertions@7.23.3': resolution: {integrity: sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==} engines: {node: '>=6.9.0'} @@ -1883,12 +1689,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0 - '@babel/plugin-transform-arrow-functions@7.18.6': - resolution: {integrity: sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-arrow-functions@7.23.3': resolution: {integrity: sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==} engines: {node: '>=6.9.0'} @@ -1901,36 +1701,18 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-async-to-generator@7.18.6': - resolution: {integrity: sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-async-to-generator@7.23.3': resolution: {integrity: sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-block-scoped-functions@7.18.6': - resolution: {integrity: sha512-ExUcOqpPWnliRcPqves5HJcJOvHvIIWfuS4sroBUenPuMdmW+SMHDakmtS7qOo13sVppmUijqeTv7qqGsvURpQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-block-scoped-functions@7.23.3': resolution: {integrity: sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-block-scoping@7.19.4': - resolution: {integrity: sha512-934S2VLLlt2hRJwPf4MczaOr4hYF0z+VKPwqTNxyKX7NthTiPfhuKFWQZHXRM0vh/wo/VyXB3s4bZUNA08l+tQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-block-scoping@7.23.4': resolution: {integrity: sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==} engines: {node: '>=6.9.0'} @@ -1949,60 +1731,30 @@ packages: peerDependencies: '@babel/core': ^7.12.0 - '@babel/plugin-transform-classes@7.19.0': - resolution: {integrity: sha512-YfeEE9kCjqTS9IitkgfJuxjcEtLUHMqa8yUJ6zdz8vR7hKuo6mOy2C05P0F1tdMmDCeuyidKnlrw/iTppHcr2A==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-classes@7.23.5': resolution: {integrity: sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-computed-properties@7.18.9': - resolution: {integrity: sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-computed-properties@7.23.3': resolution: {integrity: sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-destructuring@7.19.4': - resolution: {integrity: sha512-t0j0Hgidqf0aM86dF8U+vXYReUgJnlv4bZLsyoPnwZNrGY+7/38o8YjaELrvHeVfTZao15kjR0PVv0nju2iduA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-destructuring@7.23.3': resolution: {integrity: sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-dotall-regex@7.18.6': - resolution: {integrity: sha512-6S3jpun1eEbAxq7TdjLotAsl4WpQI9DxfkycRcKrjhQYzU87qpXdknpBg/e+TdcMehqGnLFi7tnFUBR02Vq6wg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-dotall-regex@7.23.3': resolution: {integrity: sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-duplicate-keys@7.18.9': - resolution: {integrity: sha512-d2bmXCtZXYc59/0SanQKbiWINadaJXqtvIQIzd4+hNwkWBgyCd5F/2t1kXoUdvPMrxzPvhK6EMQRROxsue+mfw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-duplicate-keys@7.23.3': resolution: {integrity: sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==} engines: {node: '>=6.9.0'} @@ -2015,12 +1767,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-exponentiation-operator@7.18.6': - resolution: {integrity: sha512-wzEtc0+2c88FVR34aQmiz56dxEkxr2g8DQb/KfaFa1JYXOFVsbhvAonFN6PwVWj++fKmku8NP80plJ5Et4wqHw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-exponentiation-operator@7.23.3': resolution: {integrity: sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==} engines: {node: '>=6.9.0'} @@ -2033,24 +1779,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-for-of@7.18.8': - resolution: {integrity: sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-for-of@7.23.3': resolution: {integrity: sha512-X8jSm8X1CMwxmK878qsUGJRmbysKNbdpTv/O1/v0LuY/ZkZrng5WYiekYSdg9m09OTmDDUWeEDsTE+17WYbAZw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-function-name@7.18.9': - resolution: {integrity: sha512-WvIBoRPaJQ5yVHzcnJFor7oS5Ls0PYixlTYE63lCj2RtdQEl15M68FXQlxnG6wdraJIXRdR7KI+hQ7q/9QjrCQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-function-name@7.23.3': resolution: {integrity: sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==} engines: {node: '>=6.9.0'} @@ -2063,12 +1797,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-literals@7.18.9': - resolution: {integrity: sha512-IFQDSRoTPnrAIrI5zoZv73IFeZu2dhu6irxQjY9rNjTT53VmKg9fenjvoiOWOkJ6mm4jKVPtdMzBY98Fp4Z4cg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-literals@7.23.3': resolution: {integrity: sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==} engines: {node: '>=6.9.0'} @@ -2081,36 +1809,18 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-member-expression-literals@7.18.6': - resolution: {integrity: sha512-qSF1ihLGO3q+/g48k85tUjD033C29TNTVB2paCwZPVmOsjn9pClvYYrM2VeJpBY2bcNkuny0YUyTNRyRxJ54KA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-member-expression-literals@7.23.3': resolution: {integrity: sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-amd@7.19.6': - resolution: {integrity: sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-amd@7.23.3': resolution: {integrity: sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-commonjs@7.19.6': - resolution: {integrity: sha512-8PIa1ym4XRTKuSsOUXqDG0YaOlEuTVvHMe5JCfgBMOtHvJKw/4NGovEGN33viISshG/rZNVrACiBmPQLvWN8xQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-commonjs@7.21.5': resolution: {integrity: sha512-OVryBEgKUbtqMoB7eG2rs6UFexJi6Zj6FDXx+esBLPTCxCNxAY9o+8Di7IsUGJ+AVhp5ncK0fxWUBd0/1gPhrQ==} engines: {node: '>=6.9.0'} @@ -2123,48 +1833,24 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-systemjs@7.19.6': - resolution: {integrity: sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-systemjs@7.23.3': resolution: {integrity: sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-umd@7.18.6': - resolution: {integrity: sha512-dcegErExVeXcRqNtkRU/z8WlBLnvD4MRnHgNs3MytRO1Mn1sHRyhbcpYbVMGclAqOjdW+9cfkdZno9dFdfKLfQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-modules-umd@7.23.3': resolution: {integrity: sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-named-capturing-groups-regex@7.19.1': - resolution: {integrity: sha512-oWk9l9WItWBQYS4FgXD4Uyy5kq898lvkXpXQxoJEY1RnvPk4R/Dvu2ebXU9q8lP+rlMwUQTFf2Ok6d78ODa0kw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0 - '@babel/plugin-transform-named-capturing-groups-regex@7.22.5': resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 - '@babel/plugin-transform-new-target@7.18.6': - resolution: {integrity: sha512-DjwFA/9Iu3Z+vrAn+8pBUGcjhxKguSMlsFqeCKbhb9BAV756v0krzVK04CRDi/4aqmk8BsHb4a/gFcaA5joXRw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-new-target@7.23.3': resolution: {integrity: sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==} engines: {node: '>=6.9.0'} @@ -2195,12 +1881,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-object-super@7.18.6': - resolution: {integrity: sha512-uvGz6zk+pZoS1aTZrOvrbj6Pp/kK2mp45t2B+bTDre2UgsZZ8EZLSJtUg7m/no0zOJUWgFONpB7Zv9W2tSaFlA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-object-super@7.23.3': resolution: {integrity: sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==} engines: {node: '>=6.9.0'} @@ -2219,12 +1899,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-parameters@7.18.8': - resolution: {integrity: sha512-ivfbE3X2Ss+Fj8nnXvKJS6sjRG4gzwPMsP+taZC+ZzEGjAYlvENixmt1sZ5Ca6tWls+BlKSGKPJ6OOXvXCbkFg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-parameters@7.23.3': resolution: {integrity: sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==} engines: {node: '>=6.9.0'} @@ -2243,12 +1917,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-property-literals@7.18.6': - resolution: {integrity: sha512-cYcs6qlgafTud3PAzrrRNbQtfpQ8+y/+M5tKmksS9+M1ckbH6kzY8MrexEM9mcA6JDsukE19iIRvAyYl463sMg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-property-literals@7.23.3': resolution: {integrity: sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==} engines: {node: '>=6.9.0'} @@ -2279,96 +1947,42 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-regenerator@7.18.6': - resolution: {integrity: sha512-poqRI2+qiSdeldcz4wTSTXBRryoq3Gc70ye7m7UD5Ww0nE29IXqMl6r7Nd15WBgRd74vloEMlShtH6CKxVzfmQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-regenerator@7.23.3': resolution: {integrity: sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-reserved-words@7.18.6': - resolution: {integrity: sha512-oX/4MyMoypzHjFrT1CdivfKZ+XvIPMFXwwxHp/r0Ddy2Vuomt4HDFGmft1TAY2yiTKiNSsh3kjBAzcM8kSdsjA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-reserved-words@7.23.3': resolution: {integrity: sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-runtime@7.19.6': - resolution: {integrity: sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-transform-runtime@7.23.4': - resolution: {integrity: sha512-ITwqpb6V4btwUG0YJR82o2QvmWrLgDnx/p2A3CTPYGaRgULkDiC0DRA2C4jlRB9uXGUEfaSS/IGHfVW+ohzYDw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - - '@babel/plugin-transform-shorthand-properties@7.18.6': - resolution: {integrity: sha512-eCLXXJqv8okzg86ywZJbRn19YJHU4XUa55oz2wbHhaQVn/MM+XhukiT7SYqp/7o00dg52Rj51Ny+Ecw4oyoygw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-shorthand-properties@7.23.3': resolution: {integrity: sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-spread@7.19.0': - resolution: {integrity: sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-spread@7.23.3': resolution: {integrity: sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-sticky-regex@7.18.6': - resolution: {integrity: sha512-kfiDrDQ+PBsQDO85yj1icueWMfGfJFKN1KCkndygtu/C9+XUfydLC8Iv5UYJqRwy4zk8EcplRxEOeLyjq1gm6Q==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-sticky-regex@7.23.3': resolution: {integrity: sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-template-literals@7.18.9': - resolution: {integrity: sha512-S8cOWfT82gTezpYOiVaGHrCbhlHgKhQt8XH5ES46P2XWmX92yisoZywf5km75wv5sYcXDUCLMmMxOLCtthDgMA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-template-literals@7.23.3': resolution: {integrity: sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-typeof-symbol@7.18.9': - resolution: {integrity: sha512-SRfwTtF11G2aemAZWivL7PD+C9z52v9EvMqH9BuYbabyPuKUvSWks3oCg6041pT925L4zVFqaVBeECwsmlguEw==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-typeof-symbol@7.23.3': resolution: {integrity: sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==} engines: {node: '>=6.9.0'} @@ -2387,12 +2001,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-unicode-escapes@7.18.10': - resolution: {integrity: sha512-kKAdAI+YzPgGY/ftStBFXTI1LZFju38rYThnfMykS+IXy8BVx+res7s2fxf1l8I35DV2T97ezo6+SGrXz6B3iQ==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-unicode-escapes@7.23.3': resolution: {integrity: sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==} engines: {node: '>=6.9.0'} @@ -2405,12 +2013,6 @@ packages: peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-unicode-regex@7.18.6': - resolution: {integrity: sha512-gE7A6Lt7YLnNOL3Pb9BNeZvi+d8l7tcRrG4+pwJjK9hD2xX4mEvjlQW60G9EEmfXVYRPv9VRQcyegIVHCql/AA==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/plugin-transform-unicode-regex@7.23.3': resolution: {integrity: sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==} engines: {node: '>=6.9.0'} @@ -2423,23 +2025,12 @@ packages: peerDependencies: '@babel/core': ^7.0.0 - '@babel/preset-env@7.19.4': - resolution: {integrity: sha512-5QVOTXUdqTCjQuh2GGtdd7YEhoRXBMVGROAtsBeLGIbIz3obCBIfRMT1I3ZKkMgNzwkyCkftDXSSkHxnfVf4qg==} - engines: {node: '>=6.9.0'} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/preset-env@7.23.5': resolution: {integrity: sha512-0d/uxVD6tFGWXGDSfyMD1p2otoaKmu6+GD+NfAx0tMaH+dxORnp7T9TaVQ6mKyya7iBtCIVxHjWT7MuzzM9z+A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 - '@babel/preset-modules@0.1.5': - resolution: {integrity: sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==} - peerDependencies: - '@babel/core': ^7.0.0-0 - '@babel/preset-modules@0.1.6-no-external-plugins': resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==} peerDependencies: @@ -2560,18 +2151,6 @@ packages: engines: {node: '>= 0.10.4'} hasBin: true - '@emotion/is-prop-valid@0.8.8': - resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} - - '@emotion/is-prop-valid@1.2.1': - resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} - - '@emotion/memoize@0.7.4': - resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} - - '@emotion/memoize@0.8.1': - resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} - '@esbuild/android-arm64@0.19.9': resolution: {integrity: sha512-q4cR+6ZD0938R19MyEW3jEsMzbb/1rulLXiNAJQADD/XYp7pT+rOS5JGxvpRW8dFDEfjW4wLgC/3FXIw4zYglQ==} engines: {node: '>=12'} @@ -2928,119 +2507,25 @@ packages: '@leichtgewicht/ip-codec@2.0.4': resolution: {integrity: sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==} - '@linaria/babel-preset@3.0.0-beta.22': - resolution: {integrity: sha512-0Igie3stlsKT+XKYdhW7Yy8MNg2gZ5ShOosgTkpz3Agwtz+Osgb/4JNMnqGlAUaVULtMpKLc7mF/NbbhAEEF3Q==} - engines: {node: ^12.16.0 || >=13.7.0} - - '@linaria/babel-preset@3.0.0-beta.23': - resolution: {integrity: sha512-NhxUZokEq12RLpDo4v/f59dB9A/1BbLgGLFotnrDzNBHfylm0qXSIIel68pZOXUB5lVdPJHqZWcT2zxbpGW6fA==} - engines: {node: ^12.16.0 || >=13.7.0} + '@mapbox/node-pre-gyp@1.0.11': + resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==} + hasBin: true - '@linaria/babel-preset@5.0.4': - resolution: {integrity: sha512-OMhlD6gc/+6DFLkadoavlxCtTIElo/UdDMeQH6I/CAL3hgfmHyIXJPrGObTa7jvQKddUaKvFIHGAVB7pz6J8Qg==} - engines: {node: '>=16.0.0'} + '@mdn/browser-compat-data@5.7.6': + resolution: {integrity: sha512-7xdrMX0Wk7grrTZQwAoy1GkvPMFoizStUoL+VmtUkAxegbCCec+3FKwOM6yc/uGU5+BEczQHXAlWiqvM8JeENg==} - '@linaria/core@3.0.0-beta.22': - resolution: {integrity: sha512-BPSecW8QmhQ0y+5cWXEja+MTmLsuo0T1PjqRlSWsmDgjJFFObqCnPEgbR1KNtQb3Msmx1/9q3dYKpA5Zk3g8KQ==} - engines: {node: ^12.16.0 || >=13.7.0} + '@mdn/browser-compat-data@6.1.5': + resolution: {integrity: sha512-PzdZZzRhcXvKB0begee28n5lvwAcinGKYuLZOVxHAZm+n7y01ddEGfdS1ZXRuVcV+ndG6mSEAE8vgudom5UjYg==} - '@linaria/core@5.0.2': - resolution: {integrity: sha512-l5jQq7w9kDvonfr/0MBF47Dagx9Y9f/o5Q8j3zv7GepwG/yHQdbjKr0tq07rx2fSDDX7Nbqlxk6k9Ymir/NGpg==} - engines: {node: '>=16.0.0'} + '@mdn/browser-compat-data@7.3.9': + resolution: {integrity: sha512-ARxwDFfq4uhRSd9Wr1FMaxeKKIFDPyMnSoLe/8WX+nNXbKDILf1H8KDJW9nzu2QTR0hQ37jDCzAgyaNYdLzACQ==} - '@linaria/esbuild@3.0.0-beta.23': - resolution: {integrity: sha512-5hYMPSXo/dsRwq/UszRa17vL5mARa9e/+qKkG8loju0DNN/73kyVkGRcVHw+EMftXnY2x3y7RIJ3E8fWtFvDfg==} - engines: {node: ^12.16.0 || >=13.7.0} + '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': + resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==} - '@linaria/esbuild@5.0.4': - resolution: {integrity: sha512-sIPxeH3TQrIfNBz3wCtxTcu/M5dS2SOBSFps+3EVz1LOkIdy5YAOSWL1i1KWUavSg1cs467Ujxq9Nu79k1SayQ==} - engines: {node: '>=16.0.0'} - peerDependencies: - esbuild: '>=0.12.0' - - '@linaria/logger@3.0.0-beta.20': - resolution: {integrity: sha512-wCxWnldCHf7HXdLG3QtbKyBur+z5V1qZTouSEvcVYDfd4aSRPOi/jLdwsZlsUq2PFGpA3jW6JnreZJ/vxuEl7g==} - engines: {node: ^12.16.0 || >=13.7.0} - - '@linaria/logger@5.0.0': - resolution: {integrity: sha512-PZd5H0I4F84U0kXSE+vD75ltIGDxEA6gMDNWS2aDZFitmdlQM5rIXqvKFrp5NsHa7a3AH+I2Hxm0dg60WZF7vg==} - engines: {node: '>=16.0.0'} - - '@linaria/preeval@3.0.0-beta.23': - resolution: {integrity: sha512-TAIN6GPFCahoIH3FHsHk5NM+iaBp5Snniqirk8mailjGGprswl14Z7lgGPzzKZiA5HBzWKW4Wpe1N8W2vSjJTw==} - engines: {node: ^12.16.0 || >=13.7.0} - - '@linaria/react@3.0.0-beta.22': - resolution: {integrity: sha512-14rnb/zkzhFhJM3hbBOzLLS0bu01mOg23Rv2nGQUt5CWd+HOhksmqzqBtC/ijeVlY2hRI0rJJcng9r07LGGAPA==} - engines: {node: ^12.16.0 || >=13.7.0} - peerDependencies: - react: '>=16' - - '@linaria/react@5.0.3': - resolution: {integrity: sha512-faTQHnUlrAz0Lodu+rr6Yx59rX0nqFOrZ5/IdlfQcTRz9VebyVL4vtA3AOecmn1YFZjMpqjopT0OzNz6GknQSg==} - engines: {node: '>=16.0.0'} - peerDependencies: - react: '>=16' - - '@linaria/shaker@3.0.0-beta.22': - resolution: {integrity: sha512-NOi71i/XfBJpBOT5eepRvv6B64IMdjsKwv+vxLW+IuFHx3wnqXgZsgimNK2qoXbpqy9xWsSEeB/4QA4m8GCUKQ==} - engines: {node: ^12.16.0 || >=13.7.0} - - '@linaria/shaker@3.0.0-beta.23': - resolution: {integrity: sha512-kG57X747GM/CqTs+wYx6hMHgzVNt7U/ydh7iO/NwUjIunr359oWwdH2Zjq27xR58TvK9sYXfmFVS8w3IB9fRWQ==} - engines: {node: ^12.16.0 || >=13.7.0} - - '@linaria/shaker@5.0.3': - resolution: {integrity: sha512-2a3pzYs09Iz88e+VG4OAQVRSIjxkbj7S4ju81ZTJVbZIWSR1kGsbX5OtJkRrh/AbKRrrUMW0DBS4PPgd0fks4A==} - engines: {node: '>=16.0.0'} - - '@linaria/tags@5.0.2': - resolution: {integrity: sha512-opcORl2sA6WkBjTNLHTgpet97dNKnwPRX/QGGZMykBsvGH3AsnEg/bT31cKBMBhL+YBGQsCdBmolxvCkWPOXQw==} - engines: {node: '>=16.0.0'} - - '@linaria/utils@3.0.0-beta.20': - resolution: {integrity: sha512-SKRC9dBApzu0kTksVtGZ7eJz1vMu7xew/JEAjQj6XTQDblzWpTPyKQHBOGXNkqXjIB8PwAqWfvKzKapzaOwQaQ==} - engines: {node: ^12.16.0 || >=13.7.0} - - '@linaria/utils@5.0.2': - resolution: {integrity: sha512-ZL8Yz4IIr9A8a5+o5LRnEpgdzIkyj4yKJrhw5Zv8wwvL+d/MHUK0q+l/KvxBmuYdcF+YYVHZ9eeBHTQBSL7r/w==} - engines: {node: '>=16.0.0'} - - '@linaria/webpack-loader@3.0.0-beta.22': - resolution: {integrity: sha512-oSChk+9MfcoF1M3Thx++aB1IjAaq7gS643i4995GSm1fs53i6QeUpCvIlWClDtRADmBzHSdMKIt0/vLoESvBoQ==} - engines: {node: ^12.16.0 || >=13.7.0} - - '@linaria/webpack4-loader@3.0.0-beta.23': - resolution: {integrity: sha512-I1pwrRKpGCARWbPwTFqOKLrkyxrZ+huYC3WH4pMllfoY+fv3O2dmDH6vKrZ582mQ5Uo/H3FmHBt8CLaMBv3pmg==} - engines: {node: ^12.16.0 || >=13.7.0} - peerDependencies: - webpack: '>=4.0.0 <5.0.0' - - '@linaria/webpack5-loader@3.0.0-beta.23': - resolution: {integrity: sha512-yIjhnDT1otwfx6JAA9HNfDzim7N93z9++8apzXE57GXg5wRO2hlajruatclpUDcMOsodS9p2+mMXd8GGR8CGCA==} - engines: {node: ^12.16.0 || >=13.7.0} - peerDependencies: - webpack: ^5.0.0 - - '@mapbox/node-pre-gyp@1.0.11': - resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==} - hasBin: true - - '@mdn/browser-compat-data@5.7.6': - resolution: {integrity: sha512-7xdrMX0Wk7grrTZQwAoy1GkvPMFoizStUoL+VmtUkAxegbCCec+3FKwOM6yc/uGU5+BEczQHXAlWiqvM8JeENg==} - - '@mdn/browser-compat-data@6.1.5': - resolution: {integrity: sha512-PzdZZzRhcXvKB0begee28n5lvwAcinGKYuLZOVxHAZm+n7y01ddEGfdS1ZXRuVcV+ndG6mSEAE8vgudom5UjYg==} - - '@mdn/browser-compat-data@7.3.9': - resolution: {integrity: sha512-ARxwDFfq4uhRSd9Wr1FMaxeKKIFDPyMnSoLe/8WX+nNXbKDILf1H8KDJW9nzu2QTR0hQ37jDCzAgyaNYdLzACQ==} - - '@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1': - resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==} - - '@nodelib/fs.scandir@2.1.5': - resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} - engines: {node: '>= 8'} + '@nodelib/fs.scandir@2.1.5': + resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} + engines: {node: '>= 8'} '@nodelib/fs.stat@2.0.5': resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==} @@ -4023,41 +3508,20 @@ packages: '@babel/core': ^7.0.0 webpack: '>=2' - babel-merge@3.0.0: - resolution: {integrity: sha512-eBOBtHnzt9xvnjpYNI5HmaPp/b2vMveE5XggzqHnQeHJ8mFIBrBv6WZEVIj5jJ2uwTItkqKo9gWzEEcBxEq0yw==} - deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. - peerDependencies: - '@babel/core': ^7.0.0 - babel-plugin-macros@3.1.0: resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==} engines: {node: '>=10', npm: '>=6'} - babel-plugin-polyfill-corejs2@0.3.3: - resolution: {integrity: sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==} - peerDependencies: - '@babel/core': ^7.0.0-0 - babel-plugin-polyfill-corejs2@0.4.6: resolution: {integrity: sha512-jhHiWVZIlnPbEUKSSNb9YoWcQGdlTLq7z1GHL4AjFxaoOUMuuEVJ+Y4pAaQUGOGk93YsVCKPbqbfw3m0SM6H8Q==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 - babel-plugin-polyfill-corejs3@0.6.0: - resolution: {integrity: sha512-+eHqR6OPcBhJOGgsIar7xoAB1GcSwVUA3XjAd7HJNzOXT4wv6/H7KIdA/Nc60cvUlDbKApmqNvD1B1bzOt4nyA==} - peerDependencies: - '@babel/core': ^7.0.0-0 - babel-plugin-polyfill-corejs3@0.8.6: resolution: {integrity: sha512-leDIc4l4tUgU7str5BWLS2h8q2N4Nf6lGZP6UrNDxdtfF2g69eJ5L0H7S8A5Ln/arfFAfHor5InAdZuIOwZdgQ==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 - babel-plugin-polyfill-regenerator@0.4.1: - resolution: {integrity: sha512-NtQGmyQDXjQqQ+IzRkBVwEOz9lQ4zxAQZgoAYEtU9dJjnl1Oc98qnN7jcp+bE7O7aYzVpavXE3/VKXNzUbh7aw==} - peerDependencies: - '@babel/core': ^7.0.0-0 - babel-plugin-polyfill-regenerator@0.5.3: resolution: {integrity: sha512-8sHeDOmXC8csczMrYEOf0UTNa4yE2SxV5JGeT/LP1n0OYVDUUFPxG9vdk2AlDlIit4t+Kf0xCtpgXPBwnn/9pw==} peerDependencies: @@ -4724,9 +4188,6 @@ packages: peerDependencies: webpack: ^4.37.0 || ^5.0.0 - core-js-compat@3.26.0: - resolution: {integrity: sha512-piOX9Go+Z4f9ZiBFLnZ5VrOpBl0h7IGCkiFUN11QTe6LjAvOT3ifL/5TdoizMh99hcGy5SoLyWbapIY/PIb/3A==} - core-js-compat@3.33.3: resolution: {integrity: sha512-cNzGqFsh3Ot+529GIXacjTJ7kegdt5fPXxCBVS1G0iaZpuo/tBz399ymceLJveQhFFZ8qThHiP3fzuoQjKN2ow==} @@ -4744,10 +4205,6 @@ packages: resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==} engines: {node: '>=10'} - cosmiconfig@8.1.3: - resolution: {integrity: sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==} - engines: {node: '>=14'} - create-ecdh@4.0.4: resolution: {integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==} @@ -4837,9 +4294,6 @@ packages: resolution: {integrity: sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==} engines: {node: '>= 6'} - css.escape@1.5.1: - resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} - css@2.2.4: resolution: {integrity: sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==} @@ -5031,10 +4485,6 @@ packages: resolution: {integrity: sha512-WJrecobaoqqgQHtvRI2/VCzWoWXPAnFYyAkF/spmL46lZMnd0gW0gLGuyeFVSrqt2B3s0oEEj6i+j2L/2QiS4g==} deprecated: No longer maintained. Use structuredClone instead. - deepmerge@2.2.1: - resolution: {integrity: sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==} - engines: {node: '>=0.10.0'} - deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} @@ -5311,10 +4761,6 @@ packages: resolution: {integrity: sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==} engines: {node: '>=6.9.0'} - enhanced-resolve@5.10.0: - resolution: {integrity: sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==} - engines: {node: '>=10.13.0'} - entities@2.2.0: resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} @@ -5398,10 +4844,6 @@ packages: es6-error@4.1.1: resolution: {integrity: sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==} - esbuild@0.12.29: - resolution: {integrity: sha512-w/XuoBCSwepyiZtIRsKsetiLDUVGPVw1E/R3VTFSecIy8UR7Cq3SOtwKHJMFoVqqVG36aGkzh4e8BvpO1Fdc7g==} - hasBin: true - esbuild@0.19.9: resolution: {integrity: sha512-U9CHtKSy+EpPsEBa+/A2gMs/h3ylBC0H0KSqIg7tpztHerLi6nrrcoUJAkNCEPumx8yJ+Byic4BVwHgRbN0TBg==} engines: {node: '>=12'} @@ -6229,9 +5671,6 @@ packages: handle-thing@2.0.1: resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==} - happy-dom@10.8.0: - resolution: {integrity: sha512-ux5UfhNA9ANGf4keV7FCd9GqeQr3Bz1u9qnoPtTL0NcO1MEOeUXIUwNTB9r84Z7Q8/bsgkwi6K114zjYvnCmag==} - har-schema@2.0.0: resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==} engines: {node: '>=4'} @@ -6361,9 +5800,6 @@ packages: hsla-regex@1.0.0: resolution: {integrity: sha512-7Wn5GMLuHBjZCb2bTmnDOycho0p/7UVaAeqXZGbHrBCl6Yd/xDhQJAXe6Ga9AXJH2I5zY1dEdYw2u1UptnSBJA==} - html-element-attributes@1.3.1: - resolution: {integrity: sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA==} - html-encoding-sniffer@1.0.2: resolution: {integrity: sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==} @@ -7628,10 +7064,6 @@ packages: resolution: {integrity: sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==} engines: {node: '>=16 || 14 >=14.17'} - minimatch@9.0.9: - resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==} - engines: {node: '>=16 || 14 >=14.17'} - minimist@1.2.7: resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==} @@ -7951,10 +7383,6 @@ packages: object.hasown@1.1.3: resolution: {integrity: sha512-fFI4VcYpRHvSLXxP7yiZOMAd331cPfd2p7PFDVbgUsYOfCT3tICVqXWngbjr4m49OvsBwUBQ6O2uQoJvy3RexA==} - object.omit@3.0.0: - resolution: {integrity: sha512-EO+BCv6LJfu+gBIF3ggLicFebFLN5zqzz/WWJlMFfkMyGth+oBkhxzDl0wx2W4GkLzuQs/FsSkXZb2IMWQqmBQ==} - engines: {node: '>=0.10.0'} - object.pick@1.3.0: resolution: {integrity: sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==} engines: {node: '>=0.10.0'} @@ -8941,9 +8369,6 @@ packages: peerDependencies: react: ^18.3.1 - react-html-attributes@1.4.6: - resolution: {integrity: sha512-uS3MmThNKFH2EZUQQw4k5pIcU7XIr208UE5dktrj/GOH1CMagqxDl4DCLpt3o2l9x+IB5nVYBeN3Cr4IutBXAg==} - react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -9781,9 +9206,6 @@ packages: peerDependencies: postcss: ^8.2.15 - stylis@3.5.4: - resolution: {integrity: sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==} - sucrase@3.35.0: resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} engines: {node: '>=16 || 14 >=14.17'} @@ -10031,10 +9453,6 @@ packages: ts-interface-checker@0.1.13: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} - ts-invariant@0.10.3: - resolution: {integrity: sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==} - engines: {node: '>=8'} - ts-node@10.9.1: resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==} hasBin: true @@ -10425,10 +9843,6 @@ packages: webidl-conversions@4.0.2: resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==} - webidl-conversions@7.0.0: - resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} - engines: {node: '>=12'} - webpack-bundle-analyzer@4.6.1: resolution: {integrity: sha512-oKz9Oz9j3rUciLNfpGFjOb49/jEpXNmWdVH8Ls//zNcnLlQdTGXQQMsBbb/gR7Zl8WNLxVCq+0Hqbx3zv6twBw==} engines: {node: '>= 10.13.0'} @@ -10508,11 +9922,6 @@ packages: resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==} deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation - whatwg-encoding@2.0.0: - resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==} - engines: {node: '>=12'} - deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation - whatwg-encoding@3.1.1: resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} engines: {node: '>=18'} @@ -10521,10 +9930,6 @@ packages: whatwg-mimetype@2.3.0: resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==} - whatwg-mimetype@3.0.0: - resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==} - engines: {node: '>=12'} - whatwg-mimetype@4.0.0: resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} engines: {node: '>=18'} @@ -10902,8 +10307,6 @@ snapshots: js-tokens: 4.0.0 picocolors: 1.1.1 - '@babel/compat-data@7.19.4': {} - '@babel/compat-data@7.21.7': {} '@babel/compat-data@7.23.5': {} @@ -10950,46 +10353,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/core@7.22.1': - dependencies: - '@ampproject/remapping': 2.2.0 - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.5 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.22.1) - '@babel/helpers': 7.23.5 - '@babel/parser': 7.23.5 - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.5 - '@babel/types': 7.23.5 - convert-source-map: 1.9.0 - debug: 4.4.3 - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - '@babel/core@7.23.5': - dependencies: - '@ampproject/remapping': 2.2.0 - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.5 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5) - '@babel/helpers': 7.23.5 - '@babel/parser': 7.23.5 - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.5 - '@babel/types': 7.23.5 - convert-source-map: 2.0.0 - debug: 4.4.3 - gensync: 1.0.0-beta.2 - json5: 2.2.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - '@babel/core@7.29.0': dependencies: '@babel/code-frame': 7.29.0 @@ -11018,6 +10381,14 @@ snapshots: eslint-visitor-keys: 2.1.0 semver: 6.3.1 + '@babel/eslint-parser@7.28.6(@babel/core@7.18.9)(eslint@10.3.0)': + dependencies: + '@babel/core': 7.18.9 + '@nicolo-ribaudo/eslint-scope-5-internals': 5.1.1-v1 + eslint: 10.3.0 + eslint-visitor-keys: 2.1.0 + semver: 6.3.1 + '@babel/generator@7.19.6': dependencies: '@babel/types': 7.22.4 @@ -11077,15 +10448,6 @@ snapshots: browserslist: 4.22.2 semver: 6.3.1 - '@babel/helper-compilation-targets@7.21.5(@babel/core@7.22.1)': - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.22.1 - '@babel/helper-validator-option': 7.23.5 - browserslist: 4.28.2 - lru-cache: 5.1.1 - semver: 6.3.0 - '@babel/helper-compilation-targets@7.22.15': dependencies: '@babel/compat-data': 7.23.5 @@ -11102,19 +10464,6 @@ snapshots: lru-cache: 5.1.1 semver: 6.3.1 - '@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-function-name': 7.23.0 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.13.16) - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - semver: 6.3.1 - '@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -11128,28 +10477,15 @@ snapshots: '@babel/helper-split-export-declaration': 7.22.6 semver: 6.3.1 - '@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-function-name': 7.23.0 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.22.1) - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - semver: 6.3.1 - - '@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.23.5)': + '@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.23.5 + '@babel/core': 7.29.0 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-function-name': 7.23.0 '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5) + '@babel/helper-replace-supers': 7.22.20(@babel/core@7.29.0) '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 semver: 6.3.1 @@ -11161,32 +10497,6 @@ snapshots: regexpu-core: 5.3.2 semver: 6.3.1 - '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-annotate-as-pure': 7.22.5 - regexpu-core: 5.3.2 - semver: 6.3.1 - - '@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-annotate-as-pure': 7.22.5 - regexpu-core: 5.3.2 - semver: 6.3.1 - - '@babel/helper-define-polyfill-provider@0.3.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-compilation-targets': 7.28.6 - '@babel/helper-plugin-utils': 7.21.5 - debug: 4.4.3 - lodash.debounce: 4.0.8 - resolve: 1.22.12 - semver: 6.3.0 - transitivePeerDependencies: - - supports-color - '@babel/helper-define-polyfill-provider@0.4.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -11198,17 +10508,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/helper-define-polyfill-provider@0.4.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-compilation-targets': 7.28.6 - '@babel/helper-plugin-utils': 7.22.5 - debug: 4.4.3 - lodash.debounce: 4.0.8 - resolve: 1.22.12 - transitivePeerDependencies: - - supports-color - '@babel/helper-environment-visitor@7.18.9': {} '@babel/helper-environment-visitor@7.22.20': {} @@ -11241,10 +10540,6 @@ snapshots: dependencies: '@babel/types': 7.19.4 - '@babel/helper-module-imports@7.21.4': - dependencies: - '@babel/types': 7.29.0 - '@babel/helper-module-imports@7.22.15': dependencies: '@babel/types': 7.23.5 @@ -11291,24 +10586,6 @@ snapshots: '@babel/helper-split-export-declaration': 7.22.6 '@babel/helper-validator-identifier': 7.22.20 - '@babel/helper-module-transforms@7.23.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-simple-access': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.20 - - '@babel/helper-module-transforms@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-simple-access': 7.22.5 - '@babel/helper-split-export-declaration': 7.22.6 - '@babel/helper-validator-identifier': 7.22.20 - '@babel/helper-module-transforms@7.28.6(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -11318,24 +10595,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/helper-module-transforms@7.28.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-module-imports': 7.28.6 - '@babel/helper-validator-identifier': 7.28.5 - '@babel/traverse': 7.29.0 - transitivePeerDependencies: - - supports-color - - '@babel/helper-module-transforms@7.28.6(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-module-imports': 7.28.6 - '@babel/helper-validator-identifier': 7.28.5 - '@babel/traverse': 7.29.0 - transitivePeerDependencies: - - supports-color - '@babel/helper-module-transforms@7.28.6(@babel/core@7.29.0)': dependencies: '@babel/core': 7.29.0 @@ -11364,27 +10623,6 @@ snapshots: '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-wrap-function': 7.22.20 - '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-wrap-function': 7.22.20 - - '@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-wrap-function': 7.22.20 - - '@babel/helper-replace-supers@7.22.20(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers@7.22.20(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -11392,16 +10630,9 @@ snapshots: '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers@7.22.20(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-member-expression-to-functions': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - - '@babel/helper-replace-supers@7.22.20(@babel/core@7.23.5)': + '@babel/helper-replace-supers@7.22.20(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.23.5 + '@babel/core': 7.29.0 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 @@ -11468,14 +10699,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/helpers@7.23.5': - dependencies: - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.5 - '@babel/types': 7.23.5 - transitivePeerDependencies: - - supports-color - '@babel/helpers@7.29.2': dependencies: '@babel/template': 7.28.6 @@ -11509,28 +10732,11 @@ snapshots: dependencies: '@babel/types': 7.29.0 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-proposal-optional-chaining': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -11538,52 +10744,18 @@ snapshots: '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.18.9) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-proposal-async-generator-functions@7.19.1(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.22.1) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.1) - '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-proposal-class-properties@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-proposal-class-static-block@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.1) - '@babel/plugin-proposal-decorators@7.19.6(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -11593,48 +10765,6 @@ snapshots: '@babel/helper-split-export-declaration': 7.22.6 '@babel/plugin-syntax-decorators': 7.19.0(@babel/core@7.18.9) - '@babel/plugin-proposal-dynamic-import@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.1) - - '@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.18.9) - - '@babel/plugin-proposal-export-namespace-from@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.1) - - '@babel/plugin-proposal-json-strings@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.1) - - '@babel/plugin-proposal-logical-assignment-operators@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.1) - - '@babel/plugin-proposal-nullish-coalescing-operator@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.1) - - '@babel/plugin-proposal-numeric-separator@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.1) - '@babel/plugin-proposal-object-rest-spread@7.19.4(@babel/core@7.18.9)': dependencies: '@babel/compat-data': 7.23.5 @@ -11644,101 +10774,25 @@ snapshots: '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.18.9) '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.18.9) - '@babel/plugin-proposal-object-rest-spread@7.19.4(@babel/core@7.22.1)': - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.22.1 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.22.1) - - '@babel/plugin-proposal-optional-catch-binding@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.1) - - '@babel/plugin-proposal-optional-chaining@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.1) - - '@babel/plugin-proposal-private-methods@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-proposal-private-property-in-object@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.1) - '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 - '@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - - '@babel/plugin-proposal-unicode-property-regex@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.28.6 - '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.28.6 - - '@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.28.6 - '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-decorators@7.19.0(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -11749,94 +10803,44 @@ snapshots: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-import-assertions@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-import-assertions@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-import-assertions@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-jsx@7.21.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.13.16)': + '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.13.16 + '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.28.6 - '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.18.9)': + '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.18.9 + '@babel/core': 7.29.0 '@babel/helper-plugin-utils': 7.28.6 '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.18.9)': @@ -11844,124 +10848,44 @@ snapshots: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.22.1)': + '@babel/plugin-syntax-typescript@7.20.0(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-syntax-typescript@7.20.0(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 + '@babel/core': 7.29.0 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-typescript@7.21.4(@babel/core@7.18.9)': @@ -11975,27 +10899,11 @@ snapshots: '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-arrow-functions@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-arrow-functions@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-arrow-functions@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-async-generator-functions@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12004,21 +10912,6 @@ snapshots: '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.18.9) '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.18.9) - '@babel/plugin-transform-async-generator-functions@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.5) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.5) - - '@babel/plugin-transform-async-to-generator@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.22.1) - '@babel/plugin-transform-async-to-generator@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12026,55 +10919,22 @@ snapshots: '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.18.9) - '@babel/plugin-transform-async-to-generator@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.5) - - '@babel/plugin-transform-block-scoped-functions@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-block-scoped-functions@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-block-scoped-functions@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-block-scoping@7.19.4(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-block-scoping@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-block-scoping@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-class-properties@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-class-properties@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-class-static-block@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12082,26 +10942,6 @@ snapshots: '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.18.9) - '@babel/plugin-transform-class-static-block@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.5) - - '@babel/plugin-transform-classes@7.19.0(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.22.1) - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-function-name': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.22.1) - '@babel/helper-split-export-declaration': 7.22.6 - globals: 11.12.0 - '@babel/plugin-transform-classes@7.23.5(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12115,154 +10955,51 @@ snapshots: '@babel/helper-split-export-declaration': 7.22.6 globals: 11.12.0 - '@babel/plugin-transform-classes@7.23.5(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-function-name': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5) - '@babel/helper-split-export-declaration': 7.22.6 - globals: 11.12.0 - - '@babel/plugin-transform-computed-properties@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-computed-properties@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/template': 7.28.6 - '@babel/plugin-transform-computed-properties@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/template': 7.28.6 - - '@babel/plugin-transform-destructuring@7.19.4(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-destructuring@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-destructuring@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-dotall-regex@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-dotall-regex@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-dotall-regex@7.23.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-dotall-regex@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-duplicate-keys@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-duplicate-keys@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-duplicate-keys@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-dynamic-import@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.18.9) - '@babel/plugin-transform-dynamic-import@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.5) - - '@babel/plugin-transform-exponentiation-operator@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-exponentiation-operator@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-exponentiation-operator@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-export-namespace-from@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.18.9) - '@babel/plugin-transform-export-namespace-from@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.5) - - '@babel/plugin-transform-for-of@7.18.8(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-for-of@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-for-of@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-function-name@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.22.1) - '@babel/helper-function-name': 7.23.0 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-function-name@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12270,75 +11007,28 @@ snapshots: '@babel/helper-function-name': 7.23.0 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-function-name@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-function-name': 7.23.0 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-json-strings@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.18.9) - '@babel/plugin-transform-json-strings@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.5) - - '@babel/plugin-transform-literals@7.18.9(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-literals@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-literals@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-logical-assignment-operators@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.18.9) - '@babel/plugin-transform-logical-assignment-operators@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.5) - - '@babel/plugin-transform-member-expression-literals@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-member-expression-literals@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-member-expression-literals@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-modules-amd@7.19.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-module-transforms': 7.28.6(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - transitivePeerDependencies: - - supports-color - '@babel/plugin-transform-modules-amd@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12347,28 +11037,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/plugin-transform-modules-amd@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-module-transforms': 7.28.6(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - transitivePeerDependencies: - - supports-color - - '@babel/plugin-transform-modules-commonjs@7.19.6(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.18.9) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-simple-access': 7.22.5 - - '@babel/plugin-transform-modules-commonjs@7.19.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-simple-access': 7.22.5 - '@babel/plugin-transform-modules-commonjs@7.21.5(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12383,30 +11051,6 @@ snapshots: '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-simple-access': 7.22.5 - '@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-simple-access': 7.22.5 - - '@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-simple-access': 7.22.5 - - '@babel/plugin-transform-modules-systemjs@7.19.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-module-transforms': 7.28.6(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-validator-identifier': 7.22.20 - transitivePeerDependencies: - - supports-color - '@babel/plugin-transform-modules-systemjs@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12417,24 +11061,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/plugin-transform-modules-systemjs@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-module-transforms': 7.28.6(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-identifier': 7.22.20 - transitivePeerDependencies: - - supports-color - - '@babel/plugin-transform-modules-umd@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-module-transforms': 7.28.6(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - transitivePeerDependencies: - - supports-color - '@babel/plugin-transform-modules-umd@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12443,71 +11069,29 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/plugin-transform-modules-umd@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-module-transforms': 7.28.6(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - transitivePeerDependencies: - - supports-color - - '@babel/plugin-transform-named-capturing-groups-regex@7.19.1(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-new-target@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-new-target@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-new-target@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-nullish-coalescing-operator@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.18.9) - '@babel/plugin-transform-nullish-coalescing-operator@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-transform-numeric-separator@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.18.9) - '@babel/plugin-transform-numeric-separator@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.5) - '@babel/plugin-transform-object-assign@7.18.6(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12522,45 +11106,18 @@ snapshots: '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.18.9) '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.18.9) - '@babel/plugin-transform-object-rest-spread@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.5 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.5) - - '@babel/plugin-transform-object-super@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.22.1) - '@babel/plugin-transform-object-super@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/helper-replace-supers': 7.22.20(@babel/core@7.18.9) - '@babel/plugin-transform-object-super@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.5) - '@babel/plugin-transform-optional-catch-binding@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.18.9) - '@babel/plugin-transform-optional-catch-binding@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-transform-optional-chaining@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12568,45 +11125,17 @@ snapshots: '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.18.9) - '@babel/plugin-transform-optional-chaining@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.5) - - '@babel/plugin-transform-parameters@7.18.8(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-parameters@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-parameters@7.23.3(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-parameters@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-private-methods@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-private-methods@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-private-property-in-object@7.23.4(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -12615,232 +11144,104 @@ snapshots: '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.18.9) - '@babel/plugin-transform-private-property-in-object@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.5) - - '@babel/plugin-transform-property-literals@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-property-literals@7.23.3(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.18.9 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-property-literals@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-react-display-name@7.18.6(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-react-display-name@7.18.6(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-react-jsx-development@7.18.6(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 - '@babel/plugin-transform-react-jsx': 7.22.3(@babel/core@7.13.16) - - '@babel/plugin-transform-react-jsx-development@7.18.6(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/plugin-transform-react-jsx': 7.22.3(@babel/core@7.18.9) - - '@babel/plugin-transform-react-jsx@7.22.3(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.13.16) - '@babel/types': 7.23.5 - - '@babel/plugin-transform-react-jsx@7.22.3(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.18.9) - '@babel/types': 7.23.5 - - '@babel/plugin-transform-react-pure-annotations@7.18.6(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-react-pure-annotations@7.18.6(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-regenerator@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - regenerator-transform: 0.15.2 - - '@babel/plugin-transform-regenerator@7.23.3(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-plugin-utils': 7.22.5 - regenerator-transform: 0.15.2 - - '@babel/plugin-transform-regenerator@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - regenerator-transform: 0.15.2 - - '@babel/plugin-transform-reserved-words@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - - '@babel/plugin-transform-reserved-words@7.23.3(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-reserved-words@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-runtime@7.19.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-module-imports': 7.21.4 - '@babel/helper-plugin-utils': 7.21.5 - babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.22.1) - babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.22.1) - babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.22.1) - semver: 6.3.0 - transitivePeerDependencies: - - supports-color - - '@babel/plugin-transform-runtime@7.23.4(@babel/core@7.18.9)': - dependencies: - '@babel/core': 7.18.9 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - babel-plugin-polyfill-corejs2: 0.4.6(@babel/core@7.18.9) - babel-plugin-polyfill-corejs3: 0.8.6(@babel/core@7.18.9) - babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.18.9) - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - '@babel/plugin-transform-runtime@7.23.4(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - babel-plugin-polyfill-corejs2: 0.4.6(@babel/core@7.23.5) - babel-plugin-polyfill-corejs3: 0.8.6(@babel/core@7.23.5) - babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.23.5) - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - '@babel/plugin-transform-shorthand-properties@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 + '@babel/core': 7.18.9 + '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-shorthand-properties@7.23.3(@babel/core@7.18.9)': + '@babel/plugin-transform-react-display-name@7.18.6(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-shorthand-properties@7.23.3(@babel/core@7.23.5)': + '@babel/plugin-transform-react-display-name@7.18.6(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.23.5 + '@babel/core': 7.29.0 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-spread@7.19.0(@babel/core@7.22.1)': + '@babel/plugin-transform-react-jsx-development@7.18.6(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 + '@babel/core': 7.18.9 + '@babel/plugin-transform-react-jsx': 7.22.3(@babel/core@7.18.9) - '@babel/plugin-transform-spread@7.23.3(@babel/core@7.18.9)': + '@babel/plugin-transform-react-jsx-development@7.18.6(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 + '@babel/plugin-transform-react-jsx': 7.22.3(@babel/core@7.29.0) + + '@babel/plugin-transform-react-jsx@7.22.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-module-imports': 7.22.15 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 + '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.18.9) + '@babel/types': 7.23.5 - '@babel/plugin-transform-spread@7.23.3(@babel/core@7.23.5)': + '@babel/plugin-transform-react-jsx@7.22.3(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.23.5 + '@babel/core': 7.29.0 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-module-imports': 7.22.15 '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 + '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.29.0) + '@babel/types': 7.23.5 - '@babel/plugin-transform-sticky-regex@7.18.6(@babel/core@7.22.1)': + '@babel/plugin-transform-react-pure-annotations@7.18.6(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 + '@babel/core': 7.18.9 + '@babel/helper-annotate-as-pure': 7.22.5 + '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-sticky-regex@7.23.3(@babel/core@7.18.9)': + '@babel/plugin-transform-react-pure-annotations@7.18.6(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.18.9 + '@babel/core': 7.29.0 + '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-sticky-regex@7.23.3(@babel/core@7.23.5)': + '@babel/plugin-transform-regenerator@7.23.3(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.23.5 + '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 + regenerator-transform: 0.15.2 - '@babel/plugin-transform-template-literals@7.18.9(@babel/core@7.22.1)': + '@babel/plugin-transform-reserved-words@7.23.3(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 + '@babel/core': 7.18.9 + '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-template-literals@7.23.3(@babel/core@7.18.9)': + '@babel/plugin-transform-shorthand-properties@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-template-literals@7.23.3(@babel/core@7.23.5)': + '@babel/plugin-transform-spread@7.23.3(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.23.5 + '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-typeof-symbol@7.18.9(@babel/core@7.22.1)': + '@babel/plugin-transform-sticky-regex@7.23.3(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 + '@babel/core': 7.18.9 + '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-typeof-symbol@7.23.3(@babel/core@7.18.9)': + '@babel/plugin-transform-template-literals@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-typeof-symbol@7.23.3(@babel/core@7.23.5)': + '@babel/plugin-transform-typeof-symbol@7.23.3(@babel/core@7.18.9)': dependencies: - '@babel/core': 7.23.5 + '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-typescript@7.20.13(@babel/core@7.13.16)': + '@babel/plugin-transform-typescript@7.20.13(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.13.16 - '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.13.16) + '@babel/core': 7.29.0 + '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.29.0) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-typescript': 7.20.0(@babel/core@7.13.16) + '@babel/plugin-syntax-typescript': 7.20.0(@babel/core@7.29.0) '@babel/plugin-transform-typescript@7.22.3(@babel/core@7.18.9)': dependencies: @@ -12850,144 +11251,29 @@ snapshots: '@babel/helper-plugin-utils': 7.22.5 '@babel/plugin-syntax-typescript': 7.21.4(@babel/core@7.18.9) - '@babel/plugin-transform-unicode-escapes@7.18.10(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-unicode-escapes@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-unicode-escapes@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-unicode-property-regex@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-unicode-property-regex@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/plugin-transform-unicode-regex@7.18.6(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-transform-unicode-regex@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-unicode-regex@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-unicode-sets-regex@7.23.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.18.9) '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-transform-unicode-sets-regex@7.23.3(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.5) - '@babel/helper-plugin-utils': 7.22.5 - - '@babel/preset-env@7.19.4(@babel/core@7.22.1)': - dependencies: - '@babel/compat-data': 7.19.4 - '@babel/core': 7.22.1 - '@babel/helper-compilation-targets': 7.21.5(@babel/core@7.22.1) - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-validator-option': 7.21.0 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-proposal-async-generator-functions': 7.19.1(@babel/core@7.22.1) - '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-class-static-block': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-dynamic-import': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-proposal-json-strings': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-logical-assignment-operators': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-proposal-nullish-coalescing-operator': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-numeric-separator': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-object-rest-spread': 7.19.4(@babel/core@7.22.1) - '@babel/plugin-proposal-optional-catch-binding': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-optional-chaining': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-proposal-private-methods': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-private-property-in-object': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.22.1) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.22.1) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.22.1) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-syntax-import-assertions': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.22.1) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.22.1) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.22.1) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.22.1) - '@babel/plugin-transform-arrow-functions': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-async-to-generator': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-block-scoped-functions': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-block-scoping': 7.19.4(@babel/core@7.22.1) - '@babel/plugin-transform-classes': 7.19.0(@babel/core@7.22.1) - '@babel/plugin-transform-computed-properties': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-transform-destructuring': 7.19.4(@babel/core@7.22.1) - '@babel/plugin-transform-dotall-regex': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-duplicate-keys': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-transform-exponentiation-operator': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-for-of': 7.18.8(@babel/core@7.22.1) - '@babel/plugin-transform-function-name': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-transform-literals': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-transform-member-expression-literals': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-modules-amd': 7.19.6(@babel/core@7.22.1) - '@babel/plugin-transform-modules-commonjs': 7.19.6(@babel/core@7.22.1) - '@babel/plugin-transform-modules-systemjs': 7.19.6(@babel/core@7.22.1) - '@babel/plugin-transform-modules-umd': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-named-capturing-groups-regex': 7.19.1(@babel/core@7.22.1) - '@babel/plugin-transform-new-target': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-object-super': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-parameters': 7.18.8(@babel/core@7.22.1) - '@babel/plugin-transform-property-literals': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-regenerator': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-reserved-words': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-shorthand-properties': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-spread': 7.19.0(@babel/core@7.22.1) - '@babel/plugin-transform-sticky-regex': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-template-literals': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-transform-typeof-symbol': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-transform-unicode-escapes': 7.18.10(@babel/core@7.22.1) - '@babel/plugin-transform-unicode-regex': 7.18.6(@babel/core@7.22.1) - '@babel/preset-modules': 0.1.5(@babel/core@7.22.1) - '@babel/types': 7.22.4 - babel-plugin-polyfill-corejs2: 0.3.3(@babel/core@7.22.1) - babel-plugin-polyfill-corejs3: 0.6.0(@babel/core@7.22.1) - babel-plugin-polyfill-regenerator: 0.4.1(@babel/core@7.22.1) - core-js-compat: 3.26.0 - semver: 6.3.0 - transitivePeerDependencies: - - supports-color - '@babel/preset-env@7.23.5(@babel/core@7.18.9)': dependencies: '@babel/compat-data': 7.23.5 @@ -13074,101 +11360,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@babel/preset-env@7.23.5(@babel/core@7.23.5)': - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.5 - '@babel/helper-compilation-targets': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.5) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.5) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.5) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.5) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-syntax-import-assertions': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-syntax-import-attributes': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.5) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.5) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.5) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.5) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.5) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.5) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.23.5) - '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-async-generator-functions': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-block-scoped-functions': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-class-properties': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-class-static-block': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-classes': 7.23.5(@babel/core@7.23.5) - '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-destructuring': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-dotall-regex': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-duplicate-keys': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-dynamic-import': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-exponentiation-operator': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-export-namespace-from': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-for-of': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-json-strings': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-logical-assignment-operators': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-member-expression-literals': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-modules-amd': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-modules-systemjs': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-modules-umd': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.5) - '@babel/plugin-transform-new-target': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-numeric-separator': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-object-rest-spread': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-object-super': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-optional-catch-binding': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-property-literals': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-regenerator': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-reserved-words': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-typeof-symbol': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-unicode-escapes': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-unicode-property-regex': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-unicode-sets-regex': 7.23.3(@babel/core@7.23.5) - '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.23.5) - babel-plugin-polyfill-corejs2: 0.4.6(@babel/core@7.23.5) - babel-plugin-polyfill-corejs3: 0.8.6(@babel/core@7.23.5) - babel-plugin-polyfill-regenerator: 0.5.3(@babel/core@7.23.5) - core-js-compat: 3.33.3 - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - '@babel/preset-modules@0.1.5(@babel/core@7.22.1)': - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/plugin-proposal-unicode-property-regex': 7.18.6(@babel/core@7.22.1) - '@babel/plugin-transform-dotall-regex': 7.23.3(@babel/core@7.22.1) - '@babel/types': 7.22.4 - esutils: 2.0.3 - '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -13176,23 +11367,6 @@ snapshots: '@babel/types': 7.29.0 esutils: 2.0.3 - '@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.23.5)': - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/types': 7.29.0 - esutils: 2.0.3 - - '@babel/preset-react@7.22.3(@babel/core@7.13.16)': - dependencies: - '@babel/core': 7.13.16 - '@babel/helper-plugin-utils': 7.21.5 - '@babel/helper-validator-option': 7.21.0 - '@babel/plugin-transform-react-display-name': 7.18.6(@babel/core@7.13.16) - '@babel/plugin-transform-react-jsx': 7.22.3(@babel/core@7.13.16) - '@babel/plugin-transform-react-jsx-development': 7.18.6(@babel/core@7.13.16) - '@babel/plugin-transform-react-pure-annotations': 7.18.6(@babel/core@7.13.16) - '@babel/preset-react@7.22.3(@babel/core@7.18.9)': dependencies: '@babel/core': 7.18.9 @@ -13203,12 +11377,22 @@ snapshots: '@babel/plugin-transform-react-jsx-development': 7.18.6(@babel/core@7.18.9) '@babel/plugin-transform-react-pure-annotations': 7.18.6(@babel/core@7.18.9) - '@babel/preset-typescript@7.18.6(@babel/core@7.13.16)': + '@babel/preset-react@7.22.3(@babel/core@7.29.0)': dependencies: - '@babel/core': 7.13.16 + '@babel/core': 7.29.0 + '@babel/helper-plugin-utils': 7.21.5 + '@babel/helper-validator-option': 7.21.0 + '@babel/plugin-transform-react-display-name': 7.18.6(@babel/core@7.29.0) + '@babel/plugin-transform-react-jsx': 7.22.3(@babel/core@7.29.0) + '@babel/plugin-transform-react-jsx-development': 7.18.6(@babel/core@7.29.0) + '@babel/plugin-transform-react-pure-annotations': 7.18.6(@babel/core@7.29.0) + + '@babel/preset-typescript@7.18.6(@babel/core@7.29.0)': + dependencies: + '@babel/core': 7.29.0 '@babel/helper-plugin-utils': 7.19.0 '@babel/helper-validator-option': 7.18.6 - '@babel/plugin-transform-typescript': 7.20.13(@babel/core@7.13.16) + '@babel/plugin-transform-typescript': 7.20.13(@babel/core@7.29.0) '@babel/preset-typescript@7.21.5(@babel/core@7.18.9)': dependencies: @@ -13371,18 +11555,6 @@ snapshots: transitivePeerDependencies: - supports-color - '@emotion/is-prop-valid@0.8.8': - dependencies: - '@emotion/memoize': 0.7.4 - - '@emotion/is-prop-valid@1.2.1': - dependencies: - '@emotion/memoize': 0.8.1 - - '@emotion/memoize@0.7.4': {} - - '@emotion/memoize@0.8.1': {} - '@esbuild/android-arm64@0.19.9': optional: true @@ -13459,14 +11631,19 @@ snapshots: eslint: 10.3.0(jiti@1.21.7) eslint-visitor-keys: 3.4.3 + '@eslint-community/eslint-utils@4.9.1(eslint@10.3.0)': + dependencies: + eslint: 10.3.0 + eslint-visitor-keys: 3.4.3 + '@eslint-community/eslint-utils@4.9.1(eslint@8.56.0)': dependencies: eslint: 8.56.0 eslint-visitor-keys: 3.4.3 - '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4(jiti@1.21.7))': + '@eslint-community/eslint-utils@4.9.1(eslint@9.39.4)': dependencies: - eslint: 9.39.4(jiti@1.21.7) + eslint: 9.39.4 eslint-visitor-keys: 3.4.3 '@eslint-community/regexpp@4.10.0': {} @@ -13697,260 +11874,28 @@ snapshots: '@jridgewell/sourcemap-codec': 1.4.15 '@jridgewell/trace-mapping@0.3.20': - dependencies: - '@jridgewell/resolve-uri': 3.1.1 - '@jridgewell/sourcemap-codec': 1.4.15 - - '@jridgewell/trace-mapping@0.3.25': - dependencies: - '@jridgewell/resolve-uri': 3.1.2 - '@jridgewell/sourcemap-codec': 1.4.15 - - '@jridgewell/trace-mapping@0.3.31': - dependencies: - '@jridgewell/resolve-uri': 3.1.2 - '@jridgewell/sourcemap-codec': 1.5.5 - - '@jridgewell/trace-mapping@0.3.9': - dependencies: - '@jridgewell/resolve-uri': 3.1.1 - '@jridgewell/sourcemap-codec': 1.4.15 - - '@kurkle/color@0.3.4': {} - - '@leichtgewicht/ip-codec@2.0.4': {} - - '@linaria/babel-preset@3.0.0-beta.22': - dependencies: - '@babel/core': 7.18.9 - '@babel/generator': 7.21.5 - '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.18.9) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.18.9) - '@babel/plugin-transform-modules-commonjs': 7.19.6(@babel/core@7.18.9) - '@babel/template': 7.20.7 - '@babel/traverse': 7.21.5 - '@linaria/core': 3.0.0-beta.22 - '@linaria/logger': 3.0.0-beta.20 - '@linaria/utils': 3.0.0-beta.20 - cosmiconfig: 5.2.1 - find-up: 5.0.0 - source-map: 0.7.4 - stylis: 3.5.4 - transitivePeerDependencies: - - supports-color - - '@linaria/babel-preset@3.0.0-beta.23': - dependencies: - '@babel/core': 7.22.1 - '@babel/generator': 7.23.5 - '@babel/plugin-proposal-export-namespace-from': 7.18.9(@babel/core@7.22.1) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.22.1) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.22.1) - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.5 - '@linaria/core': 3.0.0-beta.22 - '@linaria/logger': 3.0.0-beta.20 - '@linaria/utils': 3.0.0-beta.20 - cosmiconfig: 5.2.1 - find-up: 5.0.0 - source-map: 0.7.4 - stylis: 3.5.4 - transitivePeerDependencies: - - supports-color - - '@linaria/babel-preset@5.0.4': - dependencies: - '@babel/core': 7.23.5 - '@babel/generator': 7.23.5 - '@babel/helper-module-imports': 7.22.15 - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.5 - '@babel/types': 7.23.5 - '@linaria/core': 5.0.2 - '@linaria/logger': 5.0.0 - '@linaria/shaker': 5.0.3 - '@linaria/tags': 5.0.2 - '@linaria/utils': 5.0.2 - cosmiconfig: 8.1.3 - happy-dom: 10.8.0 - source-map: 0.7.4 - stylis: 3.5.4 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - '@linaria/core@3.0.0-beta.22': - dependencies: - '@linaria/logger': 3.0.0-beta.20 - '@linaria/utils': 3.0.0-beta.20 - transitivePeerDependencies: - - supports-color - - '@linaria/core@5.0.2': - dependencies: - '@linaria/logger': 5.0.0 - '@linaria/tags': 5.0.2 - '@linaria/utils': 5.0.2 - transitivePeerDependencies: - - supports-color - - '@linaria/esbuild@3.0.0-beta.23': - dependencies: - '@babel/core': 7.22.1 - '@linaria/babel-preset': 3.0.0-beta.23 - esbuild: 0.12.29 - transitivePeerDependencies: - - supports-color - - '@linaria/esbuild@5.0.4(esbuild@0.19.9)': - dependencies: - '@babel/core': 7.23.5 - '@linaria/babel-preset': 5.0.4 - '@linaria/utils': 5.0.2 - esbuild: 0.19.9 - transitivePeerDependencies: - - supports-color - - '@linaria/logger@3.0.0-beta.20': - dependencies: - debug: 4.4.3 - picocolors: 1.0.0 - transitivePeerDependencies: - - supports-color - - '@linaria/logger@5.0.0': - dependencies: - debug: 4.4.3 - picocolors: 1.1.1 - transitivePeerDependencies: - - supports-color - - '@linaria/preeval@3.0.0-beta.23': - dependencies: - '@linaria/babel-preset': 3.0.0-beta.23 - transitivePeerDependencies: - - supports-color - - '@linaria/react@3.0.0-beta.22(react@18.3.1)': - dependencies: - '@emotion/is-prop-valid': 0.8.8 - '@linaria/core': 3.0.0-beta.22 - react: 18.3.1 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - '@linaria/react@5.0.3(react@18.3.1)': - dependencies: - '@emotion/is-prop-valid': 1.2.1 - '@linaria/core': 5.0.2 - '@linaria/tags': 5.0.2 - '@linaria/utils': 5.0.2 - minimatch: 9.0.3 - react: 18.3.1 - react-html-attributes: 1.4.6 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - '@linaria/shaker@3.0.0-beta.22': - dependencies: - '@babel/core': 7.18.9 - '@babel/generator': 7.23.5 - '@babel/plugin-transform-runtime': 7.23.4(@babel/core@7.18.9) - '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.18.9) - '@babel/preset-env': 7.23.5(@babel/core@7.18.9) - '@linaria/babel-preset': 3.0.0-beta.22 - '@linaria/logger': 3.0.0-beta.20 - '@linaria/preeval': 3.0.0-beta.23 - babel-plugin-transform-react-remove-prop-types: 0.4.24 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - '@linaria/shaker@3.0.0-beta.23': - dependencies: - '@babel/core': 7.22.1 - '@babel/generator': 7.19.6 - '@babel/plugin-transform-runtime': 7.19.6(@babel/core@7.22.1) - '@babel/plugin-transform-template-literals': 7.18.9(@babel/core@7.22.1) - '@babel/preset-env': 7.19.4(@babel/core@7.22.1) - '@linaria/babel-preset': 3.0.0-beta.23 - '@linaria/logger': 3.0.0-beta.20 - '@linaria/preeval': 3.0.0-beta.23 - babel-plugin-transform-react-remove-prop-types: 0.4.24 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - '@linaria/shaker@5.0.3': - dependencies: - '@babel/core': 7.23.5 - '@babel/generator': 7.23.5 - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.5) - '@babel/plugin-transform-runtime': 7.23.4(@babel/core@7.23.5) - '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.23.5) - '@babel/preset-env': 7.23.5(@babel/core@7.23.5) - '@linaria/logger': 5.0.0 - '@linaria/utils': 5.0.2 - babel-plugin-transform-react-remove-prop-types: 0.4.24 - ts-invariant: 0.10.3 - transitivePeerDependencies: - - supports-color - - '@linaria/tags@5.0.2': - dependencies: - '@babel/generator': 7.23.5 - '@linaria/logger': 5.0.0 - '@linaria/utils': 5.0.2 - transitivePeerDependencies: - - supports-color - - '@linaria/utils@3.0.0-beta.20': {} - - '@linaria/utils@5.0.2': - dependencies: - '@babel/core': 7.23.5 - '@babel/generator': 7.23.5 - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.5) - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.5 - '@babel/types': 7.23.5 - '@linaria/logger': 5.0.0 - babel-merge: 3.0.0(@babel/core@7.23.5) - find-up: 5.0.0 - minimatch: 9.0.9 - transitivePeerDependencies: - - supports-color + dependencies: + '@jridgewell/resolve-uri': 3.1.1 + '@jridgewell/sourcemap-codec': 1.4.15 - '@linaria/webpack-loader@3.0.0-beta.22(webpack@4.46.0)': + '@jridgewell/trace-mapping@0.3.25': dependencies: - '@linaria/webpack4-loader': 3.0.0-beta.23(webpack@4.46.0) - '@linaria/webpack5-loader': 3.0.0-beta.23(webpack@4.46.0) - transitivePeerDependencies: - - supports-color - - webpack + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.4.15 - '@linaria/webpack4-loader@3.0.0-beta.23(webpack@4.46.0)': + '@jridgewell/trace-mapping@0.3.31': dependencies: - '@linaria/babel-preset': 3.0.0-beta.23 - '@linaria/logger': 3.0.0-beta.20 - enhanced-resolve: 4.5.0 - loader-utils: 1.4.2 - mkdirp: 0.5.6 - webpack: 4.46.0 - transitivePeerDependencies: - - supports-color + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.5.5 - '@linaria/webpack5-loader@3.0.0-beta.23(webpack@4.46.0)': + '@jridgewell/trace-mapping@0.3.9': dependencies: - '@linaria/babel-preset': 3.0.0-beta.23 - '@linaria/logger': 3.0.0-beta.20 - enhanced-resolve: 5.10.0 - mkdirp: 0.5.6 - webpack: 4.46.0 - transitivePeerDependencies: - - supports-color + '@jridgewell/resolve-uri': 3.1.1 + '@jridgewell/sourcemap-codec': 1.4.15 + + '@kurkle/color@0.3.4': {} + + '@leichtgewicht/ip-codec@2.0.4': {} '@mapbox/node-pre-gyp@1.0.11(encoding@0.1.13)': dependencies: @@ -14354,6 +12299,22 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.7.3))(eslint@10.3.0)(typescript@5.7.3)': + dependencies: + '@eslint-community/regexpp': 4.12.2 + '@typescript-eslint/parser': 8.59.3(eslint@10.3.0)(typescript@5.7.3) + '@typescript-eslint/scope-manager': 8.59.3 + '@typescript-eslint/type-utils': 8.59.3(eslint@10.3.0)(typescript@5.7.3) + '@typescript-eslint/utils': 8.59.3(eslint@10.3.0)(typescript@5.7.3) + '@typescript-eslint/visitor-keys': 8.59.3 + eslint: 10.3.0 + ignore: 7.0.5 + natural-compare: 1.4.0 + ts-api-utils: 2.5.0(typescript@5.7.3) + typescript: 5.7.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/parser@5.41.0(eslint@8.26.0)(typescript@5.7.3)': dependencies: '@typescript-eslint/scope-manager': 5.41.0 @@ -14391,6 +12352,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.7.3)': + dependencies: + '@typescript-eslint/scope-manager': 8.59.3 + '@typescript-eslint/types': 8.59.3 + '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.7.3) + '@typescript-eslint/visitor-keys': 8.59.3 + debug: 4.4.3 + eslint: 10.3.0 + typescript: 5.7.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/project-service@8.59.3(typescript@5.7.3)': dependencies: '@typescript-eslint/tsconfig-utils': 8.59.3(typescript@5.7.3) @@ -14455,6 +12428,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/type-utils@8.59.3(eslint@10.3.0)(typescript@5.7.3)': + dependencies: + '@typescript-eslint/types': 8.59.3 + '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.7.3) + '@typescript-eslint/utils': 8.59.3(eslint@10.3.0)(typescript@5.7.3) + debug: 4.4.3 + eslint: 10.3.0 + ts-api-utils: 2.5.0(typescript@5.7.3) + typescript: 5.7.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/types@5.41.0': {} '@typescript-eslint/types@6.19.0': {} @@ -14545,6 +12530,17 @@ snapshots: transitivePeerDependencies: - supports-color + '@typescript-eslint/utils@8.59.3(eslint@10.3.0)(typescript@5.7.3)': + dependencies: + '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0) + '@typescript-eslint/scope-manager': 8.59.3 + '@typescript-eslint/types': 8.59.3 + '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.7.3) + eslint: 10.3.0 + typescript: 5.7.3 + transitivePeerDependencies: + - supports-color + '@typescript-eslint/visitor-keys@5.41.0': dependencies: '@typescript-eslint/types': 5.41.0 @@ -14716,7 +12712,7 @@ snapshots: acorn@8.8.1: {} - addons-linter@10.3.0(jiti@1.21.7): + addons-linter@10.3.0: dependencies: '@fluent/syntax': 0.19.0 '@fregante/relaxed-json': 2.0.0 @@ -14729,8 +12725,8 @@ snapshots: columnify: 1.6.0 common-tags: 1.8.2 deepmerge: 4.3.1 - eslint: 9.39.4(jiti@1.21.7) - eslint-plugin-no-unsanitized: 4.1.5(eslint@9.39.4(jiti@1.21.7)) + eslint: 9.39.4 + eslint-plugin-no-unsanitized: 4.1.5(eslint@9.39.4) eslint-visitor-keys: 5.0.1 espree: 11.2.0 esprima: 4.0.1 @@ -15204,27 +13200,12 @@ snapshots: schema-utils: 2.7.1 webpack: 4.46.0 - babel-merge@3.0.0(@babel/core@7.23.5): - dependencies: - '@babel/core': 7.23.5 - deepmerge: 2.2.1 - object.omit: 3.0.0 - babel-plugin-macros@3.1.0: dependencies: '@babel/runtime': 7.23.6 cosmiconfig: 7.0.1 resolve: 1.22.8 - babel-plugin-polyfill-corejs2@0.3.3(@babel/core@7.22.1): - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.22.1 - '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.22.1) - semver: 6.3.0 - transitivePeerDependencies: - - supports-color - babel-plugin-polyfill-corejs2@0.4.6(@babel/core@7.18.9): dependencies: '@babel/compat-data': 7.23.5 @@ -15234,23 +13215,6 @@ snapshots: transitivePeerDependencies: - supports-color - babel-plugin-polyfill-corejs2@0.4.6(@babel/core@7.23.5): - dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.5 - '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.5) - semver: 6.3.1 - transitivePeerDependencies: - - supports-color - - babel-plugin-polyfill-corejs3@0.6.0(@babel/core@7.22.1): - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.22.1) - core-js-compat: 3.33.3 - transitivePeerDependencies: - - supports-color - babel-plugin-polyfill-corejs3@0.8.6(@babel/core@7.18.9): dependencies: '@babel/core': 7.18.9 @@ -15259,21 +13223,6 @@ snapshots: transitivePeerDependencies: - supports-color - babel-plugin-polyfill-corejs3@0.8.6(@babel/core@7.23.5): - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.5) - core-js-compat: 3.33.3 - transitivePeerDependencies: - - supports-color - - babel-plugin-polyfill-regenerator@0.4.1(@babel/core@7.22.1): - dependencies: - '@babel/core': 7.22.1 - '@babel/helper-define-polyfill-provider': 0.3.3(@babel/core@7.22.1) - transitivePeerDependencies: - - supports-color - babel-plugin-polyfill-regenerator@0.5.3(@babel/core@7.18.9): dependencies: '@babel/core': 7.18.9 @@ -15281,13 +13230,6 @@ snapshots: transitivePeerDependencies: - supports-color - babel-plugin-polyfill-regenerator@0.5.3(@babel/core@7.23.5): - dependencies: - '@babel/core': 7.23.5 - '@babel/helper-define-polyfill-provider': 0.4.3(@babel/core@7.23.5) - transitivePeerDependencies: - - supports-color - babel-plugin-transform-react-remove-prop-types@0.4.24: {} balanced-match@1.0.2: {} @@ -16145,10 +14087,6 @@ snapshots: transitivePeerDependencies: - bluebird - core-js-compat@3.26.0: - dependencies: - browserslist: 4.28.2 - core-js-compat@3.33.3: dependencies: browserslist: 4.28.2 @@ -16172,13 +14110,6 @@ snapshots: path-type: 4.0.0 yaml: 1.10.2 - cosmiconfig@8.1.3: - dependencies: - import-fresh: 3.3.0 - js-yaml: 4.1.0 - parse-json: 5.2.0 - path-type: 4.0.0 - create-ecdh@4.0.4: dependencies: bn.js: 4.12.0 @@ -16322,8 +14253,6 @@ snapshots: css-what@6.1.0: {} - css.escape@1.5.1: {} - css@2.2.4: dependencies: inherits: 2.0.4 @@ -16533,8 +14462,6 @@ snapshots: dependencies: type-detect: 4.0.8 - deepmerge@2.2.1: {} - deepmerge@4.3.1: {} default-browser-id@5.0.1: {} @@ -16809,11 +14736,6 @@ snapshots: memory-fs: 0.5.0 tapable: 1.1.3 - enhanced-resolve@5.10.0: - dependencies: - graceful-fs: 4.2.11 - tapable: 2.2.1 - entities@2.2.0: {} entities@4.5.0: {} @@ -17012,8 +14934,6 @@ snapshots: es6-error@4.1.1: {} - esbuild@0.12.29: {} - esbuild@0.19.9: optionalDependencies: '@esbuild/android-arm': 0.19.9 @@ -17098,6 +15018,21 @@ snapshots: transitivePeerDependencies: - supports-color + eslint-config-preact@2.0.0(eslint@10.3.0): + dependencies: + '@babel/core': 7.18.9 + '@babel/eslint-parser': 7.28.6(@babel/core@7.18.9)(eslint@10.3.0) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.18.9) + '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.18.9) + '@eslint/js': 9.39.4 + eslint: 10.3.0 + eslint-plugin-compat: 6.2.1(eslint@10.3.0) + eslint-plugin-react: 7.37.5(eslint@10.3.0) + eslint-plugin-react-hooks: 5.2.0(eslint@10.3.0) + globals: 16.5.0 + transitivePeerDependencies: + - supports-color + eslint-config-prettier@9.1.0(eslint@8.56.0): dependencies: eslint: 8.56.0 @@ -17131,10 +15066,25 @@ snapshots: lodash.memoize: 4.1.2 semver: 7.8.0 + eslint-plugin-compat@6.2.1(eslint@10.3.0): + dependencies: + '@mdn/browser-compat-data': 6.1.5 + ast-metadata-inferer: 0.8.1 + browserslist: 4.28.2 + eslint: 10.3.0 + find-up: 5.0.0 + globals: 15.15.0 + lodash.memoize: 4.1.2 + semver: 7.8.0 + eslint-plugin-header@3.1.1(eslint@10.3.0(jiti@1.21.7)): dependencies: eslint: 10.3.0(jiti@1.21.7) + eslint-plugin-header@3.1.1(eslint@10.3.0): + dependencies: + eslint: 10.3.0 + eslint-plugin-import@2.29.1(@typescript-eslint/parser@5.41.0(eslint@8.26.0)(typescript@5.7.3))(eslint@8.26.0): dependencies: array-includes: 3.1.7 @@ -17182,9 +15132,9 @@ snapshots: object.entries: 1.1.7 object.fromentries: 2.0.7 - eslint-plugin-no-unsanitized@4.1.5(eslint@9.39.4(jiti@1.21.7)): + eslint-plugin-no-unsanitized@4.1.5(eslint@9.39.4): dependencies: - eslint: 9.39.4(jiti@1.21.7) + eslint: 9.39.4 eslint-plugin-react-hooks@4.6.0(eslint@8.26.0): dependencies: @@ -17194,6 +15144,10 @@ snapshots: dependencies: eslint: 10.3.0(jiti@1.21.7) + eslint-plugin-react-hooks@5.2.0(eslint@10.3.0): + dependencies: + eslint: 10.3.0 + eslint-plugin-react@7.33.2(eslint@8.26.0): dependencies: array-includes: 3.1.7 @@ -17256,6 +15210,28 @@ snapshots: string.prototype.matchall: 4.0.12 string.prototype.repeat: 1.0.0 + eslint-plugin-react@7.37.5(eslint@10.3.0): + dependencies: + array-includes: 3.1.9 + array.prototype.findlast: 1.2.5 + array.prototype.flatmap: 1.3.3 + array.prototype.tosorted: 1.1.4 + doctrine: 2.1.0 + es-iterator-helpers: 1.3.2 + eslint: 10.3.0 + estraverse: 5.3.0 + hasown: 2.0.3 + jsx-ast-utils: 3.3.5 + minimatch: 3.1.5 + object.entries: 1.1.9 + object.fromentries: 2.0.8 + object.values: 1.2.1 + prop-types: 15.8.1 + resolve: 2.0.0-next.6 + semver: 6.3.1 + string.prototype.matchall: 4.0.12 + string.prototype.repeat: 1.0.0 + eslint-scope@4.0.3: dependencies: esrecurse: 4.3.0 @@ -17303,6 +15279,41 @@ snapshots: eslint-visitor-keys@5.0.1: {} + eslint@10.3.0: + dependencies: + '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0) + '@eslint-community/regexpp': 4.12.2 + '@eslint/config-array': 0.23.5 + '@eslint/config-helpers': 0.5.5 + '@eslint/core': 1.2.1 + '@eslint/plugin-kit': 0.7.1 + '@humanfs/node': 0.16.8 + '@humanwhocodes/module-importer': 1.0.1 + '@humanwhocodes/retry': 0.4.3 + '@types/estree': 1.0.9 + ajv: 6.15.0 + cross-spawn: 7.0.6 + debug: 4.4.3 + escape-string-regexp: 4.0.0 + eslint-scope: 9.1.2 + eslint-visitor-keys: 5.0.1 + espree: 11.2.0 + esquery: 1.7.0 + esutils: 2.0.3 + fast-deep-equal: 3.1.3 + file-entry-cache: 8.0.0 + find-up: 5.0.0 + glob-parent: 6.0.2 + ignore: 5.3.2 + imurmurhash: 0.1.4 + is-glob: 4.0.3 + json-stable-stringify-without-jsonify: 1.0.1 + minimatch: 10.2.5 + natural-compare: 1.4.0 + optionator: 0.9.4 + transitivePeerDependencies: + - supports-color + eslint@10.3.0(jiti@1.21.7): dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0(jiti@1.21.7)) @@ -17427,9 +15438,9 @@ snapshots: transitivePeerDependencies: - supports-color - eslint@9.39.4(jiti@1.21.7): + eslint@9.39.4: dependencies: - '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4(jiti@1.21.7)) + '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.4) '@eslint-community/regexpp': 4.12.2 '@eslint/config-array': 0.21.2 '@eslint/config-helpers': 0.4.2 @@ -17463,8 +15474,6 @@ snapshots: minimatch: 3.1.5 natural-compare: 1.4.0 optionator: 0.9.4 - optionalDependencies: - jiti: 1.21.7 transitivePeerDependencies: - supports-color @@ -18166,15 +16175,6 @@ snapshots: handle-thing@2.0.1: {} - happy-dom@10.8.0: - dependencies: - css.escape: 1.5.1 - entities: 4.5.0 - iconv-lite: 0.6.3 - webidl-conversions: 7.0.0 - whatwg-encoding: 2.0.0 - whatwg-mimetype: 3.0.0 - har-schema@2.0.0: {} har-validator@5.1.5: @@ -18301,8 +16301,6 @@ snapshots: hsla-regex@1.0.0: {} - html-element-attributes@1.3.1: {} - html-encoding-sniffer@1.0.2: dependencies: whatwg-encoding: 1.0.5 @@ -18913,9 +16911,9 @@ snapshots: isobject@3.0.1: {} - isomorphic-unfetch@3.1.0(encoding@0.1.13): + isomorphic-unfetch@3.1.0: dependencies: - node-fetch: 2.7.0(encoding@0.1.13) + node-fetch: 2.7.0 unfetch: 4.2.0 transitivePeerDependencies: - encoding @@ -19532,10 +17530,6 @@ snapshots: dependencies: brace-expansion: 2.0.1 - minimatch@9.0.9: - dependencies: - brace-expansion: 2.1.0 - minimist@1.2.7: {} minimist@1.2.8: {} @@ -19746,6 +17740,10 @@ snapshots: object.entries: 1.1.9 semver: 6.3.1 + node-fetch@2.7.0: + dependencies: + whatwg-url: 5.0.0 + node-fetch@2.7.0(encoding@0.1.13): dependencies: whatwg-url: 5.0.0 @@ -19967,10 +17965,6 @@ snapshots: define-properties: 1.2.1 es-abstract: 1.22.3 - object.omit@3.0.0: - dependencies: - is-extendable: 1.0.1 - object.pick@1.3.0: dependencies: isobject: 3.0.1 @@ -20448,21 +18442,19 @@ snapshots: camelcase-css: 2.0.1 postcss: 8.4.49 - postcss-load-config@3.1.4(postcss@8.4.38)(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)): + postcss-load-config@3.1.4(postcss@8.4.38): dependencies: lilconfig: 2.1.0 yaml: 1.10.2 optionalDependencies: postcss: 8.4.38 - ts-node: 10.9.1(@types/node@18.11.17)(typescript@5.7.3) - postcss-load-config@4.0.1(postcss@8.4.23)(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)): + postcss-load-config@4.0.1(postcss@8.4.23): dependencies: lilconfig: 2.1.0 yaml: 2.2.2 optionalDependencies: postcss: 8.4.23 - ts-node: 10.9.1(@types/node@18.11.17)(typescript@5.7.3) postcss-load-config@4.0.1(postcss@8.4.23)(ts-node@10.9.1(@types/node@20.11.13)(typescript@5.7.3)): dependencies: @@ -20472,6 +18464,13 @@ snapshots: postcss: 8.4.23 ts-node: 10.9.1(@types/node@20.11.13)(typescript@5.7.3) + postcss-load-config@4.0.2(postcss@8.4.49): + dependencies: + lilconfig: 3.1.3 + yaml: 2.7.0 + optionalDependencies: + postcss: 8.4.49 + postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)): dependencies: lilconfig: 3.1.3 @@ -20819,7 +18818,7 @@ snapshots: powershell-utils@0.1.0: {} - preact-cli@3.4.1(encoding@0.1.13)(eslint@8.56.0)(preact-render-to-string@5.2.6(preact@10.11.3))(preact@10.11.3)(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)): + preact-cli@3.4.1(eslint@8.56.0)(preact-render-to-string@5.2.6(preact@10.11.3))(preact@10.11.3): dependencies: '@babel/core': 7.18.9 '@babel/plugin-proposal-class-properties': 7.18.6(@babel/core@7.18.9) @@ -20858,7 +18857,7 @@ snapshots: html-webpack-exclude-assets-plugin: 0.0.7 html-webpack-plugin: 3.2.0(webpack@4.46.0) ip: 1.1.8 - isomorphic-unfetch: 3.1.0(encoding@0.1.13) + isomorphic-unfetch: 3.1.0 kleur: 4.1.5 loader-utils: 2.0.3 mini-css-extract-plugin: 1.6.2(webpack@4.46.0) @@ -20868,7 +18867,7 @@ snapshots: ora: 5.4.1 pnp-webpack-plugin: 1.7.0(typescript@4.6.4) postcss: 8.4.38 - postcss-load-config: 3.1.4(postcss@8.4.38)(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)) + postcss-load-config: 3.1.4(postcss@8.4.38) postcss-loader: 4.3.0(postcss@8.4.38)(webpack@4.46.0) preact: 10.11.3 preact-render-to-string: 5.2.6(preact@10.11.3) @@ -21107,10 +19106,6 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 - react-html-attributes@1.4.6: - dependencies: - html-element-attributes: 1.3.1 - react-is@16.13.1: {} react-refresh@0.10.0: {} @@ -22126,8 +20121,6 @@ snapshots: postcss: 8.4.49 postcss-selector-parser: 6.1.2 - stylis@3.5.4: {} - sucrase@3.35.0: dependencies: '@jridgewell/gen-mapping': 0.3.5 @@ -22198,6 +20191,33 @@ snapshots: symbol-tree@3.2.4: {} + tailwindcss@3.4.17: + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.6.0 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.2 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.21.7 + lilconfig: 3.1.3 + micromatch: 4.0.8 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.1.1 + postcss: 8.4.49 + postcss-import: 15.1.0(postcss@8.4.49) + postcss-js: 4.0.1(postcss@8.4.49) + postcss-load-config: 4.0.2(postcss@8.4.49) + postcss-nested: 6.2.0(postcss@8.4.49) + postcss-selector-parser: 6.1.2 + resolve: 1.22.8 + sucrase: 3.35.0 + transitivePeerDependencies: + - ts-node + tailwindcss@3.4.17(ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3)): dependencies: '@alloc/quick-lru': 5.2.0 @@ -22448,10 +20468,6 @@ snapshots: ts-interface-checker@0.1.13: {} - ts-invariant@0.10.3: - dependencies: - tslib: 2.6.2 - ts-node@10.9.1(@types/node@18.11.17)(typescript@5.7.3): dependencies: '@cspotcode/source-map-support': 0.8.1 @@ -22882,11 +20898,11 @@ snapshots: dependencies: defaults: 1.0.4 - web-ext@10.1.0(jiti@1.21.7): + web-ext@10.1.0: dependencies: '@babel/runtime': 7.29.2 '@devicefarmer/adbkit': 3.3.8 - addons-linter: 10.3.0(jiti@1.21.7) + addons-linter: 10.3.0 camelcase: 8.0.0 chrome-launcher: 1.2.0 debounce: 1.2.1 @@ -22921,8 +20937,6 @@ snapshots: webidl-conversions@4.0.2: {} - webidl-conversions@7.0.0: {} - webpack-bundle-analyzer@4.6.1: dependencies: acorn: 8.16.0 @@ -23057,18 +21071,12 @@ snapshots: dependencies: iconv-lite: 0.4.24 - whatwg-encoding@2.0.0: - dependencies: - iconv-lite: 0.6.3 - whatwg-encoding@3.1.1: dependencies: iconv-lite: 0.6.3 whatwg-mimetype@2.3.0: {} - whatwg-mimetype@3.0.0: {} - whatwg-mimetype@4.0.0: {} whatwg-url@5.0.0: