From f48d80d564159c33455d74521a6bc1f902a1671f Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 5 Aug 2025 12:14:20 +0200 Subject: [PATCH 001/177] chore: beta opening (#5429) --- .changeset/config.json | 2 +- .changeset/pre.json | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 .changeset/pre.json diff --git a/.changeset/config.json b/.changeset/config.json index 8ab7305dcc..cbad0e81d5 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -10,7 +10,7 @@ "linked": [], "fixed": [], "access": "public", - "baseBranch": "main", + "baseBranch": "beta", "updateInternalDependencies": "patch", "ignore": ["@examples/*", "@utils/*", "@repo/e2e"], "privatePackages": { diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..ee300194a2 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,20 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@repo/e2e": "1.0.0", + "@examples/next": "1.0.0", + "@examples/next-app-router": "1.0.0", + "@examples/vite": "0.0.0", + "@ultraviolet/fonts": "2.0.0", + "@ultraviolet/form": "4.0.3", + "@ultraviolet/icons": "4.0.2", + "@ultraviolet/illustrations": "5.0.1", + "@ultraviolet/nextjs": "1.0.3", + "@ultraviolet/plus": "1.0.3", + "@ultraviolet/themes": "2.0.0", + "@ultraviolet/ui": "2.0.3", + "@utils/test": "0.0.1" + }, + "changesets": [] +} From 5b73f47f4a7c3af3d810cd0b19523163e9b6d3f3 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Tue, 5 Aug 2025 13:38:01 +0200 Subject: [PATCH 002/177] chore: fix changeset (#5430) --- .changeset/pre.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/pre.json b/.changeset/pre.json index ee300194a2..d8096279aa 100644 --- a/.changeset/pre.json +++ b/.changeset/pre.json @@ -1,6 +1,6 @@ { "mode": "pre", - "tag": "next", + "tag": "beta", "initialVersions": { "@repo/e2e": "1.0.0", "@examples/next": "1.0.0", From 669bb9fddcef9028f35ca0e0c2ead07a203038b9 Mon Sep 17 00:00:00 2001 From: Matthias Prost Date: Wed, 6 Aug 2025 14:58:58 +0200 Subject: [PATCH 003/177] feat(Button): emotion removal vanilla extract (#5428) * feat(Button): emotion removal vanilla extract * fix: unit tests and checks * fix: update prefix to add uv * fix: snapshot update --- .changeset/eight-glasses-warn.md | 22 + .oxlintrc.json | 4 +- .storybook/components/DocsContainer.tsx | 48 +- .storybook/storybookThemes.ts | 8 +- .storybook/vite.config.ts | 2 + biome.json | 3 +- eslint.config.mjs | 5 +- examples/vite/src/App.tsx | 52 +- .../__snapshots__/index.test.tsx.snap | 329 +- .../__snapshots__/index.test.tsx.snap | 189 +- .../__snapshots__/index.test.tsx.snap | 209 +- .../__snapshots__/index.test.tsx.snap | 169 +- .../__snapshots__/index.test.tsx.snap | 77 +- .../__snapshots__/index.test.tsx.snap | 61 +- .../__snapshots__/index.test.tsx.snap | 408 +- .../__snapshots__/index.test.tsx.snap | 187 +- .../__snapshots__/index.test.tsx.snap | 126 +- .../__snapshots__/index.test.tsx.snap | 61 +- .../__snapshots__/Stepper.test.tsx.snap | 536 +-- .../__snapshots__/index.test.tsx.snap | 1097 +---- .../__snapshots__/index.test.tsx.snap | 803 ++-- .../__snapshots__/index.test.tsx.snap | 167 +- .../__snapshots__/index.test.tsx.snap | 838 +--- .../__snapshots__/index.test.tsx.snap | 504 +-- packages/themes/package.json | 6 +- packages/themes/src/index.ts | 1 + packages/themes/src/vanilla/themes.css.ts | 5 + packages/themes/vite.config.ts | 5 +- packages/ui/README.md | 16 +- packages/ui/package.json | 14 +- .../__snapshots__/index.test.tsx.snap | 178 +- .../__snapshots__/index.test.tsx.snap | 650 +-- .../__snapshots__/index.test.tsx.snap | 376 +- .../Button/__stories__/AsLink.stories.tsx | 4 +- .../Button/__stories__/Showcase.stories.tsx | 4 +- .../__snapshots__/index.test.tsx.snap | 4024 +---------------- .../Button/__tests__/index.test.tsx | 4 +- packages/ui/src/components/Button/index.tsx | 263 +- .../ui/src/components/Button/styles.css.ts | 328 ++ .../__snapshots__/index.test.tsx.snap | 781 +--- .../__snapshots__/index.test.tsx.snap | 2239 ++------- .../__snapshots__/index.test.tsx.snap | 128 +- .../__snapshots__/index.test.tsx.snap | 703 +-- .../__snapshots__/index.test.tsx.snap | 128 +- .../__snapshots__/index.test.tsx.snap | 65 +- .../__snapshots__/index.test.tsx.snap | 1780 +------- .../__snapshots__/index.test.tsx.snap | 1369 +----- .../__snapshots__/index.test.tsx.snap | 66 +- .../__snapshots__/index.test.tsx.snap | 168 +- .../__snapshots__/index.test.tsx.snap | 333 +- .../__snapshots__/index.test.tsx.snap | 339 +- packages/ui/src/index.ts | 2 + packages/ui/src/theme/ThemeProvider.tsx | 44 + packages/ui/src/theme/index.ts | 3 + packages/ui/vite.config.ts | 2 + packages/ui/vitest.config.ts | 15 + packages/ui/vitest.setup.ts | 1 + 57 files changed, 2750 insertions(+), 17199 deletions(-) create mode 100644 .changeset/eight-glasses-warn.md create mode 100644 packages/themes/src/vanilla/themes.css.ts create mode 100644 packages/ui/src/components/Button/styles.css.ts create mode 100644 packages/ui/src/theme/ThemeProvider.tsx create mode 100644 packages/ui/vitest.config.ts diff --git a/.changeset/eight-glasses-warn.md b/.changeset/eight-glasses-warn.md new file mode 100644 index 0000000000..df3706c287 --- /dev/null +++ b/.changeset/eight-glasses-warn.md @@ -0,0 +1,22 @@ +--- +"@ultraviolet/ui": major +--- + +⚠️ BREAKING CHANGES ⚠️ +In order to start using the new style, you will need to import new `` and import new CSS generated at build time: + +```tsx +import { ThemeProvider } from '@emotion/react' +import { consoleLightTheme } from '@ultraviolet/themes' + +import { ThemeProvider as ThemeProviderUV } from "@ultraviolet/ui" // ThemeProvider that generate the theme applied to components +import "@ultraviolet/ui/styles" // Generated CSS used by components + +export const App = (children) => { + + + {children} + + +} +``` diff --git a/.oxlintrc.json b/.oxlintrc.json index 897a06a573..8743a97eae 100644 --- a/.oxlintrc.json +++ b/.oxlintrc.json @@ -80,7 +80,7 @@ "import/no-named-as-default-member": "error", "import/no-named-as-default": "error", "import/no-self-import": "error", - "import/no-unassigned-import": "error", + "import/no-unassigned-import": "off", "import/no-unused-modules": "off", "import/prefer-default-export": "off", "import/no-namespace": "off", @@ -242,7 +242,7 @@ "react_perf/jsx-no-new-array-as-prop": "error", "react_perf/jsx-no-new-function-as-props": "error", "react_perf/jsx-no-new-object-as-prop": "error", - "react/button-has-type": "error", + "react/button-has-type": "off", "react/exhaustive-deps": "error", "react/jsx-filename-extension": [ "error", diff --git a/.storybook/components/DocsContainer.tsx b/.storybook/components/DocsContainer.tsx index 71339cf53e..7a60011bf0 100644 --- a/.storybook/components/DocsContainer.tsx +++ b/.storybook/components/DocsContainer.tsx @@ -10,7 +10,7 @@ import type { ReactNode } from 'react' import { cloneElement, isValidElement, useState } from 'react' import { globalStyles } from './globalStyle' import '@ultraviolet/fonts/fonts.css' -import { GlobalAlert } from '@ultraviolet/ui' +import { GlobalAlert, ThemeProvider as ThemeProviderUV } from '@ultraviolet/ui' type ExtraProps = { /** @@ -66,28 +66,30 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => { return ( - - {isBeta ? - window.top?.location.assign('https://beta.storybook.ultraviolet.scaleway.com')} - closable={false} - > - A Beta version is available. Please use this version if your dependencies include the Beta release. - : null} - - - {isValidElement(children) - ? cloneElement(children, { - deprecated: parameters?.deprecated, - deprecatedReason: parameters?.deprecatedReason, - migrationLink: parameters?.migrationLink, - hideArgsTable: parameters?.hideArgsTable, - experimental: isPlusLibrary ? true : parameters?.experimental, - }) - : children} - - + + + {isBeta ? + window.top?.location.assign('https://beta.storybook.ultraviolet.scaleway.com')} + closable={false} + > + A Beta version is available. Please use this version if your dependencies include the Beta release. + : null} + + + {isValidElement(children) + ? cloneElement(children, { + deprecated: parameters?.deprecated, + deprecatedReason: parameters?.deprecatedReason, + migrationLink: parameters?.migrationLink, + hideArgsTable: parameters?.hideArgsTable, + experimental: isPlusLibrary ? true : parameters?.experimental, + }) + : children} + + + ) } diff --git a/.storybook/storybookThemes.ts b/.storybook/storybookThemes.ts index 6244cdbbef..fafb4a2346 100644 --- a/.storybook/storybookThemes.ts +++ b/.storybook/storybookThemes.ts @@ -28,11 +28,15 @@ const generateStorybookTheme = ({ appBorderColor: theme.colors.neutral.borderWeak, appContentBg: theme.colors.neutral.background, barBg: theme.colors.neutral.backgroundWeak, - barSelectedColor: theme.colors.primary.textWeak, + barSelectedColor: theme.colors.primary.text, // Toolbar default and active colors barTextColor: theme.colors.neutral.textWeak, - base, + barSelectedColor: theme.colors.primary.text, + barBg: theme.colors.neutral.backgroundWeak, + + buttonBg: theme.colors.neutral.background, + buttonBorder: theme.colors.neutral.border, // BIZARRE booleanBg: theme.colors.neutral.background, diff --git a/.storybook/vite.config.ts b/.storybook/vite.config.ts index ffe8213f18..460c04eff1 100644 --- a/.storybook/vite.config.ts +++ b/.storybook/vite.config.ts @@ -2,6 +2,7 @@ import { resolve } from 'path' import svgr from '@svgr/rollup' import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' +import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'; // https://vitejs.dev/config/ export default defineConfig({ @@ -42,5 +43,6 @@ export default defineConfig({ plugins: ['@emotion/babel-plugin'], }, }), + vanillaExtractPlugin({}) ], }) diff --git a/biome.json b/biome.json index 9ac5d632c0..8648929300 100644 --- a/biome.json +++ b/biome.json @@ -17,7 +17,8 @@ "!**/build/**", "!**/.turbo/**", "!**/prebuild.ts", - "!**/index.stories.tsx" + "!**/index.stories.tsx", + "!**/*.css.ts" ] }, "css": { diff --git a/eslint.config.mjs b/eslint.config.mjs index eeb68575f9..144889510b 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -112,6 +112,7 @@ export default [ '**/__stories__/**/*.{ts,tsx}', '**/__tests__/**/*.{ts,tsx}', '**/vite.config.*', + '**/vitest.config.*', 'utils/test/**/*.{ts,tsx}', '**/vitest.setup.ts', ], @@ -139,6 +140,7 @@ export default [ '**/__stories__/**/*.{ts,tsx}', '**/__tests__/**/*.{ts,tsx}', '**/vite.config.*', + '**/vitest.config.*', 'utils/test/**/*.{ts,tsx}', '**/vitest.setup.ts', '.storybook/**', @@ -163,7 +165,8 @@ export default [ }, })), { - files: ['**/*.d.ts', '**/vite.config.ts'], + files: ['**/*.d.ts', '**/vite.config.ts', '**/vitest.config.*', +], rules: { 'import/no-extraneous-dependencies': 'off', diff --git a/examples/vite/src/App.tsx b/examples/vite/src/App.tsx index de64bd30a5..4b6e1f591b 100644 --- a/examples/vite/src/App.tsx +++ b/examples/vite/src/App.tsx @@ -1,27 +1,43 @@ import { PlusIcon } from '@ultraviolet/icons' -import { Alert, Button, Card, Row, Stack, Text } from '@ultraviolet/ui' +import { + Alert, + Button, + Card, + Row, + Stack, + Text, + ThemeProvider, +} from '@ultraviolet/ui' import { useState } from 'react' +import '@ultraviolet/ui/styles' // Import styles for the UI components +import { consoleDarkTheme, consoleLightTheme } from '@ultraviolet/themes' export const App = () => { const [count, setCount] = useState(0) + const [darkMode, setDarkMode] = useState(false) return ( - - - - Classic - - - - - - - Count:{count} - - - Alert - + + + + + Classic + + + + + + + + Count:{count} + + + Alert + + ) } diff --git a/packages/form/src/components/DateInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateInputField/__tests__/__snapshots__/index.test.tsx.snap index 45adc1aaa2..c3b2d7939e 100644 --- a/packages/form/src/components/DateInputField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/DateInputField/__tests__/__snapshots__/index.test.tsx.snap @@ -305,65 +305,6 @@ exports[`dateInputField > should clear field 1`] = ` } .emotion-25 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 1.5rem; - padding: 0 0.25rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.25rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-25:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-25:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-25 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-25:hover, -.emotion-25:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-27 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -372,12 +313,12 @@ exports[`dateInputField > should clear field 1`] = ` min-height: 1rem; } -.emotion-27 .fillStroke { +.emotion-25 .fillStroke { stroke: currentColor; fill: none; } -.emotion-30 { +.emotion-28 { color: #3f4250; font-size: 1rem; font-family: Inter,sans-serif; @@ -390,7 +331,7 @@ exports[`dateInputField > should clear field 1`] = ` text-transform: capitalize; } -.emotion-36 { +.emotion-32 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; @@ -404,7 +345,7 @@ exports[`dateInputField > should clear field 1`] = ` justify-content: normal; } -.emotion-39 { +.emotion-35 { color: #3f4250; font-size: 1rem; font-family: Inter,sans-serif; @@ -418,171 +359,33 @@ exports[`dateInputField > should clear field 1`] = ` text-transform: lowercase; } -.emotion-39::first-letter { +.emotion-35::first-letter { text-transform: uppercase; } -.emotion-60 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 3rem; - padding: 0 1rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 1rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; +.emotion-55 { height: 1.5625rem; width: 100%; padding: 0; color: #727683; } -.emotion-60:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-60:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-60 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-60:hover, -.emotion-60:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-60[aria-label="in-range"] { - color: #521094; - background-color: #f1eefc; -} - -.emotion-60[aria-label="in-range"]:hover { - color: #ffffff; - background-color: #792dd4; -} - -.emotion-60[aria-label="not-current"], -.emotion-60:disabled { - color: #b5b7bd; -} - -.emotion-60[aria-label="selected"] { - color: #ffffff; -} - -.emotion-69 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 3rem; - padding: 0 1rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 1rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - paragraph-spacing: 0; - text-case: none; - background: #8c40ef; - border: none; - color: #ffffff; - height: 1.5625rem; - width: 100%; - padding: 0; - color: #727683; -} - -.emotion-69:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-69:active { - box-shadow: 0px 0px 0px 3px #8c40ef40; -} - -.emotion-69 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-69:hover, -.emotion-69:active { - background: #792dd4; - color: #f9f9fa; -} - -.emotion-69[aria-label="in-range"] { +.emotion-55[aria-label="in-range"] { color: #521094; background-color: #f1eefc; } -.emotion-69[aria-label="in-range"]:hover { +.emotion-55[aria-label="in-range"]:hover { color: #ffffff; background-color: #792dd4; } -.emotion-69[aria-label="not-current"], -.emotion-69:disabled { +.emotion-55[aria-label="not-current"], +.emotion-55:disabled { color: #b5b7bd; } -.emotion-69[aria-label="selected"] { +.emotion-55[aria-label="selected"] { color: #ffffff; } @@ -662,12 +465,12 @@ exports[`dateInputField > should clear field 1`] = ` class="emotion-23 emotion-7" > September 2022

Mo

Tu

We

Th

Fr

Sa

Su

should render correctly 1`] = ` >
should render correctly disabled 1`] = ` >
should display an alert when submitError is present />

hello

diff --git a/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap index 83a3f0b502..2fed715f87 100644 --- a/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/SwitchButtonField/__tests__/__snapshots__/index.test.tsx.snap @@ -973,65 +973,6 @@ exports[`switchButtonField > should works with defaultValues 1`] = ` cursor: pointer; } -.emotion-44 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 3rem; - padding: 0 1rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 1rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.5rem; - paragraph-spacing: 0; - text-case: none; - background: #8c40ef; - border: none; - color: #ffffff; -} - -.emotion-44:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-44:active { - box-shadow: 0px 0px 0px 3px #8c40ef40; -} - -.emotion-44 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-44:hover, -.emotion-44:active { - background: #792dd4; - color: #f9f9fa; -} -
@@ -1178,7 +1119,7 @@ exports[`switchButtonField > should works with defaultValues 1`] = `
, should render correctly with regex 1`] = ` />
should works with defaultValues 1`] = ` />
render basic props 1`] = ` >

€0.00

@@ -1488,7 +1429,7 @@ exports[`estimateCost - NumberInput Item > render basic props 1`] = ` @@ -1500,13 +1441,13 @@ exports[`estimateCost - NumberInput Item > render basic props 1`] = `

render basic with overlay 1`] = ` cursor: not-allowed; } -.emotion-91[data-controls='false']>.emotion-99 { +.emotion-91[data-controls='false']>.emotion-97 { border-width: 0; } @@ -2437,65 +2378,6 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` } .emotion-95 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 1.5rem; - padding: 0 0.25rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.25rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-95:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-95:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-95 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-95:hover, -.emotion-95:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-97 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -2504,12 +2386,12 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` min-height: 1rem; } -.emotion-97 .fillStroke { +.emotion-95 .fillStroke { stroke: currentColor; fill: none; } -.emotion-100 { +.emotion-98 { display: grid; grid-template-columns: 1fr auto; -webkit-align-items: center; @@ -2526,7 +2408,7 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` width: 100%; } -.emotion-102 { +.emotion-100 { outline: none; border: none; padding: 0; @@ -2541,18 +2423,18 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` background: none; } -.emotion-102[data-has-unit='true'] { +.emotion-100[data-has-unit='true'] { text-align: left; padding: 0.5rem 0 0.5rem 0.5rem; } -.emotion-102::-webkit-outer-spin-button, -.emotion-102::-webkit-inner-spin-button { +.emotion-100::-webkit-outer-spin-button, +.emotion-100::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } -.emotion-102 { +.emotion-100 { -moz-appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; @@ -2560,15 +2442,15 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` appearance: textfield; } -.emotion-102[data-size='small'] { +.emotion-100[data-size='small'] { height: 2rem; } -.emotion-102[data-size='medium'] { +.emotion-100[data-size='medium'] { height: 2.5rem; } -.emotion-102[data-size='large'] { +.emotion-100[data-size='large'] { height: 3rem; font-size: 1rem; font-family: Inter,sans-serif; @@ -2576,34 +2458,34 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` line-height: 1.5rem; } -.emotion-102:-moz-read-only { +.emotion-100:-moz-read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-102:read-only { +.emotion-100:read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-102:-moz-read-only~.exvap482 { +.emotion-100:-moz-read-only~.exvap482 { background: #f9f9fa; } -.emotion-102:read-only~.exvap482 { +.emotion-100:read-only~.exvap482 { background: #f9f9fa; } -.emotion-102:disabled { +.emotion-100:disabled { color: #b5b7bd; background: #f3f3f4; cursor: not-allowed; border-block: 1px solid #e9eaeb; } -.emotion-102:disabled~.exvap482 { +.emotion-100:disabled~.exvap482 { background: #f3f3f4; cursor: not-allowed; -webkit-user-select: none; @@ -2612,16 +2494,16 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` user-select: none; } -.emotion-102:placeholder-shown~.exvap482 { +.emotion-100:placeholder-shown~.exvap482 { color: #727683; font-size: 1rem; } -.emotion-102[data-controls='false'] { +.emotion-100[data-controls='false'] { text-align: left; } -.emotion-110 { +.emotion-106 { padding-left: 16px; padding-right: 16px; position: relative; @@ -2633,7 +2515,7 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` min-width: 126px; } -.emotion-113 { +.emotion-109 { color: #727683; font-size: 1rem; font-family: Inter,sans-serif; @@ -2646,18 +2528,18 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` text-align: right; } -.emotion-115 { +.emotion-111 { margin: 0; width: 100%; border-right: 1px solid #d9dadd; border-radius: 0 0 0.25rem 0.25rem; } -.emotion-119 { +.emotion-115 { width: 70%; } -.emotion-121 { +.emotion-117 { padding-left: 16px; padding-right: 16px; position: relative; @@ -2674,7 +2556,7 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` min-width: 126px; } -.emotion-124 { +.emotion-120 { color: #641cb3; font-size: 1.5625rem; font-family: Space Grotesk,sans-serif; @@ -2943,11 +2825,11 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` >
render basic with overlay 1`] = ` >

€0.00

@@ -3012,7 +2894,7 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = ` @@ -3024,13 +2906,13 @@ exports[`estimateCost - NumberInput Item > render basic with overlay 1`] = `

render with getAmountValue 1`] = ` cursor: not-allowed; } -.emotion-91[data-controls='false']>.emotion-99 { +.emotion-91[data-controls='false']>.emotion-97 { border-width: 0; } @@ -3961,65 +3843,6 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` } .emotion-95 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 1.5rem; - padding: 0 0.25rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.25rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-95:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-95:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-95 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-95:hover, -.emotion-95:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-97 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -4028,12 +3851,12 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` min-height: 1rem; } -.emotion-97 .fillStroke { +.emotion-95 .fillStroke { stroke: currentColor; fill: none; } -.emotion-100 { +.emotion-98 { display: grid; grid-template-columns: 1fr auto; -webkit-align-items: center; @@ -4050,7 +3873,7 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` width: 100%; } -.emotion-102 { +.emotion-100 { outline: none; border: none; padding: 0; @@ -4065,18 +3888,18 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` background: none; } -.emotion-102[data-has-unit='true'] { +.emotion-100[data-has-unit='true'] { text-align: left; padding: 0.5rem 0 0.5rem 0.5rem; } -.emotion-102::-webkit-outer-spin-button, -.emotion-102::-webkit-inner-spin-button { +.emotion-100::-webkit-outer-spin-button, +.emotion-100::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } -.emotion-102 { +.emotion-100 { -moz-appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; @@ -4084,15 +3907,15 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` appearance: textfield; } -.emotion-102[data-size='small'] { +.emotion-100[data-size='small'] { height: 2rem; } -.emotion-102[data-size='medium'] { +.emotion-100[data-size='medium'] { height: 2.5rem; } -.emotion-102[data-size='large'] { +.emotion-100[data-size='large'] { height: 3rem; font-size: 1rem; font-family: Inter,sans-serif; @@ -4100,34 +3923,34 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` line-height: 1.5rem; } -.emotion-102:-moz-read-only { +.emotion-100:-moz-read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-102:read-only { +.emotion-100:read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-102:-moz-read-only~.exvap482 { +.emotion-100:-moz-read-only~.exvap482 { background: #f9f9fa; } -.emotion-102:read-only~.exvap482 { +.emotion-100:read-only~.exvap482 { background: #f9f9fa; } -.emotion-102:disabled { +.emotion-100:disabled { color: #b5b7bd; background: #f3f3f4; cursor: not-allowed; border-block: 1px solid #e9eaeb; } -.emotion-102:disabled~.exvap482 { +.emotion-100:disabled~.exvap482 { background: #f3f3f4; cursor: not-allowed; -webkit-user-select: none; @@ -4136,16 +3959,16 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` user-select: none; } -.emotion-102:placeholder-shown~.exvap482 { +.emotion-100:placeholder-shown~.exvap482 { color: #727683; font-size: 1rem; } -.emotion-102[data-controls='false'] { +.emotion-100[data-controls='false'] { text-align: left; } -.emotion-110 { +.emotion-106 { padding-left: 16px; padding-right: 16px; position: relative; @@ -4157,7 +3980,7 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` min-width: 126px; } -.emotion-113 { +.emotion-109 { color: #727683; font-size: 1rem; font-family: Inter,sans-serif; @@ -4170,18 +3993,18 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` text-align: right; } -.emotion-115 { +.emotion-111 { margin: 0; width: 100%; border-right: 1px solid #d9dadd; border-radius: 0 0 0.25rem 0.25rem; } -.emotion-119 { +.emotion-115 { width: 70%; } -.emotion-121 { +.emotion-117 { padding-left: 16px; padding-right: 16px; position: relative; @@ -4198,7 +4021,7 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` min-width: 126px; } -.emotion-124 { +.emotion-120 { color: #641cb3; font-size: 1.5625rem; font-family: Space Grotesk,sans-serif; @@ -4467,11 +4290,11 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` >
render with getAmountValue 1`] = ` >

€0.00

@@ -4536,7 +4359,7 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = ` @@ -4548,13 +4371,13 @@ exports[`estimateCost - NumberInput Item > render with getAmountValue 1`] = `

render with values 1`] = ` cursor: not-allowed; } -.emotion-94[data-controls='false']>.emotion-102 { +.emotion-94[data-controls='false']>.emotion-100 { border-width: 0; } @@ -5499,65 +5322,6 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` } .emotion-98 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 1.5rem; - padding: 0 0.25rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.25rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-98:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-98:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-98 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-98:hover, -.emotion-98:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-100 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -5566,12 +5330,12 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` min-height: 1rem; } -.emotion-100 .fillStroke { +.emotion-98 .fillStroke { stroke: currentColor; fill: none; } -.emotion-103 { +.emotion-101 { display: grid; grid-template-columns: 1fr auto; -webkit-align-items: center; @@ -5588,7 +5352,7 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` width: 100%; } -.emotion-105 { +.emotion-103 { outline: none; border: none; padding: 0; @@ -5603,18 +5367,18 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` background: none; } -.emotion-105[data-has-unit='true'] { +.emotion-103[data-has-unit='true'] { text-align: left; padding: 0.5rem 0 0.5rem 0.5rem; } -.emotion-105::-webkit-outer-spin-button, -.emotion-105::-webkit-inner-spin-button { +.emotion-103::-webkit-outer-spin-button, +.emotion-103::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } -.emotion-105 { +.emotion-103 { -moz-appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; @@ -5622,15 +5386,15 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` appearance: textfield; } -.emotion-105[data-size='small'] { +.emotion-103[data-size='small'] { height: 2rem; } -.emotion-105[data-size='medium'] { +.emotion-103[data-size='medium'] { height: 2.5rem; } -.emotion-105[data-size='large'] { +.emotion-103[data-size='large'] { height: 3rem; font-size: 1rem; font-family: Inter,sans-serif; @@ -5638,34 +5402,34 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` line-height: 1.5rem; } -.emotion-105:-moz-read-only { +.emotion-103:-moz-read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-105:read-only { +.emotion-103:read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-105:-moz-read-only~.exvap482 { +.emotion-103:-moz-read-only~.exvap482 { background: #f9f9fa; } -.emotion-105:read-only~.exvap482 { +.emotion-103:read-only~.exvap482 { background: #f9f9fa; } -.emotion-105:disabled { +.emotion-103:disabled { color: #b5b7bd; background: #f3f3f4; cursor: not-allowed; border-block: 1px solid #e9eaeb; } -.emotion-105:disabled~.exvap482 { +.emotion-103:disabled~.exvap482 { background: #f3f3f4; cursor: not-allowed; -webkit-user-select: none; @@ -5674,16 +5438,16 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` user-select: none; } -.emotion-105:placeholder-shown~.exvap482 { +.emotion-103:placeholder-shown~.exvap482 { color: #727683; font-size: 1rem; } -.emotion-105[data-controls='false'] { +.emotion-103[data-controls='false'] { text-align: left; } -.emotion-113 { +.emotion-109 { padding-left: 16px; padding-right: 16px; position: relative; @@ -5695,7 +5459,7 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` min-width: 126px; } -.emotion-116 { +.emotion-112 { color: #641cb3; font-size: 1rem; font-family: Inter,sans-serif; @@ -5708,7 +5472,7 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` text-align: right; } -.emotion-119 { +.emotion-115 { font-size: 1rem; font-family: Inter,sans-serif; font-weight: 400; @@ -5720,18 +5484,18 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` text-align: right; } -.emotion-121 { +.emotion-117 { margin: 0; width: 100%; border-right: 1px solid #d9dadd; border-radius: 0 0 0.25rem 0.25rem; } -.emotion-125 { +.emotion-121 { width: 70%; } -.emotion-127 { +.emotion-123 { padding-left: 16px; padding-right: 16px; position: relative; @@ -5748,7 +5512,7 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` min-width: 126px; } -.emotion-130 { +.emotion-126 { color: #641cb3; font-size: 1.5625rem; font-family: Space Grotesk,sans-serif; @@ -6022,11 +5786,11 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` >
render with values 1`] = ` >

€50.00

€1.00/chocolate/hour(s)

@@ -6096,7 +5860,7 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` @@ -6108,13 +5872,13 @@ exports[`estimateCost - NumberInput Item > render with values 1`] = ` @@ -2103,12 +2044,12 @@ exports[`offerList > should work with badge 1`] = ` > @@ -2208,12 +2149,12 @@ exports[`offerList > should work with badge 1`] = ` > @@ -2313,12 +2254,12 @@ exports[`offerList > should work with badge 1`] = ` > @@ -2418,12 +2359,12 @@ exports[`offerList > should work with badge 1`] = ` > @@ -2523,12 +2464,12 @@ exports[`offerList > should work with badge 1`] = ` > @@ -2628,12 +2569,12 @@ exports[`offerList > should work with badge 1`] = ` > @@ -2733,12 +2674,12 @@ exports[`offerList > should work with badge 1`] = ` > @@ -3157,65 +3098,6 @@ exports[`offerList > should work with banner 1`] = ` } .emotion-50 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-50:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-50:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-50 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-50:hover, -.emotion-50:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-52 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -3224,12 +3106,12 @@ exports[`offerList > should work with banner 1`] = ` min-height: 1rem; } -.emotion-52 .fillStroke { +.emotion-50 .fillStroke { stroke: currentColor; fill: none; } -.emotion-55 { +.emotion-53 { display: table-cell; vertical-align: middle; height: 3.75rem; @@ -3237,7 +3119,7 @@ exports[`offerList > should work with banner 1`] = ` white-space: pre-line; } -.emotion-63 { +.emotion-61 { width: 100%; display: table-row; vertical-align: middle; @@ -3247,14 +3129,14 @@ exports[`offerList > should work with banner 1`] = ` position: relative; } -.emotion-63 td, -.emotion-63 td:first-child, -.emotion-63 td:last-child { +.emotion-61 td, +.emotion-61 td:first-child, +.emotion-61 td:last-child { -webkit-transition: box-shadow 200ms ease,border-color 200ms ease; transition: box-shadow 200ms ease,border-color 200ms ease; } -.emotion-66 { +.emotion-64 { display: table-cell; vertical-align: middle; height: 3.75rem; @@ -3268,7 +3150,7 @@ exports[`offerList > should work with banner 1`] = ` padding: 0; } -.emotion-69 { +.emotion-67 { font-size: 0.75rem; font-family: Inter,sans-serif; font-weight: 400; @@ -3289,7 +3171,7 @@ exports[`offerList > should work with banner 1`] = ` color: #7c5400; } -.emotion-113 { +.emotion-109 { font-size: 0.75rem; font-family: Inter,sans-serif; font-weight: 400; @@ -3436,12 +3318,12 @@ exports[`offerList > should work with banner 1`] = ` > @@ -8024,12 +7729,12 @@ exports[`offerList > should work with expandable 1`] = ` > @@ -8120,12 +7825,12 @@ exports[`offerList > should work with expandable 1`] = ` > @@ -8216,12 +7921,12 @@ exports[`offerList > should work with expandable 1`] = ` > @@ -8312,12 +8017,12 @@ exports[`offerList > should work with expandable 1`] = ` > @@ -8408,12 +8113,12 @@ exports[`offerList > should work with expandable 1`] = ` > @@ -8504,12 +8209,12 @@ exports[`offerList > should work with expandable 1`] = ` > @@ -8600,12 +8305,12 @@ exports[`offerList > should work with expandable 1`] = ` > diff --git a/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap index 8b015c0926..52a300ee73 100644 --- a/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/plus/src/components/OrderSummary/__tests__/__snapshots__/index.test.tsx.snap @@ -13774,7 +13774,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` cursor: not-allowed; } -.emotion-44[data-controls='false']>.emotion-52 { +.emotion-44[data-controls='false']>.emotion-50 { border-width: 0; } @@ -13827,65 +13827,6 @@ exports[`orderSummary > should work with numberInputs 1`] = ` } .emotion-48 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 1.5rem; - padding: 0 0.25rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.25rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-48:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-48:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-48 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-48:hover, -.emotion-48:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-50 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -13894,12 +13835,12 @@ exports[`orderSummary > should work with numberInputs 1`] = ` min-height: 1rem; } -.emotion-50 .fillStroke { +.emotion-48 .fillStroke { stroke: currentColor; fill: none; } -.emotion-53 { +.emotion-51 { display: grid; grid-template-columns: 1fr auto; -webkit-align-items: center; @@ -13916,7 +13857,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` width: 100%; } -.emotion-55 { +.emotion-53 { outline: none; border: none; padding: 0; @@ -13931,18 +13872,18 @@ exports[`orderSummary > should work with numberInputs 1`] = ` background: none; } -.emotion-55[data-has-unit='true'] { +.emotion-53[data-has-unit='true'] { text-align: left; padding: 0.5rem 0 0.5rem 0.5rem; } -.emotion-55::-webkit-outer-spin-button, -.emotion-55::-webkit-inner-spin-button { +.emotion-53::-webkit-outer-spin-button, +.emotion-53::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } -.emotion-55 { +.emotion-53 { -moz-appearance: textfield; -webkit-appearance: textfield; -moz-appearance: textfield; @@ -13950,15 +13891,15 @@ exports[`orderSummary > should work with numberInputs 1`] = ` appearance: textfield; } -.emotion-55[data-size='small'] { +.emotion-53[data-size='small'] { height: 2rem; } -.emotion-55[data-size='medium'] { +.emotion-53[data-size='medium'] { height: 2.5rem; } -.emotion-55[data-size='large'] { +.emotion-53[data-size='large'] { height: 3rem; font-size: 1rem; font-family: Inter,sans-serif; @@ -13966,34 +13907,34 @@ exports[`orderSummary > should work with numberInputs 1`] = ` line-height: 1.5rem; } -.emotion-55:-moz-read-only { +.emotion-53:-moz-read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-55:read-only { +.emotion-53:read-only { color: #3f4250; background: #f9f9fa; border-block: 1px solid #d9dadd; } -.emotion-55:-moz-read-only~.emotion-89 { +.emotion-53:-moz-read-only~.emotion-85 { background: #f9f9fa; } -.emotion-55:read-only~.emotion-89 { +.emotion-53:read-only~.emotion-85 { background: #f9f9fa; } -.emotion-55:disabled { +.emotion-53:disabled { color: #b5b7bd; background: #f3f3f4; cursor: not-allowed; border-block: 1px solid #e9eaeb; } -.emotion-55:disabled~.emotion-89 { +.emotion-53:disabled~.emotion-85 { background: #f3f3f4; cursor: not-allowed; -webkit-user-select: none; @@ -14002,16 +13943,16 @@ exports[`orderSummary > should work with numberInputs 1`] = ` user-select: none; } -.emotion-55:placeholder-shown~.emotion-89 { +.emotion-53:placeholder-shown~.emotion-85 { color: #727683; font-size: 1rem; } -.emotion-55[data-controls='false'] { +.emotion-53[data-controls='false'] { text-align: left; } -.emotion-71 { +.emotion-67 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14034,7 +13975,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` gap: 0.5rem; } -.emotion-71 { +.emotion-67 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14057,7 +13998,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` gap: 0.5rem; } -.emotion-77 { +.emotion-73 { color: #222638; font-size: 0.875rem; font-family: Inter,sans-serif; @@ -14069,7 +14010,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` text-decoration: none; } -.emotion-77 { +.emotion-73 { color: #222638; font-size: 0.875rem; font-family: Inter,sans-serif; @@ -14081,7 +14022,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` text-decoration: none; } -.emotion-90 { +.emotion-86 { color: #3f4250; font-size: 1rem; font-family: Inter,sans-serif; @@ -14104,7 +14045,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` font-size: 0.875rem; } -.emotion-92 { +.emotion-88 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14128,7 +14069,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` padding-left: 0.5rem; } -.emotion-92 { +.emotion-88 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14152,7 +14093,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` padding-left: 0.5rem; } -.emotion-110 { +.emotion-106 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14177,7 +14118,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` border-top: 1px solid #d9dadd; } -.emotion-110 { +.emotion-106 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14202,7 +14143,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` border-top: 1px solid #d9dadd; } -.emotion-114 { +.emotion-110 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14224,7 +14165,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` flex-direction: column; } -.emotion-114 { +.emotion-110 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14246,7 +14187,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` flex-direction: column; } -.emotion-116 { +.emotion-112 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14269,7 +14210,7 @@ exports[`orderSummary > should work with numberInputs 1`] = ` gap: 0.5rem; } -.emotion-116 { +.emotion-112 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -14424,11 +14365,11 @@ exports[`orderSummary > should work with numberInputs 1`] = ` >
should work with numberInputs 1`] = ` >
Choose a duration @@ -14522,10 +14463,10 @@ exports[`orderSummary > should work with numberInputs 1`] = ` data-unit="true" >
should work with numberInputs 1`] = ` value="2" /> ms @@ -14547,55 +14488,55 @@ exports[`orderSummary > should work with numberInputs 1`] = `
duration
€1.00
should work with default props 1`] = ` background-color: #e9eaeb; } -.emotion-43 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2.5rem; - padding: 0 0.75rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: 100%; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: #8c40ef; - border: none; - color: #ffffff; -} - -.emotion-43:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-43:active { - box-shadow: 0px 0px 0px 3px #8c40ef40; -} - -.emotion-43 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-43:hover, -.emotion-43:active { - background: #792dd4; - color: #f9f9fa; -} - -.emotion-49 { +.emotion-47 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -452,7 +393,7 @@ exports[`plans > should work with default props 1`] = ` gap: 0.5rem; } -.emotion-51 { +.emotion-49 { font-size: 1rem; font-family: Inter,sans-serif; font-weight: 500; @@ -463,19 +404,19 @@ exports[`plans > should work with default props 1`] = ` text-decoration: none; } -.emotion-53 { +.emotion-51 { display: inherit; } -.emotion-53[data-container-full-height="true"] { +.emotion-51[data-container-full-height="true"] { height: 100%; } -.emotion-53[data-container-full-width="true"] { +.emotion-51[data-container-full-width="true"] { width: 100%; } -.emotion-55 { +.emotion-53 { vertical-align: middle; fill: #3f4250; height: 1rem; @@ -484,12 +425,12 @@ exports[`plans > should work with default props 1`] = ` min-height: 1rem; } -.emotion-55 .fillStroke { +.emotion-53 .fillStroke { stroke: #727683; fill: none; } -.emotion-57 { +.emotion-55 { color: #727683; font-size: 0.75rem; font-family: Inter,sans-serif; @@ -502,7 +443,7 @@ exports[`plans > should work with default props 1`] = ` text-align: start; } -.emotion-61 { +.emotion-59 { color: #b5b7bd; font-size: 1rem; font-family: Inter,sans-serif; @@ -514,11 +455,11 @@ exports[`plans > should work with default props 1`] = ` text-decoration: none; } -.emotion-73 { +.emotion-71 { cursor: pointer; } -.emotion-93 { +.emotion-91 { vertical-align: middle; fill: #b5b7bd; height: 1.5rem; @@ -527,12 +468,12 @@ exports[`plans > should work with default props 1`] = ` min-height: 1.5rem; } -.emotion-93 .fillStroke { +.emotion-91 .fillStroke { stroke: #b5b7bd; fill: none; } -.emotion-109 { +.emotion-107 { vertical-align: middle; fill: #7ee0bc; height: 1.25rem; @@ -541,7 +482,7 @@ exports[`plans > should work with default props 1`] = ` min-height: 1.25rem; } -.emotion-109 .fillStroke { +.emotion-107 .fillStroke { stroke: #7ee0bc; fill: none; } @@ -653,7 +594,7 @@ exports[`plans > should work with default props 1`] = ` class="emotion-18 emotion-19" >
  • 1

    step1

  • 2

    step2

    @@ -1312,20 +1194,20 @@ exports[`steppedListCard > should work with default props 1`] = `

First step

Description
blockStorage should work with pre-completed step 1`] = ` justify-content: normal; } -.emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-4:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-4:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-4 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-4:hover, -.emotion-4:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-4 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-4:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-4:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-4 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-4:hover, -.emotion-4:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-7 { +.emotion-5 { border: 1px solid #d9dadd; border-radius: 0.25rem; padding: 1.5rem; @@ -1543,15 +1307,15 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` padding: 0; } -.emotion-7[data-is-active='true'] { +.emotion-5[data-is-active='true'] { border: 1px solid #8c40ef; } -.emotion-7[data-disabled='true'] { +.emotion-5[data-disabled='true'] { border: 1px solid #e9eaeb; } -.emotion-7 { +.emotion-5 { border: 1px solid #d9dadd; border-radius: 0.25rem; padding: 1.5rem; @@ -1561,15 +1325,15 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` padding: 0; } -.emotion-7[data-is-active='true'] { +.emotion-5[data-is-active='true'] { border: 1px solid #8c40ef; } -.emotion-7[data-disabled='true'] { +.emotion-5[data-disabled='true'] { border: 1px solid #e9eaeb; } -.emotion-9 { +.emotion-7 { display: grid; grid-template-columns: 1fr 3fr; -webkit-align-items: normal; @@ -1582,7 +1346,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` justify-content: normal; } -.emotion-9 { +.emotion-7 { display: grid; grid-template-columns: 1fr 3fr; -webkit-align-items: normal; @@ -1595,7 +1359,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` justify-content: normal; } -.emotion-11 { +.emotion-9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1620,7 +1384,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` border-right: solid #d9dadd 1px; } -.emotion-11 { +.emotion-9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1645,7 +1409,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` border-right: solid #d9dadd 1px; } -.emotion-13 { +.emotion-11 { list-style: none; padding-left: 0; text-align: left; @@ -1669,7 +1433,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` weight: 400; } -.emotion-13 { +.emotion-11 { list-style: none; padding-left: 0; text-align: left; @@ -1693,7 +1457,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` weight: 400; } -.emotion-16 { +.emotion-14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1714,7 +1478,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` align-items: center; } -.emotion-16 { +.emotion-14 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1735,7 +1499,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` align-items: center; } -.emotion-18 { +.emotion-16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1757,7 +1521,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` border: 1px solid #8c40ef; } -.emotion-18 { +.emotion-16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1779,7 +1543,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` border: 1px solid #8c40ef; } -.emotion-20 { +.emotion-18 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -1789,7 +1553,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` min-width: 0; } -.emotion-20 { +.emotion-18 { -webkit-flex: 1; -ms-flex: 1; flex: 1; @@ -1799,7 +1563,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` min-width: 0; } -.emotion-23 { +.emotion-21 { font-size: 1rem; font-family: Inter,sans-serif; font-weight: 500; @@ -1818,17 +1582,17 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` text-decoration-color: transparent; } -.emotion-23:hover { +.emotion-21:hover { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-thickness: 1px; } -.emotion-23:active { +.emotion-21:active { text-decoration-thickness: 2px; } -.emotion-23 { +.emotion-21 { font-size: 1rem; font-family: Inter,sans-serif; font-weight: 500; @@ -1847,17 +1611,17 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` text-decoration-color: transparent; } -.emotion-23:hover { +.emotion-21:hover { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-thickness: 1px; } -.emotion-23:active { +.emotion-21:active { text-decoration-thickness: 2px; } -.emotion-28 { +.emotion-26 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1879,7 +1643,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` border: 1px solid #f1eefc; } -.emotion-28 { +.emotion-26 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1901,7 +1665,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` border: 1px solid #f1eefc; } -.emotion-30 { +.emotion-28 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -1910,12 +1674,12 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` min-height: 1rem; } -.emotion-30 .fillStroke { +.emotion-28 .fillStroke { stroke: currentColor; fill: none; } -.emotion-30 { +.emotion-28 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -1924,12 +1688,12 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` min-height: 1rem; } -.emotion-30 .fillStroke { +.emotion-28 .fillStroke { stroke: currentColor; fill: none; } -.emotion-35 { +.emotion-33 { font-size: 1rem; font-family: Inter,sans-serif; font-weight: 400; @@ -1948,17 +1712,17 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` text-decoration-color: transparent; } -.emotion-35:hover { +.emotion-33:hover { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-thickness: 1px; } -.emotion-35:active { +.emotion-33:active { text-decoration-thickness: 2px; } -.emotion-35 { +.emotion-33 { font-size: 1rem; font-family: Inter,sans-serif; font-weight: 400; @@ -1977,17 +1741,17 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` text-decoration-color: transparent; } -.emotion-35:hover { +.emotion-33:hover { -webkit-text-decoration: underline; text-decoration: underline; text-decoration-thickness: 1px; } -.emotion-35:active { +.emotion-33:active { text-decoration-thickness: 2px; } -.emotion-37 { +.emotion-35 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2012,7 +1776,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` padding-top: 2rem; } -.emotion-37 { +.emotion-35 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2037,15 +1801,15 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` padding-top: 2rem; } -.emotion-39 { +.emotion-37 { margin-bottom: 1.5rem; } -.emotion-39 { +.emotion-37 { margin-bottom: 1.5rem; } -.emotion-41 { +.emotion-39 { font-size: 1.3125rem; font-family: Space Grotesk,sans-serif; font-weight: 500; @@ -2056,7 +1820,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` text-decoration: none; } -.emotion-41 { +.emotion-39 { font-size: 1.3125rem; font-family: Space Grotesk,sans-serif; font-weight: 500; @@ -2067,7 +1831,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` text-decoration: none; } -.emotion-43 { +.emotion-41 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2078,7 +1842,7 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` justify-content: right; } -.emotion-43 { +.emotion-41 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -2102,52 +1866,52 @@ exports[`steppedListCard > should work with pre-completed step 1`] = ` Header
  • 1

    step1

  • should work with pre-completed step 1`] = `

    step2

    @@ -2169,20 +1933,20 @@ exports[`steppedListCard > should work with pre-completed step 1`] = `

First step

Description
blockStorage ( - - + + + + ) ``` diff --git a/packages/ui/package.json b/packages/ui/package.json index 711a47febd..5541b46b62 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -16,7 +16,7 @@ "build:profile": "npx vite-bundle-visualizer -c vite.config.ts", "typecheck": "tsc --noEmit", "size": "size-limit", - "test:unit": "LC_ALL=en_US.UTF-8 pnpm vitest --run --config vite.config.ts", + "test:unit": "LC_ALL=en_US.UTF-8 pnpm vitest --run --config vitest.config.ts", "test:unit:coverage": "pnpm test:unit --coverage", "lintpublish": "publint" }, @@ -37,7 +37,10 @@ "darwin", "linux" ], - "sideEffects": false, + "sideEffects": [ + "**/*.css", + "**/*.css.ts" + ], "type": "module", "files": [ "dist/" @@ -50,7 +53,8 @@ "types": "./dist/index.d.ts", "require": "./dist/index.cjs", "default": "./dist/index.js" - } + }, + "./styles": "./dist/ui.css" }, "size-limit": [ { @@ -78,6 +82,7 @@ "@types/react": "19.2.2", "@types/react-dom": "19.2.2", "@utils/test": "workspace:*", + "@vanilla-extract/vite-plugin": "5.1.1", "react": "19.2.0", "react-dom": "19.2.0" }, @@ -92,6 +97,9 @@ "@scaleway/use-media": "3.0.4", "@ultraviolet/icons": "workspace:*", "@ultraviolet/themes": "workspace:*", + "@vanilla-extract/css": "1.17.4", + "@vanilla-extract/dynamic": "2.1.5", + "@vanilla-extract/recipes": "0.5.7", "deepmerge": "4.3.1", "react-toastify": "11.0.5", "react-use-clipboard": "1.0.9" diff --git a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap index 394e2cd88a..0b3c4c51cc 100644 --- a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap @@ -1024,66 +1024,10 @@ exports[`alert > renders correctly with buttonText and onClickButton 1`] = ` text-decoration: none; } -.emotion-13 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: #e51963; - border: none; - color: #ffffff; +.emotion-12 { margin-left: 2.5rem; } -.emotion-13:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-13:active { - box-shadow: 0px 0px 0px 3px #f91b6c40; -} - -.emotion-13 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-13:hover, -.emotion-13:active { - background: #d6175c; - color: #f9f9fa; -} -
@@ -1117,7 +1061,7 @@ exports[`alert > renders correctly with buttonText and onClickButton 1`] = `
) }, diff --git a/packages/ui/src/components/Button/styles.css.ts b/packages/ui/src/components/Button/styles.css.ts new file mode 100644 index 0000000000..4d5045b55c --- /dev/null +++ b/packages/ui/src/components/Button/styles.css.ts @@ -0,0 +1,328 @@ +import { theme } from '@ultraviolet/themes' +import type { RecipeVariants } from '@vanilla-extract/recipes' +import { recipe } from '@vanilla-extract/recipes' +import { SIZE_GAP_KEY, SIZE_HEIGHT, SIZE_PADDING_KEY } from './constants' + +const { monochrome } = theme.colors.other + +const sentiments = [ + 'primary', + 'secondary', + 'danger', + 'info', + 'success', + 'warning', + 'neutral', + 'black', + 'white', +] as const + +const sentimentThemeMap: Record< + Exclude<(typeof sentiments)[number], 'black' | 'white'>, + typeof theme.colors.primary +> = { + primary: theme.colors.primary, + secondary: theme.colors.secondary, + danger: theme.colors.danger, + info: theme.colors.info, + success: theme.colors.success, + warning: theme.colors.warning, + neutral: theme.colors.neutral, +} + +function getFilledStyle(sentiment: (typeof sentiments)[number]) { + if (sentiment === 'black') { + return { + background: monochrome.black.background, + color: monochrome.white.text, + border: 'none', + selectors: { + '&:hover, &:active': { + background: monochrome.black.backgroundHover, + color: monochrome.white.textHover, + }, + '&:disabled': { + background: monochrome.black.backgroundDisabled, + color: monochrome.black.textDisabled, + }, + }, + } + } + if (sentiment === 'white') { + return { + background: monochrome.white.background, + color: monochrome.black.text, + border: 'none', + selectors: { + '&:hover, &:active': { + background: monochrome.white.backgroundHover, + color: monochrome.black.textHover, + }, + '&:disabled': { + background: monochrome.white.backgroundDisabled, + color: monochrome.white.textDisabled, + }, + }, + } + } + const selectedSentiment = sentimentThemeMap[sentiment] + + return { + background: selectedSentiment.backgroundStrong, + color: selectedSentiment.textStrong, + border: 'none', + selectors: { + '&:hover, &:active': { + background: selectedSentiment.backgroundStrongHover, + color: selectedSentiment.textStrongHover, + }, + '&:disabled': { + background: selectedSentiment.backgroundStrongDisabled, + color: selectedSentiment.textStrongDisabled, + }, + }, + } +} + +function getOutlinedStyle(sentiment: (typeof sentiments)[number]) { + if (sentiment === 'black') { + return { + background: 'none', + color: monochrome.black.text, + border: `1px solid ${monochrome.black.border}`, + selectors: { + '&:hover, &:active': { + background: monochrome.black.backgroundHover, + color: monochrome.white.textHover, + border: `1px solid ${monochrome.black.borderHover}`, + }, + '&:disabled': { + color: monochrome.black.textDisabled, + border: `1px solid ${monochrome.black.borderDisabled}`, + }, + }, + } + } + if (sentiment === 'white') { + return { + background: 'none', + color: monochrome.white.text, + border: `1px solid ${monochrome.white.border}`, + selectors: { + '&:hover, &:active': { + background: monochrome.white.backgroundHover, + color: monochrome.black.textHover, + border: `1px solid ${monochrome.white.borderHover}`, + }, + '&:disabled': { + color: monochrome.white.textDisabled, + border: `1px solid ${monochrome.white.borderDisabled}`, + }, + }, + } + } + if (sentiment === 'neutral') { + const selectedSentiment = sentimentThemeMap[sentiment] + + return { + background: 'none', + color: selectedSentiment.text, + border: `1px solid ${selectedSentiment.borderStrong}`, + selectors: { + '&:hover, &:active': { + background: selectedSentiment.backgroundHover, + color: selectedSentiment.textHover, + border: `1px solid ${selectedSentiment.borderStrongHover}`, + }, + '&:disabled': { + color: selectedSentiment.textDisabled, + border: `1px solid ${selectedSentiment.borderStrongDisabled}`, + }, + }, + } + } + const selectedSentiment = sentimentThemeMap[sentiment] + + return { + background: 'none', + color: selectedSentiment.text, + border: `1px solid ${selectedSentiment.border}`, + selectors: { + '&:hover, &:active': { + background: selectedSentiment.backgroundHover, + color: selectedSentiment.textHover, + border: `1px solid ${selectedSentiment.borderHover}`, + }, + '&:disabled': { + color: selectedSentiment.textDisabled, + border: `1px solid ${selectedSentiment.borderDisabled}`, + }, + }, + } +} + +function getGhostStyle(sentiment: (typeof sentiments)[number]) { + if (sentiment === 'black') { + return { + background: 'none', + color: monochrome.black.text, + border: 'none', + selectors: { + '&:hover, &:active': { + background: monochrome.black.backgroundHover, + color: monochrome.white.textHover, + }, + '&:disabled': { + color: monochrome.black.textDisabled, + }, + }, + } + } + if (sentiment === 'white') { + return { + background: 'none', + color: monochrome.white.text, + border: 'none', + selectors: { + '&:hover, &:active': { + background: monochrome.white.backgroundHover, + color: monochrome.black.textHover, + }, + '&:disabled': { + color: monochrome.white.textDisabled, + }, + }, + } + } + const selectedSentiment = sentimentThemeMap[sentiment] + + return { + background: 'none', + color: selectedSentiment.text, + border: 'none', + selectors: { + '&:hover, &:active': { + background: selectedSentiment.backgroundHover, + color: selectedSentiment.textHover, + }, + '&:disabled': { + color: selectedSentiment.textDisabled, + }, + }, + } +} + +const sharedSizeStyled = { + fontSize: theme.typography.bodyStrong.fontSize, + fontFamily: theme.typography.bodyStrong.fontFamily, + fontWeight: theme.typography.bodyStrong.weight, + letterSpacing: theme.typography.bodyStrong.letterSpacing, + lineHeight: theme.typography.bodyStrong.lineHeight, +} + +export const button = recipe({ + base: { + display: 'inline-flex', + position: 'relative', + flexDirection: 'row', + boxSizing: 'border-box', + alignItems: 'center', + justifyContent: 'center', + outlineOffset: '2px', + whiteSpace: 'nowrap', + textDecoration: 'none', + borderRadius: theme.radii.default, + selectors: { + '&:hover': { + textDecoration: 'none', + }, + }, + }, + variants: { + size: { + large: { + height: theme.sizing[SIZE_HEIGHT.large], + paddingLeft: theme.space[SIZE_PADDING_KEY.large], + paddingRight: theme.space[SIZE_PADDING_KEY.large], + gap: theme.space[SIZE_GAP_KEY.large], + ...sharedSizeStyled, + }, + medium: { + height: theme.sizing[SIZE_HEIGHT.medium], + paddingLeft: theme.space[SIZE_PADDING_KEY.medium], + paddingRight: theme.space[SIZE_PADDING_KEY.medium], + gap: theme.space[SIZE_GAP_KEY.medium], + ...sharedSizeStyled, + }, + small: { + height: theme.sizing[SIZE_HEIGHT.small], + paddingLeft: theme.space[SIZE_PADDING_KEY.small], + paddingRight: theme.space[SIZE_PADDING_KEY.small], + gap: theme.space[SIZE_GAP_KEY.small], + ...sharedSizeStyled, + }, + xsmall: { + height: theme.sizing[SIZE_HEIGHT.xsmall], + paddingLeft: theme.space[SIZE_PADDING_KEY.xsmall], + paddingRight: theme.space[SIZE_PADDING_KEY.xsmall], + gap: theme.space[SIZE_GAP_KEY.xsmall], + ...sharedSizeStyled, + }, + }, + fullWidth: { + true: { + width: '100%', + }, + false: { + width: 'auto', + }, + }, + sentiment: { + primary: {}, + secondary: {}, + danger: {}, + info: {}, + success: {}, + warning: {}, + neutral: {}, + black: {}, + white: {}, + }, + variant: { + filled: {}, + outlined: {}, + ghost: {}, + }, + disabled: { + true: { + cursor: 'not-allowed', + }, + false: { + cursor: 'pointer', + }, + }, + }, + compoundVariants: [ + ...sentiments.map(sentiment => ({ + variants: { variant: 'filled' as const, sentiment }, + style: getFilledStyle(sentiment), + })), + ...sentiments.map(sentiment => ({ + variants: { variant: 'outlined' as const, sentiment }, + style: getOutlinedStyle(sentiment), + })), + ...sentiments.map(sentiment => ({ + variants: { variant: 'ghost' as const, sentiment }, + style: getGhostStyle(sentiment), + })), + ], + defaultVariants: { + size: 'large', + fullWidth: false, + disabled: false, + variant: 'filled', + sentiment: 'primary', + }, +}) + +export type ButtonVariants = NonNullable> diff --git a/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap index 4fade6b0f2..7ad97f086a 100644 --- a/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/CopyButton/__tests__/__snapshots__/index.test.tsx.snap @@ -15,65 +15,6 @@ exports[`copyButton > renders correctly 1`] = ` } .emotion-2 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #641cb3; -} - -.emotion-2:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-2:active { - box-shadow: 0px 0px 0px 3px #8c40ef40; -} - -.emotion-2 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-2:hover, -.emotion-2:active { - background: #e5dbfd; - color: #521094; -} - -.emotion-4 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -82,7 +23,7 @@ exports[`copyButton > renders correctly 1`] = ` min-height: 1rem; } -.emotion-4 .fillStroke { +.emotion-2 .fillStroke { stroke: currentColor; fill: none; } @@ -99,11 +40,11 @@ exports[`copyButton > renders correctly 1`] = ` >
 1995
December 1995

Mo

Tu

We

Th

Fr

Sa

Su

enero 2021

lu

ma

mi

ju

vi

sá

do

janvier 2021

lu

ma

me

je

ve

sa

di

январь 2021

по

вт

ср

че

пя

су

во

January 2021

Mo

Tu

We

Th

Fr

Sa

Su

January 2021

Mo

Tu

We

Th

Fr

Sa

Su

... ...
... ...
...
...
...

click on expand / collapse button 1`] = ` } .emotion-94 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-94:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-94:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-94 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-94:hover, -.emotion-94:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-94 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-94:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-94:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-94 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-94:hover, -.emotion-94:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-96 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -1561,12 +1443,12 @@ exports[`navigation > click on expand / collapse button 1`] = ` min-height: 1rem; } -.emotion-96 .fillStroke { +.emotion-94 .fillStroke { stroke: currentColor; fill: none; } -.emotion-96 { +.emotion-94 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -1575,12 +1457,12 @@ exports[`navigation > click on expand / collapse button 1`] = ` min-height: 1rem; } -.emotion-96 .fillStroke { +.emotion-94 .fillStroke { stroke: currentColor; fill: none; } -.emotion-98 { +.emotion-96 { background: transparent; position: absolute; top: 0; @@ -1595,11 +1477,11 @@ exports[`navigation > click on expand / collapse button 1`] = ` display: flex; } -.emotion-98:hover { +.emotion-96:hover { border-color: #8c40ef; } -.emotion-98 { +.emotion-96 { background: transparent; position: absolute; top: 0; @@ -1614,7 +1496,7 @@ exports[`navigation > click on expand / collapse button 1`] = ` display: flex; } -.emotion-98:hover { +.emotion-96:hover { border-color: #8c40ef; } @@ -1929,11 +1811,11 @@ exports[`navigation > click on expand / collapse button 1`] = ` >

Mercury 0.307AU 0.467AU Venus 0.718AU 0.728AU Earth 0.983AU 1.017AU Mars 1.381AU 1.666AU Jupiter 4.951AU 5.457AU Saturn 9.041AU 10.124AU Uranus 18.286AU 20.097AU Neptune 29.81AU 30.33AU Mercury 0.307AU 0.467AU

text

@@ -3546,12 +3428,12 @@ exports[`offerList > should work with banner 1`] = ` > 		Venus 0.718AU 0.728AU

text

@@ -3656,12 +3538,12 @@ exports[`offerList > should work with banner 1`] = ` > 		Earth 0.983AU 1.017AU

text

@@ -3766,12 +3648,12 @@ exports[`offerList > should work with banner 1`] = ` > 		Mars 1.381AU 1.666AU

text

@@ -3876,12 +3758,12 @@ exports[`offerList > should work with banner 1`] = ` > 		Jupiter 4.951AU 5.457AU

text

@@ -3986,12 +3868,12 @@ exports[`offerList > should work with banner 1`] = ` > 		Saturn 9.041AU 10.124AU

text

@@ -4096,12 +3978,12 @@ exports[`offerList > should work with banner 1`] = ` > 		Uranus 18.286AU 20.097AU

text

@@ -4206,12 +4088,12 @@ exports[`offerList > should work with banner 1`] = ` > 		Neptune 29.81AU 30.33AU

text

@@ -4409,7 +4291,7 @@ exports[`offerList > should work with banner open 1`] = ` border-color: #8c40ef; } -.emotion-28:not([aria-disabled='true']):hover+.emotion-64 td { +.emotion-28:not([aria-disabled='true']):hover+.emotion-62 td { border-color: #8c40ef; } @@ -4644,65 +4526,6 @@ exports[`offerList > should work with banner open 1`] = ` } .emotion-50 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-50:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-50:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-50 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-50:hover, -.emotion-50:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-52 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -4711,12 +4534,12 @@ exports[`offerList > should work with banner open 1`] = ` min-height: 1rem; } -.emotion-52 .fillStroke { +.emotion-50 .fillStroke { stroke: currentColor; fill: none; } -.emotion-55 { +.emotion-53 { display: table-cell; vertical-align: middle; height: 3.75rem; @@ -4724,7 +4547,7 @@ exports[`offerList > should work with banner open 1`] = ` white-space: pre-line; } -.emotion-63 { +.emotion-61 { width: 100%; display: table-row; vertical-align: middle; @@ -4738,24 +4561,24 @@ exports[`offerList > should work with banner open 1`] = ` position: relative; } -.emotion-63 td, -.emotion-63 td:first-child, -.emotion-63 td:last-child { +.emotion-61 td, +.emotion-61 td:first-child, +.emotion-61 td:last-child { -webkit-transition: box-shadow 200ms ease,border-color 200ms ease; transition: box-shadow 200ms ease,border-color 200ms ease; } -.emotion-63 td { +.emotion-61 td { border: 1px solid #d9dadd; border-top: none; border-radius: 0 0 0.25rem 0.25rem; } -.emotion-63[data-highlight="true"] td { +.emotion-61[data-highlight="true"] td { border-color: #8c40ef; } -.emotion-66 { +.emotion-64 { display: table-cell; vertical-align: middle; height: 3.75rem; @@ -4763,11 +4586,11 @@ exports[`offerList > should work with banner open 1`] = ` padding: 0rem; } -.emotion-68 { +.emotion-66 { padding: 1.5rem; } -.emotion-70 { +.emotion-68 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -4798,11 +4621,11 @@ exports[`offerList > should work with banner open 1`] = ` padding-inline: 0.5rem; } -.emotion-70[aria-disabled="true"] { +.emotion-68[aria-disabled="true"] { background-color: #f3f3f4; } -.emotion-72 { +.emotion-70 { color: #b3144d; font-size: 0.75rem; font-family: Inter,sans-serif; @@ -4941,12 +4764,12 @@ exports[`offerList > should work with banner open 1`] = ` > 		Mercury 0.307AU 0.467AU
text

text

@@ -5064,12 +4887,12 @@ exports[`offerList > should work with banner open 1`] = ` >
Venus 0.718AU 0.728AU
text

text

@@ -5187,12 +5010,12 @@ exports[`offerList > should work with banner open 1`] = ` >
Earth 0.983AU 1.017AU
text

text

@@ -5310,12 +5133,12 @@ exports[`offerList > should work with banner open 1`] = ` >
Mars 1.381AU 1.666AU
text

text

@@ -5433,12 +5256,12 @@ exports[`offerList > should work with banner open 1`] = ` >
Jupiter 4.951AU 5.457AU
text

text

@@ -5556,12 +5379,12 @@ exports[`offerList > should work with banner open 1`] = ` >
Saturn 9.041AU 10.124AU
text

text

@@ -5679,12 +5502,12 @@ exports[`offerList > should work with banner open 1`] = ` >
Uranus 18.286AU 20.097AU
text

text

@@ -5802,12 +5625,12 @@ exports[`offerList > should work with banner open 1`] = ` >
Neptune 29.81AU 30.33AU
text

text

@@ -7641,124 +7464,6 @@ exports[`offerList > should work with expandable 1`] = ` } .emotion-50 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-50:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-50:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-50 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-50:hover, -.emotion-50:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-50 { - display: -webkit-inline-box; - display: -webkit-inline-flex; - display: -ms-inline-flexbox; - display: inline-flex; - position: relative; - height: 2rem; - padding: 0 0.5rem; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - gap: 0.5rem; - border-radius: 0.25rem; - box-sizing: border-box; - width: auto; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: pointer; - -webkit-box-pack: center; - -ms-flex-pack: center; - -webkit-justify-content: center; - justify-content: center; - outline-offset: 2px; - white-space: nowrap; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 0.875rem; - font-family: Inter,sans-serif; - font-weight: 500; - letter-spacing: 0; - line-height: 1.25rem; - paragraph-spacing: 0; - text-case: none; - background: none; - border: none; - color: #3f4250; -} - -.emotion-50:hover { - -webkit-text-decoration: none; - text-decoration: none; -} - -.emotion-50:active { - box-shadow: 0px 0px 0px 3px #151a2d5c; -} - -.emotion-50 .e1y1n78x0 { - stroke: transparent; -} - -.emotion-50:hover, -.emotion-50:active { - background: #e9eaeb; - color: #222638; -} - -.emotion-52 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -7767,12 +7472,12 @@ exports[`offerList > should work with expandable 1`] = ` min-height: 1rem; } -.emotion-52 .fillStroke { +.emotion-50 .fillStroke { stroke: currentColor; fill: none; } -.emotion-52 { +.emotion-50 { vertical-align: middle; fill: currentColor; height: 1rem; @@ -7781,12 +7486,12 @@ exports[`offerList > should work with expandable 1`] = ` min-height: 1rem; } -.emotion-52 .fillStroke { +.emotion-50 .fillStroke { stroke: currentColor; fill: none; } -.emotion-55 { +.emotion-53 { display: table-cell; vertical-align: middle; height: 3.75rem; @@ -7794,7 +7499,7 @@ exports[`offerList > should work with expandable 1`] = ` white-space: pre-line; } -.emotion-55 { +.emotion-53 { display: table-cell; vertical-align: middle; height: 3.75rem; @@ -7928,12 +7633,12 @@ exports[`offerList > should work with expandable 1`] = ` >
Mercury 0.307AU 0.467AU Venus 0.718AU 0.728AU Earth 0.983AU 1.017AU Mars 1.381AU 1.666AU Jupiter 4.951AU 5.457AU Saturn 9.041AU 10.124AU Uranus 18.286AU 20.097AU Neptune 29.81AU 30.33AU

render basic props with overlay beta 1`]

render basic props with overlay beta 1`]
render basic props with overlay beta 1`]

This is a regular Item 1

This is a regular Item 2
@@ -8616,15 +8570,15 @@ exports[`estimateCost - Regular Item > render basic props with overlay beta 1`]

€0.00 - €0.10

€0.001/GB/hour(s)

@@ -8635,31 +8589,31 @@ exports[`estimateCost - Regular Item > render basic props with overlay beta 1`]
Free During Beta

render basic props with sublabel 1`] = ` class="emotion-55 emotion-56" data-size="medium" data-testid="unit-input" - id="_r_3c_" + id="«r3c»" max="9007199254740991" min="1" name="iteration-value" @@ -9737,8 +9691,8 @@ exports[`estimateCost - Regular Item > render basic props with sublabel 1`] = ` class="emotion-57 emotion-58 emotion-59" >
render basic props with sublabel 1`] = ` class="emotion-62 emotion-1" >