From d6511aa560f4ad523619cc49d8d041b93b3d960b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Tue, 23 Jan 2024 09:13:59 +0000 Subject: [PATCH 01/55] Decrease viewport width at which the ButtonGroup wraps (#2399) --- packages/circuit-ui/components/Button/base.module.css | 2 +- .../circuit-ui/components/ButtonGroup/ButtonGroup.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/circuit-ui/components/Button/base.module.css b/packages/circuit-ui/components/Button/base.module.css index cf69163df7..2ca512042c 100644 --- a/packages/circuit-ui/components/Button/base.module.css +++ b/packages/circuit-ui/components/Button/base.module.css @@ -343,7 +343,7 @@ } } -@container cui-button-group (width > 420px) { +@container cui-button-group (width > 370px) { /* Keep in sync with the .secondary class above */ .tertiary { color: var(--cui-fg-normal); diff --git a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css index cea3e959f5..a51a5f7bb1 100644 --- a/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css +++ b/packages/circuit-ui/components/ButtonGroup/ButtonGroup.module.css @@ -13,7 +13,7 @@ margin-top: var(--cui-spacings-kilo); } -@container cui-button-group (width > 420px) { +@container cui-button-group (width > 370px) { .base { flex-direction: row-reverse; } From d3a85a93684321b04c363efcd3fbc23631309e9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Tue, 23 Jan 2024 17:11:10 +0000 Subject: [PATCH 02/55] Fix scroll-lock caused by modal (#2403) --- .changeset/loud-penguins-type.md | 5 +++ .../components/ModalContext/ModalContext.tsx | 32 ++++++++++++++----- 2 files changed, 29 insertions(+), 8 deletions(-) create mode 100644 .changeset/loud-penguins-type.md diff --git a/.changeset/loud-penguins-type.md b/.changeset/loud-penguins-type.md new file mode 100644 index 0000000000..f59f8ee480 --- /dev/null +++ b/.changeset/loud-penguins-type.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Fixed a bug where users were unable to scroll after a modal was mounted and immediately unmounted. diff --git a/packages/circuit-ui/components/ModalContext/ModalContext.tsx b/packages/circuit-ui/components/ModalContext/ModalContext.tsx index 00f34de6ee..d4e1fcb46a 100644 --- a/packages/circuit-ui/components/ModalContext/ModalContext.tsx +++ b/packages/circuit-ui/components/ModalContext/ModalContext.tsx @@ -28,18 +28,30 @@ import { warn } from '../../util/logger.js'; import { BaseModalProps, ModalComponent } from './types.js'; import './Modal.css'; +const PORTAL_CLASS_NAME = 'cui-modal-portal'; +const HTML_OPEN_CLASS_NAME = 'cui-modal-open'; +// These are the default app element ids in Next.js, Docusaurus, CRA and Storybook. +const APP_ELEMENT_IDS = ['root', '__next', '__docusaurus', 'storybook-root']; + +function getAppElement(): HTMLElement | null { + // eslint-disable-next-line no-restricted-syntax + for (const id of APP_ELEMENT_IDS) { + const element = document.getElementById(id); + + if (element) { + return element; + } + } + return null; +} + // It is important for users of screen readers that other page content be hidden // (via the `aria-hidden` attribute) while the modal is open. // To allow react-modal to do this, Circuit UI calls `Modal.setAppElement` // with a query selector identifying the root of the app. // http://reactcommunity.org/react-modal/accessibility/#app-element if (typeof window !== 'undefined') { - // These are the default app elements in Next.js, Docusaurus, CRA and Storybook. - const appElement = - document.getElementById('__next') || - document.getElementById('__docusaurus') || - document.getElementById('root') || - document.getElementById('storybook-root'); + const appElement = getAppElement(); if (appElement) { ReactModal.setAppElement(appElement); @@ -119,6 +131,10 @@ export function ModalProvider({ useEffect(() => { if (!activeModal) { + // Clean up after react-modal in case it fails to do so itself + // https://github.com/reactjs/react-modal/issues/888#issuecomment-1158061329 + document.documentElement.classList.remove(HTML_OPEN_CLASS_NAME); + getAppElement()?.removeAttribute('aria-hidden'); return undefined; } @@ -159,8 +175,8 @@ export function ModalProvider({ key={id} isOpen={!transition} onClose={() => removeModal(modal)} - portalClassName="cui-modal-portal" - htmlOpenClassName="cui-modal-open" + portalClassName={PORTAL_CLASS_NAME} + htmlOpenClassName={HTML_OPEN_CLASS_NAME} bodyOpenClassName="" /> ); From 07c0da37218cd3d5462e974062cee7237674bc40 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Tue, 23 Jan 2024 17:21:40 +0000 Subject: [PATCH 03/55] Version Packages (#2392) Co-authored-by: github-actions[bot] --- .changeset/loud-penguins-type.md | 5 ----- .changeset/pretty-buttons-fold.md | 5 ----- packages/circuit-ui/CHANGELOG.md | 8 ++++++++ packages/circuit-ui/package.json | 2 +- 4 files changed, 9 insertions(+), 11 deletions(-) delete mode 100644 .changeset/loud-penguins-type.md delete mode 100644 .changeset/pretty-buttons-fold.md diff --git a/.changeset/loud-penguins-type.md b/.changeset/loud-penguins-type.md deleted file mode 100644 index f59f8ee480..0000000000 --- a/.changeset/loud-penguins-type.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': patch ---- - -Fixed a bug where users were unable to scroll after a modal was mounted and immediately unmounted. diff --git a/.changeset/pretty-buttons-fold.md b/.changeset/pretty-buttons-fold.md deleted file mode 100644 index c23b5f675e..0000000000 --- a/.changeset/pretty-buttons-fold.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': patch ---- - -Resolved deprecation warnings in the Carousel component. diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index e37959e9c4..67c59cb531 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,5 +1,13 @@ # @sumup/circuit-ui +## 8.1.2 + +### Patch Changes + +- [#2403](https://github.com/sumup-oss/circuit-ui/pull/2403) [`d3a85a9`](https://github.com/sumup-oss/circuit-ui/commit/d3a85a93684321b04c363efcd3fbc23631309e9b) Thanks [@connor-baer](https://github.com/connor-baer)! - Fixed a bug where users were unable to scroll after a modal was mounted and immediately unmounted. + +- [#2391](https://github.com/sumup-oss/circuit-ui/pull/2391) [`9f57d45`](https://github.com/sumup-oss/circuit-ui/commit/9f57d453e962eecf3935a339a6cfb54ff2080b25) Thanks [@connor-baer](https://github.com/connor-baer)! - Resolved deprecation warnings in the Carousel component. + ## 8.1.1 ### Patch Changes diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 0166bc9f51..7362a9a27f 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/circuit-ui", - "version": "8.1.1", + "version": "8.1.2", "description": "SumUp's React UI component library", "type": "module", "main": "./dist/index.js", From a20ff415f6c1625f7ff8c3ca3b76bbe4d737e62a Mon Sep 17 00:00:00 2001 From: Hamouda Arfaoui Date: Thu, 25 Jan 2024 13:50:20 +0100 Subject: [PATCH 04/55] Add Loja icon (#2407) * commited loja icon x24 x16 * remove x16 loja icon * applied changeset --- .changeset/few-kids-appear.md | 5 +++++ packages/icons/manifest.json | 5 +++++ packages/icons/web/v2/loja_24.svg | 3 +++ 3 files changed, 13 insertions(+) create mode 100644 .changeset/few-kids-appear.md create mode 100644 packages/icons/web/v2/loja_24.svg diff --git a/.changeset/few-kids-appear.md b/.changeset/few-kids-appear.md new file mode 100644 index 0000000000..c507f470fc --- /dev/null +++ b/.changeset/few-kids-appear.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Added new icon in size 24 `Loja` diff --git a/packages/icons/manifest.json b/packages/icons/manifest.json index 7fa8613544..c75b6a6454 100644 --- a/packages/icons/manifest.json +++ b/packages/icons/manifest.json @@ -1106,6 +1106,11 @@ "category": "Miscellaneous", "size": "24" }, + { + "name": "loja", + "category": "Product and feature", + "size": "24" + }, { "name": "mcc", "category": "Miscellaneous", diff --git a/packages/icons/web/v2/loja_24.svg b/packages/icons/web/v2/loja_24.svg new file mode 100644 index 0000000000..c9b3610be1 --- /dev/null +++ b/packages/icons/web/v2/loja_24.svg @@ -0,0 +1,3 @@ + + + From 806fc455d8117902290ce32fece4567c0988dd78 Mon Sep 17 00:00:00 2001 From: Hamouda Arfaoui Date: Thu, 25 Jan 2024 13:52:59 +0100 Subject: [PATCH 05/55] Update the Reports icon (#2408) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * updated reports icon * updated reports icon * added changeset * Update .changeset/dirty-carrots-boil.md --------- Co-authored-by: Connor Bär --- .changeset/dirty-carrots-boil.md | 5 +++++ packages/icons/web/v2/reports_24.svg | 5 +++-- 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 .changeset/dirty-carrots-boil.md diff --git a/.changeset/dirty-carrots-boil.md b/.changeset/dirty-carrots-boil.md new file mode 100644 index 0000000000..9cb470a2bb --- /dev/null +++ b/.changeset/dirty-carrots-boil.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Changed the shape of the `Reports` icon. diff --git a/packages/icons/web/v2/reports_24.svg b/packages/icons/web/v2/reports_24.svg index 1e06bec914..755ea14b54 100644 --- a/packages/icons/web/v2/reports_24.svg +++ b/packages/icons/web/v2/reports_24.svg @@ -1,3 +1,4 @@ - - + + + From 549ddbe3f6a45036426e446cefafed9928acc3bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 25 Jan 2024 13:58:45 +0000 Subject: [PATCH 06/55] Sync icons with Figma (#2375) --- .changeset/clever-eagles-brush.md | 5 + .changeset/cyan-cougars-smash.md | 5 + .changeset/dirty-carrots-boil.md | 5 - .changeset/few-kids-appear.md | 5 - .changeset/metal-windows-play.md | 5 + .storybook/components/Icons.tsx | 1 - packages/icons/manifest.json | 339 +++++++++++++++++- packages/icons/web/v2/account_24.svg | 4 +- packages/icons/web/v2/accounting_24.svg | 6 + packages/icons/web/v2/activate_card_24.svg | 11 + packages/icons/web/v2/add_16.svg | 5 + packages/icons/web/v2/alarm_24.svg | 5 + .../web/v2/alternative_payment_method_32.svg | 32 ++ packages/icons/web/v2/apps_24.svg | 14 + packages/icons/web/v2/area_24.svg | 8 + packages/icons/web/v2/arrow_slanted_24.svg | 5 + packages/icons/web/v2/article_24.svg | 5 + packages/icons/web/v2/barcode_16.svg | 7 + packages/icons/web/v2/bluetooth_16.svg | 7 + packages/icons/web/v2/bluetooth_24.svg | 5 + packages/icons/web/v2/callback_24.svg | 8 + packages/icons/web/v2/camera_24.svg | 5 + packages/icons/web/v2/card_in_24.svg | 11 + packages/icons/web/v2/card_out_24.svg | 11 + packages/icons/web/v2/checkmark_24.svg | 5 + packages/icons/web/v2/cheque_24.svg | 5 + packages/icons/web/v2/contact_picker_24.svg | 5 + .../icons/web/v2/cookie_preferences_24.svg | 3 + packages/icons/web/v2/custom_amount_24.svg | 30 ++ packages/icons/web/v2/direct_debit_24.svg | 11 + packages/icons/web/v2/discount_24.svg | 13 +- packages/icons/web/v2/fees_summary_24.svg | 4 + packages/icons/web/v2/filter_applied_16.svg | 14 + packages/icons/web/v2/filter_applied_24.svg | 16 + packages/icons/web/v2/flag_sl_16.svg | 11 - packages/icons/web/v2/flash_off_24.svg | 3 + packages/icons/web/v2/flashlight_24.svg | 5 + packages/icons/web/v2/freeze_24.svg | 5 + packages/icons/web/v2/general_settings_24.svg | 5 + packages/icons/web/v2/id_24.svg | 5 + packages/icons/web/v2/insurance_24.svg | 3 + packages/icons/web/v2/inventory_24.svg | 14 + packages/icons/web/v2/items_24.svg | 12 +- packages/icons/web/v2/key_24.svg | 8 + packages/icons/web/v2/meal_voucher_24.svg | 5 + packages/icons/web/v2/online_payments_24.svg | 9 + packages/icons/web/v2/orders_24.svg | 8 + packages/icons/web/v2/pay_pal_24.svg | 35 ++ packages/icons/web/v2/payout_settings_24.svg | 11 + packages/icons/web/v2/payouts_24.svg | 10 +- packages/icons/web/v2/percentage_16.svg | 11 + packages/icons/web/v2/percentage_24.svg | 5 + packages/icons/web/v2/qr_code_24.svg | 4 +- packages/icons/web/v2/random_24.svg | 11 + packages/icons/web/v2/receipt_attached_24.svg | 8 + packages/icons/web/v2/receipt_missing_24.svg | 5 + packages/icons/web/v2/refer_a_friend_24.svg | 12 + packages/icons/web/v2/reports_24.svg | 10 +- packages/icons/web/v2/sales_24.svg | 4 +- packages/icons/web/v2/send_16.svg | 5 + packages/icons/web/v2/sort_16.svg | 8 + packages/icons/web/v2/sort_24.svg | 8 + packages/icons/web/v2/store_editor_24.svg | 12 + packages/icons/web/v2/sum_up_connect_24.svg | 3 + packages/icons/web/v2/support_16.svg | 3 + packages/icons/web/v2/tap_to_pay_24.svg | 11 + packages/icons/web/v2/taxes_24.svg | 7 +- packages/icons/web/v2/time_16.svg | 5 + packages/icons/web/v2/transactions_24.svg | 5 + packages/icons/web/v2/transit_24.svg | 5 + packages/icons/web/v2/twitter_24.svg | 4 +- packages/icons/web/v2/unfavorite_24.svg | 8 + packages/icons/web/v2/view_16.svg | 8 + packages/icons/web/v2/webspace_24.svg | 8 + packages/icons/web/v2/whats_app_24.svg | 3 + packages/icons/web/v2/wire_transfer_24.svg | 32 ++ 76 files changed, 931 insertions(+), 43 deletions(-) create mode 100644 .changeset/clever-eagles-brush.md create mode 100644 .changeset/cyan-cougars-smash.md delete mode 100644 .changeset/dirty-carrots-boil.md delete mode 100644 .changeset/few-kids-appear.md create mode 100644 .changeset/metal-windows-play.md create mode 100644 packages/icons/web/v2/accounting_24.svg create mode 100644 packages/icons/web/v2/activate_card_24.svg create mode 100644 packages/icons/web/v2/add_16.svg create mode 100644 packages/icons/web/v2/alarm_24.svg create mode 100644 packages/icons/web/v2/alternative_payment_method_32.svg create mode 100644 packages/icons/web/v2/apps_24.svg create mode 100644 packages/icons/web/v2/area_24.svg create mode 100644 packages/icons/web/v2/arrow_slanted_24.svg create mode 100644 packages/icons/web/v2/article_24.svg create mode 100644 packages/icons/web/v2/barcode_16.svg create mode 100644 packages/icons/web/v2/bluetooth_16.svg create mode 100644 packages/icons/web/v2/bluetooth_24.svg create mode 100644 packages/icons/web/v2/callback_24.svg create mode 100644 packages/icons/web/v2/camera_24.svg create mode 100644 packages/icons/web/v2/card_in_24.svg create mode 100644 packages/icons/web/v2/card_out_24.svg create mode 100644 packages/icons/web/v2/checkmark_24.svg create mode 100644 packages/icons/web/v2/cheque_24.svg create mode 100644 packages/icons/web/v2/contact_picker_24.svg create mode 100644 packages/icons/web/v2/cookie_preferences_24.svg create mode 100644 packages/icons/web/v2/custom_amount_24.svg create mode 100644 packages/icons/web/v2/direct_debit_24.svg create mode 100644 packages/icons/web/v2/fees_summary_24.svg create mode 100644 packages/icons/web/v2/filter_applied_16.svg create mode 100644 packages/icons/web/v2/filter_applied_24.svg delete mode 100644 packages/icons/web/v2/flag_sl_16.svg create mode 100644 packages/icons/web/v2/flash_off_24.svg create mode 100644 packages/icons/web/v2/flashlight_24.svg create mode 100644 packages/icons/web/v2/freeze_24.svg create mode 100644 packages/icons/web/v2/general_settings_24.svg create mode 100644 packages/icons/web/v2/id_24.svg create mode 100644 packages/icons/web/v2/insurance_24.svg create mode 100644 packages/icons/web/v2/inventory_24.svg create mode 100644 packages/icons/web/v2/key_24.svg create mode 100644 packages/icons/web/v2/meal_voucher_24.svg create mode 100644 packages/icons/web/v2/online_payments_24.svg create mode 100644 packages/icons/web/v2/orders_24.svg create mode 100644 packages/icons/web/v2/pay_pal_24.svg create mode 100644 packages/icons/web/v2/payout_settings_24.svg create mode 100644 packages/icons/web/v2/percentage_16.svg create mode 100644 packages/icons/web/v2/percentage_24.svg create mode 100644 packages/icons/web/v2/random_24.svg create mode 100644 packages/icons/web/v2/receipt_attached_24.svg create mode 100644 packages/icons/web/v2/receipt_missing_24.svg create mode 100644 packages/icons/web/v2/refer_a_friend_24.svg create mode 100644 packages/icons/web/v2/send_16.svg create mode 100644 packages/icons/web/v2/sort_16.svg create mode 100644 packages/icons/web/v2/sort_24.svg create mode 100644 packages/icons/web/v2/store_editor_24.svg create mode 100644 packages/icons/web/v2/sum_up_connect_24.svg create mode 100644 packages/icons/web/v2/support_16.svg create mode 100644 packages/icons/web/v2/tap_to_pay_24.svg create mode 100644 packages/icons/web/v2/time_16.svg create mode 100644 packages/icons/web/v2/transactions_24.svg create mode 100644 packages/icons/web/v2/transit_24.svg create mode 100644 packages/icons/web/v2/unfavorite_24.svg create mode 100644 packages/icons/web/v2/view_16.svg create mode 100644 packages/icons/web/v2/webspace_24.svg create mode 100644 packages/icons/web/v2/whats_app_24.svg create mode 100644 packages/icons/web/v2/wire_transfer_24.svg diff --git a/.changeset/clever-eagles-brush.md b/.changeset/clever-eagles-brush.md new file mode 100644 index 0000000000..85b8ccbafc --- /dev/null +++ b/.changeset/clever-eagles-brush.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Removed the incorrect `FlagSl` icon. Use the `FlagSi` icon instead. diff --git a/.changeset/cyan-cougars-smash.md b/.changeset/cyan-cougars-smash.md new file mode 100644 index 0000000000..98d7f0c3c2 --- /dev/null +++ b/.changeset/cyan-cougars-smash.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': major +--- + +Updated the `Account` (24px), `Discount` (24px), `Payouts` (24px), `QrCode` (24px), `Reports` (24px), `Sales` (24px), `Taxes` (24px), and `Twitter` (24px) icons. diff --git a/.changeset/dirty-carrots-boil.md b/.changeset/dirty-carrots-boil.md deleted file mode 100644 index 9cb470a2bb..0000000000 --- a/.changeset/dirty-carrots-boil.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Changed the shape of the `Reports` icon. diff --git a/.changeset/few-kids-appear.md b/.changeset/few-kids-appear.md deleted file mode 100644 index c507f470fc..0000000000 --- a/.changeset/few-kids-appear.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Added new icon in size 24 `Loja` diff --git a/.changeset/metal-windows-play.md b/.changeset/metal-windows-play.md new file mode 100644 index 0000000000..465b0d3af2 --- /dev/null +++ b/.changeset/metal-windows-play.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Added the `Accounting` (24px), `ActivateCard` (24px), `Add` (24px), `Alarm` (24px), `AlternativePaymentMethod` (32px), `Apps` (24px), `Area` (24px), `ArrowSlanted` (24px), `Article` (24px), `Barcode` (16px), `Bluetooth` (16px & 24px), `Callback` (24px), `Camera` (24px), `CardIn` (24px), `CardOut` (24px), `Checkmark` (24px), `Cheque` (24px), `ContactPicker` (24px), `CookiePreferences` (24px), `CustomAmount` (24px), `DirectDebit` (24px), `FeesSummary` (24px), `FilterApplied` (16px & 24px), `FlashOff` (24px), `Flashlight` (24px), `Freeze` (24px), `GeneralSettings` (24px), `Id` (24px), `Insurance` (24px), `Inventory` (24px), `Key` (24px), `Loja` (24px), `MealVoucher` (24px), `OnlinePayments` (24px), `Orders` (24px), `PayPal` (24px), `PayoutSettings` (24px), `Percentage` (16px & 24px), `Random` (24px), `ReceiptAttached` (24px), `ReceiptMissing` (24px), `ReferAFriend` (24px), `Send` (16px), `Sort` (16px & 24px), `StoreEditor` (24px), `SumUpConnect` (24px), `Support` (16px), `TapToPay` (24px), `Time` (16px), `Transactions` (24px), `Transit` (24px), `Unfavorite` (24px), `View` (16px), `Webspace` (24px), `WhatsApp` (24px), and `WireTransfer` (24px) icons. diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx index 157efc72e6..0a10d04566 100644 --- a/.storybook/components/Icons.tsx +++ b/.storybook/components/Icons.tsx @@ -81,7 +81,6 @@ const Icons = () => { { label: '16', value: '16' }, { label: '24', value: '24' }, { label: '32', value: '32' }, - { label: '48', value: '48' }, ]; const colorOptions = [ diff --git a/packages/icons/manifest.json b/packages/icons/manifest.json index c75b6a6454..053795fe21 100644 --- a/packages/icons/manifest.json +++ b/packages/icons/manifest.json @@ -5,6 +5,11 @@ "category": "Action", "size": "24" }, + { + "name": "add", + "category": "Action", + "size": "16" + }, { "name": "add_employees", "category": "Action", @@ -126,16 +131,41 @@ "category": "Action", "size": "16" }, + { + "name": "filter_applied", + "category": "Action", + "size": "24" + }, + { + "name": "filter_applied", + "category": "Action", + "size": "16" + }, + { + "name": "flash_off", + "category": "Action", + "size": "24" + }, { "name": "flash_on", "category": "Action", "size": "24" }, + { + "name": "flashlight", + "category": "Action", + "size": "24" + }, { "name": "flip_camera", "category": "Action", "size": "24" }, + { + "name": "freeze", + "category": "Action", + "size": "24" + }, { "name": "hide", "category": "Action", @@ -206,6 +236,11 @@ "category": "Action", "size": "16" }, + { + "name": "random", + "category": "Action", + "size": "24" + }, { "name": "refresh", "category": "Action", @@ -241,6 +276,11 @@ "category": "Action", "size": "24" }, + { + "name": "send", + "category": "Action", + "size": "16" + }, { "name": "share", "category": "Action", @@ -251,6 +291,16 @@ "category": "Action", "size": "16" }, + { + "name": "sort", + "category": "Action", + "size": "24" + }, + { + "name": "sort", + "category": "Action", + "size": "16" + }, { "name": "stop", "category": "Action", @@ -281,6 +331,16 @@ "category": "Action", "size": "24" }, + { + "name": "view", + "category": "Action", + "size": "16" + }, + { + "name": "callback", + "category": "Communication", + "size": "24" + }, { "name": "email_chat", "category": "Communication", @@ -441,6 +501,11 @@ "category": "Payment method", "size": "24" }, + { + "name": "pay_pal", + "category": "Payment method", + "size": "24" + }, { "name": "pix_full", "category": "Payment method", @@ -526,6 +591,11 @@ "category": "Card scheme", "size": "32" }, + { + "name": "alternative_payment_method", + "category": "Card scheme", + "size": "32" + }, { "name": "american_express", "category": "Card scheme", @@ -664,198 +734,246 @@ { "name": "flag_ar", "category": "Country flag", + "keywords": ["Argentina"], "size": "16" }, { "name": "flag_at", "category": "Country flag", + "keywords": ["Austria"], "size": "16" }, { "name": "flag_au", "category": "Country flag", + "keywords": ["Australia"], "size": "16" }, { "name": "flag_be", "category": "Country flag", + "keywords": ["Belgium"], "size": "16" }, { "name": "flag_bg", "category": "Country flag", + "keywords": ["Bulgaria"], "size": "16" }, { "name": "flag_br", "category": "Country flag", + "keywords": ["Brazil"], "size": "16" }, { "name": "flag_ca", "category": "Country flag", + "keywords": ["Canada"], "size": "16" }, { "name": "flag_ch", "category": "Country flag", + "keywords": ["Switzerland"], "size": "16" }, { "name": "flag_cl", "category": "Country flag", + "keywords": ["Chile"], "size": "16" }, { "name": "flag_co", "category": "Country flag", + "keywords": ["Colombia"], "size": "16" }, { "name": "flag_cy", "category": "Country flag", + "keywords": ["Cypress"], "size": "16" }, { "name": "flag_cz", "category": "Country flag", + "keywords": ["Czech Republic"], "size": "16" }, { "name": "flag_de", "category": "Country flag", + "keywords": ["Germany"], "size": "16" }, { "name": "flag_dk", "category": "Country flag", + "keywords": ["Denmark"], "size": "16" }, { "name": "flag_ee", "category": "Country flag", + "keywords": ["Estonia"], "size": "16" }, { "name": "flag_es", "category": "Country flag", + "keywords": ["Spain"], "size": "16" }, { "name": "flag_fi", "category": "Country flag", + "keywords": ["Finland"], "size": "16" }, { "name": "flag_fr", "category": "Country flag", + "keywords": ["France"], "size": "16" }, { "name": "flag_gb", "category": "Country flag", + "keywords": ["Great Britain", "United Kingdom", "UK", "England"], "size": "16" }, { "name": "flag_gr", "category": "Country flag", + "keywords": ["Greece"], "size": "16" }, { "name": "flag_hr", "category": "Country flag", + "keywords": ["Croatia"], "size": "16" }, { "name": "flag_hu", "category": "Country flag", + "keywords": ["Hungary"], "size": "16" }, { "name": "flag_ie", "category": "Country flag", + "keywords": ["Ireland"], "size": "16" }, { "name": "flag_it", "category": "Country flag", + "keywords": ["Italy"], "size": "16" }, { "name": "flag_lt", "category": "Country flag", + "keywords": ["Lithuania"], "size": "16" }, { "name": "flag_lu", "category": "Country flag", + "keywords": ["Luxembourg"], "size": "16" }, { "name": "flag_lv", "category": "Country flag", + "keywords": ["Latvia"], "size": "16" }, { "name": "flag_mt", "category": "Country flag", + "keywords": ["Montenegro"], "size": "16" }, { "name": "flag_nl", "category": "Country flag", + "keywords": ["Netherlands"], "size": "16" }, { "name": "flag_no", "category": "Country flag", + "keywords": ["Norway"], "size": "16" }, { "name": "flag_pe", "category": "Country flag", + "keywords": ["Peru"], "size": "16" }, { "name": "flag_pl", "category": "Country flag", + "keywords": ["Poland"], "size": "16" }, { "name": "flag_pt", "category": "Country flag", + "keywords": ["Portugal"], "size": "16" }, { "name": "flag_ro", "category": "Country flag", + "keywords": ["Romania"], "size": "16" }, { "name": "flag_se", "category": "Country flag", + "keywords": ["Sweden"], "size": "16" }, { "name": "flag_si", "category": "Country flag", + "keywords": ["Slovenia"], "size": "16" }, { "name": "flag_sk", "category": "Country flag", + "keywords": ["Slovakia"], "size": "16" }, { - "name": "flag_sl", + "name": "flag_us", "category": "Country flag", + "keywords": ["United States of America", "USA"], "size": "16" }, { - "name": "flag_us", - "category": "Country flag", + "name": "bluetooth", + "category": "Device", + "size": "24" + }, + { + "name": "bluetooth", + "category": "Device", "size": "16" }, + { + "name": "camera", + "category": "Device", + "size": "24" + }, { "name": "card_reader_air", "category": "Device", @@ -926,6 +1044,11 @@ "category": "File", "size": "24" }, + { + "name": "fees_summary", + "category": "File", + "size": "24" + }, { "name": "file", "category": "File", @@ -951,6 +1074,11 @@ "category": "File", "size": "24" }, + { + "name": "activate_card", + "category": "Finance", + "size": "24" + }, { "name": "apm", "category": "Finance", @@ -976,6 +1104,16 @@ "category": "Finance", "size": "24" }, + { + "name": "card_in", + "category": "Finance", + "size": "24" + }, + { + "name": "card_out", + "category": "Finance", + "size": "24" + }, { "name": "cash", "category": "Finance", @@ -986,6 +1124,11 @@ "category": "Finance", "size": "24" }, + { + "name": "direct_debit", + "category": "Finance", + "size": "24" + }, { "name": "interest_on_balance", "category": "Finance", @@ -996,6 +1139,16 @@ "category": "Finance", "size": "24" }, + { + "name": "percentage", + "category": "Finance", + "size": "24" + }, + { + "name": "percentage", + "category": "Finance", + "size": "16" + }, { "name": "transfer_in", "category": "Finance", @@ -1006,11 +1159,31 @@ "category": "Finance", "size": "24" }, + { + "name": "alarm", + "category": "Miscellaneous", + "size": "24" + }, + { + "name": "area", + "category": "Miscellaneous", + "size": "24" + }, + { + "name": "article", + "category": "Miscellaneous", + "size": "24" + }, { "name": "barcode", "category": "Miscellaneous", "size": "24" }, + { + "name": "barcode", + "category": "Miscellaneous", + "size": "16" + }, { "name": "basket", "category": "Miscellaneous", @@ -1034,6 +1207,7 @@ { "name": "cafe", "category": "Miscellaneous", + "keywords": ["restaurant", "coffee"], "size": "24" }, { @@ -1041,11 +1215,21 @@ "category": "Miscellaneous", "size": "24" }, + { + "name": "checkmark", + "category": "Miscellaneous", + "size": "24" + }, { "name": "checkmark", "category": "Miscellaneous", "size": "16" }, + { + "name": "cheque", + "category": "Miscellaneous", + "size": "24" + }, { "name": "clothing", "category": "Miscellaneous", @@ -1056,6 +1240,16 @@ "category": "Miscellaneous", "size": "24" }, + { + "name": "cookie_preferences", + "category": "Miscellaneous", + "size": "24" + }, + { + "name": "custom_amount", + "category": "Miscellaneous", + "size": "24" + }, { "name": "customize", "category": "Miscellaneous", @@ -1091,6 +1285,16 @@ "category": "Miscellaneous", "size": "24" }, + { + "name": "id", + "category": "Miscellaneous", + "size": "24" + }, + { + "name": "key", + "category": "Miscellaneous", + "size": "24" + }, { "name": "legal", "category": "Miscellaneous", @@ -1107,12 +1311,12 @@ "size": "24" }, { - "name": "loja", - "category": "Product and feature", + "name": "mcc", + "category": "Miscellaneous", "size": "24" }, { - "name": "mcc", + "name": "meal_voucher", "category": "Miscellaneous", "size": "24" }, @@ -1196,11 +1400,21 @@ "category": "Miscellaneous", "size": "24" }, + { + "name": "time", + "category": "Miscellaneous", + "size": "16" + }, { "name": "truck", "category": "Miscellaneous", "size": "24" }, + { + "name": "unfavorite", + "category": "Miscellaneous", + "size": "24" + }, { "name": "arrow_down", "category": "Navigation", @@ -1227,22 +1441,27 @@ "size": "16" }, { - "name": "arrow_up", + "name": "arrow_slanted", "category": "Navigation", "size": "24" }, { - "name": "external_link", + "name": "arrow_slanted", + "category": "Navigation", + "size": "16" + }, + { + "name": "arrow_up", "category": "Navigation", "size": "24" }, { "name": "external_link", "category": "Navigation", - "size": "16" + "size": "24" }, { - "name": "arrow_slanted", + "name": "external_link", "category": "Navigation", "size": "16" }, @@ -1341,6 +1560,11 @@ "category": "Notification", "size": "16" }, + { + "name": "transit", + "category": "Notification", + "size": "24" + }, { "name": "transit", "category": "Notification", @@ -1351,6 +1575,16 @@ "category": "Product and feature", "size": "24" }, + { + "name": "accounting", + "category": "Product and feature", + "size": "24" + }, + { + "name": "apps", + "category": "Product and feature", + "size": "24" + }, { "name": "card_security", "category": "Product and feature", @@ -1371,6 +1605,11 @@ "category": "Product and feature", "size": "24" }, + { + "name": "contact_picker", + "category": "Product and feature", + "size": "24" + }, { "name": "discount", "category": "Product and feature", @@ -1386,6 +1625,11 @@ "category": "Product and feature", "size": "24" }, + { + "name": "general_settings", + "category": "Product and feature", + "size": "24" + }, { "name": "gift_card", "category": "Product and feature", @@ -1396,6 +1640,16 @@ "category": "Product and feature", "size": "24" }, + { + "name": "insurance", + "category": "Product and feature", + "size": "24" + }, + { + "name": "inventory", + "category": "Product and feature", + "size": "24" + }, { "name": "invoice", "category": "Product and feature", @@ -1406,6 +1660,11 @@ "category": "Product and feature", "size": "24" }, + { + "name": "loja", + "category": "Product and feature", + "size": "24" + }, { "name": "notification_center", "category": "Product and feature", @@ -1416,6 +1675,16 @@ "category": "Product and feature", "size": "24" }, + { + "name": "online_payments", + "category": "Product and feature", + "size": "24" + }, + { + "name": "orders", + "category": "Product and feature", + "size": "24" + }, { "name": "payment_link", "category": "Product and feature", @@ -1431,6 +1700,11 @@ "category": "Product and feature", "size": "24" }, + { + "name": "payout_settings", + "category": "Product and feature", + "size": "24" + }, { "name": "pix", "category": "Product and feature", @@ -1451,11 +1725,26 @@ "category": "Product and feature", "size": "24" }, + { + "name": "receipt_attached", + "category": "Product and feature", + "size": "24" + }, + { + "name": "receipt_missing", + "category": "Product and feature", + "size": "24" + }, { "name": "refer", "category": "Product and feature", "size": "24" }, + { + "name": "refer_a_friend", + "category": "Product and feature", + "size": "24" + }, { "name": "reports", "category": "Product and feature", @@ -1471,16 +1760,36 @@ "category": "Product and feature", "size": "24" }, + { + "name": "store_editor", + "category": "Product and feature", + "size": "24" + }, { "name": "sum_up_card", "category": "Product and feature", "size": "24" }, + { + "name": "sum_up_connect", + "category": "Product and feature", + "size": "24" + }, { "name": "support", "category": "Product and feature", "size": "24" }, + { + "name": "support", + "category": "Product and feature", + "size": "16" + }, + { + "name": "tap_to_pay", + "category": "Product and feature", + "size": "24" + }, { "name": "taxes", "category": "Product and feature", @@ -1491,11 +1800,21 @@ "category": "Product and feature", "size": "24" }, + { + "name": "transactions", + "category": "Product and feature", + "size": "24" + }, { "name": "virtual_terminal", "category": "Product and feature", "size": "24" }, + { + "name": "webspace", + "category": "Product and feature", + "size": "24" + }, { "name": "facebook", "category": "Social media", diff --git a/packages/icons/web/v2/account_24.svg b/packages/icons/web/v2/account_24.svg index b8b8f7d4ca..57d4a2bb0e 100644 --- a/packages/icons/web/v2/account_24.svg +++ b/packages/icons/web/v2/account_24.svg @@ -1,3 +1,5 @@ - + diff --git a/packages/icons/web/v2/accounting_24.svg b/packages/icons/web/v2/accounting_24.svg new file mode 100644 index 0000000000..1afb610c8d --- /dev/null +++ b/packages/icons/web/v2/accounting_24.svg @@ -0,0 +1,6 @@ + + + + diff --git a/packages/icons/web/v2/activate_card_24.svg b/packages/icons/web/v2/activate_card_24.svg new file mode 100644 index 0000000000..9e237c4563 --- /dev/null +++ b/packages/icons/web/v2/activate_card_24.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/add_16.svg b/packages/icons/web/v2/add_16.svg new file mode 100644 index 0000000000..649a7b0b20 --- /dev/null +++ b/packages/icons/web/v2/add_16.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/alarm_24.svg b/packages/icons/web/v2/alarm_24.svg new file mode 100644 index 0000000000..e47f7ceaca --- /dev/null +++ b/packages/icons/web/v2/alarm_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/alternative_payment_method_32.svg b/packages/icons/web/v2/alternative_payment_method_32.svg new file mode 100644 index 0000000000..c1fc8e1ff1 --- /dev/null +++ b/packages/icons/web/v2/alternative_payment_method_32.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + diff --git a/packages/icons/web/v2/apps_24.svg b/packages/icons/web/v2/apps_24.svg new file mode 100644 index 0000000000..8c88e75b96 --- /dev/null +++ b/packages/icons/web/v2/apps_24.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/icons/web/v2/area_24.svg b/packages/icons/web/v2/area_24.svg new file mode 100644 index 0000000000..92ecf72f3b --- /dev/null +++ b/packages/icons/web/v2/area_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/arrow_slanted_24.svg b/packages/icons/web/v2/arrow_slanted_24.svg new file mode 100644 index 0000000000..0fc253083c --- /dev/null +++ b/packages/icons/web/v2/arrow_slanted_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/article_24.svg b/packages/icons/web/v2/article_24.svg new file mode 100644 index 0000000000..5e5c47ead9 --- /dev/null +++ b/packages/icons/web/v2/article_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/barcode_16.svg b/packages/icons/web/v2/barcode_16.svg new file mode 100644 index 0000000000..866c8d164a --- /dev/null +++ b/packages/icons/web/v2/barcode_16.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/icons/web/v2/bluetooth_16.svg b/packages/icons/web/v2/bluetooth_16.svg new file mode 100644 index 0000000000..45fd1973c1 --- /dev/null +++ b/packages/icons/web/v2/bluetooth_16.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/packages/icons/web/v2/bluetooth_24.svg b/packages/icons/web/v2/bluetooth_24.svg new file mode 100644 index 0000000000..3f0ea91359 --- /dev/null +++ b/packages/icons/web/v2/bluetooth_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/callback_24.svg b/packages/icons/web/v2/callback_24.svg new file mode 100644 index 0000000000..27dc15b858 --- /dev/null +++ b/packages/icons/web/v2/callback_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/camera_24.svg b/packages/icons/web/v2/camera_24.svg new file mode 100644 index 0000000000..570348415a --- /dev/null +++ b/packages/icons/web/v2/camera_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/card_in_24.svg b/packages/icons/web/v2/card_in_24.svg new file mode 100644 index 0000000000..a7cd414d1c --- /dev/null +++ b/packages/icons/web/v2/card_in_24.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/card_out_24.svg b/packages/icons/web/v2/card_out_24.svg new file mode 100644 index 0000000000..9c792ddedd --- /dev/null +++ b/packages/icons/web/v2/card_out_24.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/checkmark_24.svg b/packages/icons/web/v2/checkmark_24.svg new file mode 100644 index 0000000000..972c3ee048 --- /dev/null +++ b/packages/icons/web/v2/checkmark_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/cheque_24.svg b/packages/icons/web/v2/cheque_24.svg new file mode 100644 index 0000000000..9767fee0ba --- /dev/null +++ b/packages/icons/web/v2/cheque_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/contact_picker_24.svg b/packages/icons/web/v2/contact_picker_24.svg new file mode 100644 index 0000000000..3211030d43 --- /dev/null +++ b/packages/icons/web/v2/contact_picker_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/cookie_preferences_24.svg b/packages/icons/web/v2/cookie_preferences_24.svg new file mode 100644 index 0000000000..6328defd1b --- /dev/null +++ b/packages/icons/web/v2/cookie_preferences_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/custom_amount_24.svg b/packages/icons/web/v2/custom_amount_24.svg new file mode 100644 index 0000000000..8a94605e47 --- /dev/null +++ b/packages/icons/web/v2/custom_amount_24.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + diff --git a/packages/icons/web/v2/direct_debit_24.svg b/packages/icons/web/v2/direct_debit_24.svg new file mode 100644 index 0000000000..722cf8a590 --- /dev/null +++ b/packages/icons/web/v2/direct_debit_24.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/discount_24.svg b/packages/icons/web/v2/discount_24.svg index 718efa3b8e..7c225233d5 100644 --- a/packages/icons/web/v2/discount_24.svg +++ b/packages/icons/web/v2/discount_24.svg @@ -1,3 +1,14 @@ - + + + + diff --git a/packages/icons/web/v2/fees_summary_24.svg b/packages/icons/web/v2/fees_summary_24.svg new file mode 100644 index 0000000000..ba13a0a705 --- /dev/null +++ b/packages/icons/web/v2/fees_summary_24.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/icons/web/v2/filter_applied_16.svg b/packages/icons/web/v2/filter_applied_16.svg new file mode 100644 index 0000000000..6ae82171ef --- /dev/null +++ b/packages/icons/web/v2/filter_applied_16.svg @@ -0,0 +1,14 @@ + + + + + + + diff --git a/packages/icons/web/v2/filter_applied_24.svg b/packages/icons/web/v2/filter_applied_24.svg new file mode 100644 index 0000000000..e89b97e8ef --- /dev/null +++ b/packages/icons/web/v2/filter_applied_24.svg @@ -0,0 +1,16 @@ + + + + + + + diff --git a/packages/icons/web/v2/flag_sl_16.svg b/packages/icons/web/v2/flag_sl_16.svg deleted file mode 100644 index c86e9ede6b..0000000000 --- a/packages/icons/web/v2/flag_sl_16.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/packages/icons/web/v2/flash_off_24.svg b/packages/icons/web/v2/flash_off_24.svg new file mode 100644 index 0000000000..b432565476 --- /dev/null +++ b/packages/icons/web/v2/flash_off_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/flashlight_24.svg b/packages/icons/web/v2/flashlight_24.svg new file mode 100644 index 0000000000..8f90213b1f --- /dev/null +++ b/packages/icons/web/v2/flashlight_24.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/web/v2/freeze_24.svg b/packages/icons/web/v2/freeze_24.svg new file mode 100644 index 0000000000..e73a197bb7 --- /dev/null +++ b/packages/icons/web/v2/freeze_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/general_settings_24.svg b/packages/icons/web/v2/general_settings_24.svg new file mode 100644 index 0000000000..eb0829265f --- /dev/null +++ b/packages/icons/web/v2/general_settings_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/id_24.svg b/packages/icons/web/v2/id_24.svg new file mode 100644 index 0000000000..90e53d3083 --- /dev/null +++ b/packages/icons/web/v2/id_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/insurance_24.svg b/packages/icons/web/v2/insurance_24.svg new file mode 100644 index 0000000000..2d890407d8 --- /dev/null +++ b/packages/icons/web/v2/insurance_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/inventory_24.svg b/packages/icons/web/v2/inventory_24.svg new file mode 100644 index 0000000000..87780a0fbf --- /dev/null +++ b/packages/icons/web/v2/inventory_24.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/packages/icons/web/v2/items_24.svg b/packages/icons/web/v2/items_24.svg index aa6c106476..af2aeaabf5 100644 --- a/packages/icons/web/v2/items_24.svg +++ b/packages/icons/web/v2/items_24.svg @@ -1,3 +1,13 @@ - + + + + diff --git a/packages/icons/web/v2/key_24.svg b/packages/icons/web/v2/key_24.svg new file mode 100644 index 0000000000..39c20dfefd --- /dev/null +++ b/packages/icons/web/v2/key_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/meal_voucher_24.svg b/packages/icons/web/v2/meal_voucher_24.svg new file mode 100644 index 0000000000..503eb67b79 --- /dev/null +++ b/packages/icons/web/v2/meal_voucher_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/online_payments_24.svg b/packages/icons/web/v2/online_payments_24.svg new file mode 100644 index 0000000000..1a31fa2a4b --- /dev/null +++ b/packages/icons/web/v2/online_payments_24.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/packages/icons/web/v2/orders_24.svg b/packages/icons/web/v2/orders_24.svg new file mode 100644 index 0000000000..9958b300d7 --- /dev/null +++ b/packages/icons/web/v2/orders_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/pay_pal_24.svg b/packages/icons/web/v2/pay_pal_24.svg new file mode 100644 index 0000000000..c48a882187 --- /dev/null +++ b/packages/icons/web/v2/pay_pal_24.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + diff --git a/packages/icons/web/v2/payout_settings_24.svg b/packages/icons/web/v2/payout_settings_24.svg new file mode 100644 index 0000000000..7d27ac7eb9 --- /dev/null +++ b/packages/icons/web/v2/payout_settings_24.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/payouts_24.svg b/packages/icons/web/v2/payouts_24.svg index 28d5a8896d..bb67413861 100644 --- a/packages/icons/web/v2/payouts_24.svg +++ b/packages/icons/web/v2/payouts_24.svg @@ -1,3 +1,11 @@ - + + + diff --git a/packages/icons/web/v2/percentage_16.svg b/packages/icons/web/v2/percentage_16.svg new file mode 100644 index 0000000000..96bbb2343a --- /dev/null +++ b/packages/icons/web/v2/percentage_16.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/percentage_24.svg b/packages/icons/web/v2/percentage_24.svg new file mode 100644 index 0000000000..ce3bc59786 --- /dev/null +++ b/packages/icons/web/v2/percentage_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/qr_code_24.svg b/packages/icons/web/v2/qr_code_24.svg index 703c70a103..4e006601b8 100644 --- a/packages/icons/web/v2/qr_code_24.svg +++ b/packages/icons/web/v2/qr_code_24.svg @@ -1,3 +1,5 @@ - + diff --git a/packages/icons/web/v2/random_24.svg b/packages/icons/web/v2/random_24.svg new file mode 100644 index 0000000000..339ed2c297 --- /dev/null +++ b/packages/icons/web/v2/random_24.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/receipt_attached_24.svg b/packages/icons/web/v2/receipt_attached_24.svg new file mode 100644 index 0000000000..74c4b67db1 --- /dev/null +++ b/packages/icons/web/v2/receipt_attached_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/receipt_missing_24.svg b/packages/icons/web/v2/receipt_missing_24.svg new file mode 100644 index 0000000000..3f66fb0ec7 --- /dev/null +++ b/packages/icons/web/v2/receipt_missing_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/refer_a_friend_24.svg b/packages/icons/web/v2/refer_a_friend_24.svg new file mode 100644 index 0000000000..3efff4abf9 --- /dev/null +++ b/packages/icons/web/v2/refer_a_friend_24.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/packages/icons/web/v2/reports_24.svg b/packages/icons/web/v2/reports_24.svg index 755ea14b54..a794603701 100644 --- a/packages/icons/web/v2/reports_24.svg +++ b/packages/icons/web/v2/reports_24.svg @@ -1,4 +1,8 @@ - - - + + + diff --git a/packages/icons/web/v2/sales_24.svg b/packages/icons/web/v2/sales_24.svg index f556beb1f1..7d71e98977 100644 --- a/packages/icons/web/v2/sales_24.svg +++ b/packages/icons/web/v2/sales_24.svg @@ -1,3 +1,5 @@ - + diff --git a/packages/icons/web/v2/send_16.svg b/packages/icons/web/v2/send_16.svg new file mode 100644 index 0000000000..1896f716e6 --- /dev/null +++ b/packages/icons/web/v2/send_16.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/sort_16.svg b/packages/icons/web/v2/sort_16.svg new file mode 100644 index 0000000000..124ada1d2c --- /dev/null +++ b/packages/icons/web/v2/sort_16.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/sort_24.svg b/packages/icons/web/v2/sort_24.svg new file mode 100644 index 0000000000..7515fff0a3 --- /dev/null +++ b/packages/icons/web/v2/sort_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/store_editor_24.svg b/packages/icons/web/v2/store_editor_24.svg new file mode 100644 index 0000000000..202aaa7943 --- /dev/null +++ b/packages/icons/web/v2/store_editor_24.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/packages/icons/web/v2/sum_up_connect_24.svg b/packages/icons/web/v2/sum_up_connect_24.svg new file mode 100644 index 0000000000..581a1d5c7e --- /dev/null +++ b/packages/icons/web/v2/sum_up_connect_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/support_16.svg b/packages/icons/web/v2/support_16.svg new file mode 100644 index 0000000000..53b0854bf8 --- /dev/null +++ b/packages/icons/web/v2/support_16.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/tap_to_pay_24.svg b/packages/icons/web/v2/tap_to_pay_24.svg new file mode 100644 index 0000000000..20e9fce06a --- /dev/null +++ b/packages/icons/web/v2/tap_to_pay_24.svg @@ -0,0 +1,11 @@ + + + + + diff --git a/packages/icons/web/v2/taxes_24.svg b/packages/icons/web/v2/taxes_24.svg index c32a5e6781..72b4ff3b17 100644 --- a/packages/icons/web/v2/taxes_24.svg +++ b/packages/icons/web/v2/taxes_24.svg @@ -1,3 +1,8 @@ - + + diff --git a/packages/icons/web/v2/time_16.svg b/packages/icons/web/v2/time_16.svg new file mode 100644 index 0000000000..ea848f82d9 --- /dev/null +++ b/packages/icons/web/v2/time_16.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/transactions_24.svg b/packages/icons/web/v2/transactions_24.svg new file mode 100644 index 0000000000..328bce9dea --- /dev/null +++ b/packages/icons/web/v2/transactions_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/transit_24.svg b/packages/icons/web/v2/transit_24.svg new file mode 100644 index 0000000000..aa12b5a288 --- /dev/null +++ b/packages/icons/web/v2/transit_24.svg @@ -0,0 +1,5 @@ + + + diff --git a/packages/icons/web/v2/twitter_24.svg b/packages/icons/web/v2/twitter_24.svg index 644b2c37cd..95316339a6 100644 --- a/packages/icons/web/v2/twitter_24.svg +++ b/packages/icons/web/v2/twitter_24.svg @@ -1,3 +1,5 @@ - + diff --git a/packages/icons/web/v2/unfavorite_24.svg b/packages/icons/web/v2/unfavorite_24.svg new file mode 100644 index 0000000000..04d8a271d0 --- /dev/null +++ b/packages/icons/web/v2/unfavorite_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/view_16.svg b/packages/icons/web/v2/view_16.svg new file mode 100644 index 0000000000..292b065ceb --- /dev/null +++ b/packages/icons/web/v2/view_16.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/webspace_24.svg b/packages/icons/web/v2/webspace_24.svg new file mode 100644 index 0000000000..2316100225 --- /dev/null +++ b/packages/icons/web/v2/webspace_24.svg @@ -0,0 +1,8 @@ + + + + diff --git a/packages/icons/web/v2/whats_app_24.svg b/packages/icons/web/v2/whats_app_24.svg new file mode 100644 index 0000000000..2e3551547f --- /dev/null +++ b/packages/icons/web/v2/whats_app_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/wire_transfer_24.svg b/packages/icons/web/v2/wire_transfer_24.svg new file mode 100644 index 0000000000..39acc4d4c8 --- /dev/null +++ b/packages/icons/web/v2/wire_transfer_24.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + From 0960e67f2e890397cc7c4e7eb7dfdc74e7fe13b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 25 Jan 2024 14:12:44 +0000 Subject: [PATCH 07/55] Version Packages (#2409) --- .changeset/clever-eagles-brush.md | 5 ----- .changeset/cyan-cougars-smash.md | 5 ----- .changeset/metal-windows-play.md | 5 ----- packages/icons/CHANGELOG.md | 10 ++++++++++ packages/icons/package.json | 2 +- 5 files changed, 11 insertions(+), 16 deletions(-) delete mode 100644 .changeset/clever-eagles-brush.md delete mode 100644 .changeset/cyan-cougars-smash.md delete mode 100644 .changeset/metal-windows-play.md diff --git a/.changeset/clever-eagles-brush.md b/.changeset/clever-eagles-brush.md deleted file mode 100644 index 85b8ccbafc..0000000000 --- a/.changeset/clever-eagles-brush.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Removed the incorrect `FlagSl` icon. Use the `FlagSi` icon instead. diff --git a/.changeset/cyan-cougars-smash.md b/.changeset/cyan-cougars-smash.md deleted file mode 100644 index 98d7f0c3c2..0000000000 --- a/.changeset/cyan-cougars-smash.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': major ---- - -Updated the `Account` (24px), `Discount` (24px), `Payouts` (24px), `QrCode` (24px), `Reports` (24px), `Sales` (24px), `Taxes` (24px), and `Twitter` (24px) icons. diff --git a/.changeset/metal-windows-play.md b/.changeset/metal-windows-play.md deleted file mode 100644 index 465b0d3af2..0000000000 --- a/.changeset/metal-windows-play.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Added the `Accounting` (24px), `ActivateCard` (24px), `Add` (24px), `Alarm` (24px), `AlternativePaymentMethod` (32px), `Apps` (24px), `Area` (24px), `ArrowSlanted` (24px), `Article` (24px), `Barcode` (16px), `Bluetooth` (16px & 24px), `Callback` (24px), `Camera` (24px), `CardIn` (24px), `CardOut` (24px), `Checkmark` (24px), `Cheque` (24px), `ContactPicker` (24px), `CookiePreferences` (24px), `CustomAmount` (24px), `DirectDebit` (24px), `FeesSummary` (24px), `FilterApplied` (16px & 24px), `FlashOff` (24px), `Flashlight` (24px), `Freeze` (24px), `GeneralSettings` (24px), `Id` (24px), `Insurance` (24px), `Inventory` (24px), `Key` (24px), `Loja` (24px), `MealVoucher` (24px), `OnlinePayments` (24px), `Orders` (24px), `PayPal` (24px), `PayoutSettings` (24px), `Percentage` (16px & 24px), `Random` (24px), `ReceiptAttached` (24px), `ReceiptMissing` (24px), `ReferAFriend` (24px), `Send` (16px), `Sort` (16px & 24px), `StoreEditor` (24px), `SumUpConnect` (24px), `Support` (16px), `TapToPay` (24px), `Time` (16px), `Transactions` (24px), `Transit` (24px), `Unfavorite` (24px), `View` (16px), `Webspace` (24px), `WhatsApp` (24px), and `WireTransfer` (24px) icons. diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 0bf50fa2ca..19a6f22ed1 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,15 @@ # @sumup/icons +## 3.4.0 + +### Minor Changes + +- [#2375](https://github.com/sumup-oss/circuit-ui/pull/2375) [`549ddbe`](https://github.com/sumup-oss/circuit-ui/commit/549ddbe3f6a45036426e446cefafed9928acc3bf) Thanks [@connor-baer](https://github.com/connor-baer)! - Updated the `Account` (24px), `Discount` (24px), `Payouts` (24px), `QrCode` (24px), `Reports` (24px), `Sales` (24px), `Taxes` (24px), and `Twitter` (24px) icons. + +- [#2375](https://github.com/sumup-oss/circuit-ui/pull/2375) [`549ddbe`](https://github.com/sumup-oss/circuit-ui/commit/549ddbe3f6a45036426e446cefafed9928acc3bf) Thanks [@connor-baer](https://github.com/connor-baer)! - Added the `Accounting` (24px), `ActivateCard` (24px), `Add` (24px), `Alarm` (24px), `AlternativePaymentMethod` (32px), `Apps` (24px), `Area` (24px), `ArrowSlanted` (24px), `Article` (24px), `Barcode` (16px), `Bluetooth` (16px & 24px), `Callback` (24px), `Camera` (24px), `CardIn` (24px), `CardOut` (24px), `Checkmark` (24px), `Cheque` (24px), `ContactPicker` (24px), `CookiePreferences` (24px), `CustomAmount` (24px), `DirectDebit` (24px), `FeesSummary` (24px), `FilterApplied` (16px & 24px), `FlashOff` (24px), `Flashlight` (24px), `Freeze` (24px), `GeneralSettings` (24px), `Id` (24px), `Insurance` (24px), `Inventory` (24px), `Key` (24px), `Loja` (24px), `MealVoucher` (24px), `OnlinePayments` (24px), `Orders` (24px), `PayPal` (24px), `PayoutSettings` (24px), `Percentage` (16px & 24px), `Random` (24px), `ReceiptAttached` (24px), `ReceiptMissing` (24px), `ReferAFriend` (24px), `Send` (16px), `Sort` (16px & 24px), `StoreEditor` (24px), `SumUpConnect` (24px), `Support` (16px), `TapToPay` (24px), `Time` (16px), `Transactions` (24px), `Transit` (24px), `Unfavorite` (24px), `View` (16px), `Webspace` (24px), `WhatsApp` (24px), and `WireTransfer` (24px) icons. + +- [#2375](https://github.com/sumup-oss/circuit-ui/pull/2375) [`549ddbe`](https://github.com/sumup-oss/circuit-ui/commit/549ddbe3f6a45036426e446cefafed9928acc3bf) Thanks [@connor-baer](https://github.com/connor-baer)! - Removed the incorrect `FlagSl` icon. Use the `FlagSi` icon instead. + ## 3.3.0 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 09f55fe8e2..79f409528c 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/icons", - "version": "3.3.0", + "version": "3.4.0", "description": "A collection of icons by SumUp", "type": "module", "main": "./dist/index.js", From 86a15c80c2112faab6ae771e8a9b655a8238c60f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 29 Jan 2024 14:15:48 +0000 Subject: [PATCH 08/55] Fix scroll-lock caused by ModalProvider (#2412) Co-authored-by: Aleksandr Alpatov --- .changeset/clean-teachers-float.md | 5 +++++ .../components/ModalContext/ModalContext.tsx | 11 ++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) create mode 100644 .changeset/clean-teachers-float.md diff --git a/.changeset/clean-teachers-float.md b/.changeset/clean-teachers-float.md new file mode 100644 index 0000000000..adcddc3eea --- /dev/null +++ b/.changeset/clean-teachers-float.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Fixed a bug where users were unable to scroll after the ModalProvider was mounted and immediately unmounted. diff --git a/packages/circuit-ui/components/ModalContext/ModalContext.tsx b/packages/circuit-ui/components/ModalContext/ModalContext.tsx index d4e1fcb46a..dab5d76e71 100644 --- a/packages/circuit-ui/components/ModalContext/ModalContext.tsx +++ b/packages/circuit-ui/components/ModalContext/ModalContext.tsx @@ -130,11 +130,15 @@ export function ModalProvider({ const activeModal = modals[modals.length - 1]; useEffect(() => { - if (!activeModal) { - // Clean up after react-modal in case it fails to do so itself - // https://github.com/reactjs/react-modal/issues/888#issuecomment-1158061329 + // // Clean up after react-modal in case it fails to do so itself + // // https://github.com/reactjs/react-modal/issues/888#issuecomment-1158061329 + const cleanUp = () => { document.documentElement.classList.remove(HTML_OPEN_CLASS_NAME); getAppElement()?.removeAttribute('aria-hidden'); + }; + + if (!activeModal) { + cleanUp(); return undefined; } @@ -145,6 +149,7 @@ export function ModalProvider({ window.addEventListener('popstate', popModal); return () => { + cleanUp(); window.removeEventListener('popstate', popModal); }; }, [activeModal, removeModal]); From 0d9d407dc3eb3a0384679890b5e476a704907749 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 29 Jan 2024 14:19:36 +0000 Subject: [PATCH 09/55] Add PercentageInput component (#2394) --- .changeset/lovely-pillows-build.md | 5 + .../CurrencyInput/CurrencyInput.mdx | 5 +- .../CurrencyInput/CurrencyInput.spec.tsx | 2 +- .../CurrencyInput/CurrencyInput.stories.tsx | 9 +- .../CurrencyInput/CurrencyInput.tsx | 6 +- .../PercentageInput/PercentageInput.mdx | 27 ++++ .../PercentageInput.module.css | 6 + .../PercentageInput/PercentageInput.spec.tsx | 132 ++++++++++++++++++ .../PercentageInput.stories.tsx | 66 +++++++++ .../PercentageInput/PercentageInput.tsx | 129 +++++++++++++++++ .../PercentageInputService.spec.ts | 40 ++++++ .../PercentageInput/PercentageInputService.ts | 26 ++++ .../components/PercentageInput/index.ts | 20 +++ packages/circuit-ui/index.ts | 2 + 14 files changed, 465 insertions(+), 10 deletions(-) create mode 100644 .changeset/lovely-pillows-build.md create mode 100644 packages/circuit-ui/components/PercentageInput/PercentageInput.mdx create mode 100644 packages/circuit-ui/components/PercentageInput/PercentageInput.module.css create mode 100644 packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx create mode 100644 packages/circuit-ui/components/PercentageInput/PercentageInput.stories.tsx create mode 100644 packages/circuit-ui/components/PercentageInput/PercentageInput.tsx create mode 100644 packages/circuit-ui/components/PercentageInput/PercentageInputService.spec.ts create mode 100644 packages/circuit-ui/components/PercentageInput/PercentageInputService.ts create mode 100644 packages/circuit-ui/components/PercentageInput/index.ts diff --git a/.changeset/lovely-pillows-build.md b/.changeset/lovely-pillows-build.md new file mode 100644 index 0000000000..5a8b88bde0 --- /dev/null +++ b/.changeset/lovely-pillows-build.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Added a PercentageInput component for fractional numeric values. diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.mdx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.mdx index 05b70fe83f..b9f6fa733a 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.mdx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.mdx @@ -16,13 +16,12 @@ The CurrencyInput component indicates to the user that a number should be entere ### Currency -You can use `currency` to specify which currency the input should use. +Use the `currency` prop to specify which currency the input should use. ### Locale -You can use `locale` to change the currency formatting locale. -For example, Euros could be formatted differently based on locale: +Use the `locale` prop to format the currency value according to that locale's formatting style. For example, euros could be formatted differently based on locale: diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx index 58b583ede7..e7e7505605 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx @@ -115,7 +115,7 @@ describe('CurrencyInput', () => { , ); expect(getByRole('textbox')).toHaveAccessibleDescription( - `${customDescription} ${EUR_CURRENCY_SYMBOL}`, + `${EUR_CURRENCY_SYMBOL} ${customDescription}`, ); }); }); diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.stories.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.stories.tsx index 5cc5c8d7e1..32abe208d5 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.stories.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.stories.tsx @@ -28,10 +28,11 @@ const baseArgs = { validationHint: 'Excluding VAT', currency: 'EUR', locale: 'de-DE', - style: { maxWidth: '250px' }, }; -export const Base = (args: CurrencyInputProps) => ; +export const Base = (args: CurrencyInputProps) => ( + +); Base.args = baseArgs; @@ -39,12 +40,14 @@ export const Currencies = (args: CurrencyInputProps) => ( ( , - Pick { + Pick { /** * A ISO 4217 currency code, such as 'USD' for the US dollar, * 'EUR' for the Euro, or 'CNY' for the Chinese RMB. @@ -83,9 +83,7 @@ export const CurrencyInput = forwardRef( ref, ) => { const currencySymbolId = useId(); - const descriptionIds = `${ - descriptionId ? `${descriptionId} ` : '' - }${currencySymbolId}`; + const descriptionIds = clsx(currencySymbolId, descriptionId); const currencyFormat = resolveCurrencyFormat(locale, currency) || DEFAULT_FORMAT; diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.mdx b/packages/circuit-ui/components/PercentageInput/PercentageInput.mdx new file mode 100644 index 0000000000..2151fcbf5f --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.mdx @@ -0,0 +1,27 @@ +import { Meta, Status, Props, Story } from '../../../../.storybook/components'; +import * as Stories from './PercentageInput.stories'; + + + +# PercentageInput + + + +The PercentageInput component indicates to the user that a fractional number should be entered. + + + + +## Component Variations + +### Locale + +Use the `locale` prop to format the number according to that locale's formatting style. + + + +### Decimals + +Use the `decimalScale` prop to allow users to enter numbers with decimals. The default is `0`. + + diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.module.css b/packages/circuit-ui/components/PercentageInput/PercentageInput.module.css new file mode 100644 index 0000000000..a8c34c8c4c --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.module.css @@ -0,0 +1,6 @@ +.symbol { + display: flex; + align-items: center; + justify-content: center; + line-height: var(--cui-spacings-mega); +} diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx b/packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx new file mode 100644 index 0000000000..c21fa8ff7a --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx @@ -0,0 +1,132 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { describe, expect, it } from 'vitest'; +import { ChangeEvent, createRef, useState } from 'react'; + +import { render, userEvent, axe } from '../../util/test-utils.js'; +import type { InputElement } from '../Input/index.js'; + +import { PercentageInput, PercentageInputProps } from './PercentageInput.js'; + +const defaultProps = { + locale: 'de-DE', + label: 'Discount', +}; + +describe('PercentageInput', () => { + it('should forward a ref', () => { + const ref = createRef(); + const { getByRole } = render( + , + ); + const input = getByRole('textbox'); + expect(ref.current).toBe(input); + }); + + it('should format an en-GB amount', async () => { + const { getByRole } = render( + , + ); + + const input = getByRole('textbox') as HTMLInputElement; + + await userEvent.type(input, '1234'); + + expect(input.value).toBe('1,234'); + }); + + it('should format an de-DE amount', async () => { + const { getByRole } = render( + , + ); + + const input = getByRole('textbox') as HTMLInputElement; + + await userEvent.type(input, '1234'); + + expect(input.value).toBe('1.234'); + }); + + it('should format an amount with decimals', async () => { + const { getByRole } = render( + , + ); + + const input = getByRole('textbox') as HTMLInputElement; + + await userEvent.type(input, '1234,56'); + + expect(input.value).toBe('1.234,56'); + }); + + it('should format an amount in a controlled input with an initial numeric value', async () => { + const ControlledPercentageInput = () => { + const [value, setValue] = useState(1234); + return ( + ) => + setValue(e.target.value) + } + /> + ); + }; + const { getByRole } = render(); + + const input = getByRole('textbox') as HTMLInputElement; + expect(input.value).toBe('1.234'); + + await userEvent.clear(input); + await userEvent.type(input, '1234'); + + expect(input.value).toBe('1.234'); + }); + + it('should have no accessibility violations', async () => { + const { container } = render(); + const actual = await axe(container); + expect(actual).toHaveNoViolations(); + }); + + describe('Labeling', () => { + const PERCENT_SYMBOL = '%'; + /** + * Note: further labeling logic is covered by the underlying `Input` component. + */ + it('should have the currency symbol as part of its accessible description', () => { + const { getByRole } = render(); + expect(getByRole('textbox')).toHaveAccessibleDescription(PERCENT_SYMBOL); + }); + + it('should accept a custom description via aria-describedby', () => { + const customDescription = 'Custom description'; + const customDescriptionId = 'customDescriptionId'; + const { getByRole } = render( + <> + {customDescription} + + , + ); + expect(getByRole('textbox')).toHaveAccessibleDescription( + `${PERCENT_SYMBOL} ${customDescription}`, + ); + }); + }); +}); diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.stories.tsx b/packages/circuit-ui/components/PercentageInput/PercentageInput.stories.tsx new file mode 100644 index 0000000000..81ec10c355 --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.stories.tsx @@ -0,0 +1,66 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { Stack } from '../../../../.storybook/components/index.js'; + +import { PercentageInput, PercentageInputProps } from './PercentageInput.js'; + +export default { + title: 'Forms/Input/PercentageInput', + component: PercentageInput, +}; + +const baseArgs = { + label: 'Discount', + placeholder: 0, + locale: 'de-DE', +}; + +export const Base = (args: PercentageInputProps) => ( + +); + +Base.args = baseArgs; + +export const Locales = (args: PercentageInputProps) => ( + + + + +); + +Locales.args = { + ...baseArgs, + decimalScale: 1, +}; + +export const Decimals = (args: PercentageInputProps) => ( + +); + +Decimals.args = { + ...baseArgs, + decimalScale: 2, +}; diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx new file mode 100644 index 0000000000..ac3c7e8729 --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx @@ -0,0 +1,129 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { forwardRef, useId } from 'react'; +import { resolveNumberFormat } from '@sumup/intl'; +import { NumericFormat, NumericFormatProps } from 'react-number-format'; + +import { clsx } from '../../styles/clsx.js'; +import Input, { InputElement, InputProps } from '../Input/index.js'; + +import { formatPlaceholder } from './PercentageInputService.js'; +import classes from './PercentageInput.module.css'; + +export interface PercentageInputProps + extends Omit< + InputProps, + 'placeholder' | 'ref' | 'value' | 'defaultValue' | 'type' + >, + Pick< + NumericFormatProps, + 'onValueChange' | 'decimalScale' | 'fixedDecimalScale' | 'allowNegative' + > { + /** + * One or more Unicode BCP 47 locale identifiers, such as `'de-DE'` or + * `['GB', 'en-US']` (the first supported locale is used). + */ + locale?: string | string[]; + /** + * A short string that is shown inside the empty input. + * If the placeholder is a number, it is formatted in the local format. + */ + placeholder?: string | number; + /** + * The value of the input element. + */ + value?: string | number; + /** + * The default value of the input element. + */ + defaultValue?: string | number; +} + +const DEFAULT_FORMAT = { + decimalDelimiter: '.', + groupDelimiter: ',', +}; + +/** + * PercentageInput component for fractional values + */ +export const PercentageInput = forwardRef( + ( + { + locale, + placeholder = '0', + decimalScale = 0, + 'aria-describedby': descriptionId, + ...props + }, + ref, + ) => { + const percentageSymbolId = useId(); + const descriptionIds = clsx(percentageSymbolId, descriptionId); + + const { groupDelimiter, decimalDelimiter } = + resolveNumberFormat(locale, { + style: 'percent', + // There must be at least 1 decimal for the decimalDelimiter to be resolved + minimumFractionDigits: 1, + maximumFractionDigits: 1, + }) || DEFAULT_FORMAT; + + const placeholderString = formatPlaceholder(placeholder, locale, { + minimumFractionDigits: decimalScale, + maximumFractionDigits: decimalScale, + }); + + // Allow common decimal signs as well as the one from resolveNumberFormat() + const allowedDecimalSeparators = [ + '.', + ',', + ...(decimalDelimiter ? [decimalDelimiter] : []), + ]; + + const renderSuffix = (suffixProps: { className?: string }) => ( + + % + + ); + + return ( + + ); + }, +); + +PercentageInput.displayName = 'PercentageInput'; diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInputService.spec.ts b/packages/circuit-ui/components/PercentageInput/PercentageInputService.spec.ts new file mode 100644 index 0000000000..e2b02809df --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/PercentageInputService.spec.ts @@ -0,0 +1,40 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { beforeEach, describe, expect, it, vi } from 'vitest'; + +import { formatPlaceholder } from './PercentageInputService.js'; + +describe('PercentageInputService', () => { + beforeEach(() => { + vi.resetAllMocks(); + }); + + describe('formatPlaceholder', () => { + it('should format a numeric placeholder', () => { + const placeholder = 1234.56; + const actual = formatPlaceholder(placeholder, 'en-US'); + const expected = '1,234.56'; + expect(actual).toBe(expected); + }); + + it('should return a string placeholder', () => { + const placeholder = '1234.56'; + const actual = formatPlaceholder(placeholder, 'de-DE'); + const expected = placeholder; + expect(actual).toBe(expected); + }); + }); +}); diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInputService.ts b/packages/circuit-ui/components/PercentageInput/PercentageInputService.ts new file mode 100644 index 0000000000..864bd3e856 --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/PercentageInputService.ts @@ -0,0 +1,26 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { formatNumber } from '@sumup/intl'; + +export function formatPlaceholder( + placeholder?: string | number, + locale?: string | string[], + options?: Intl.NumberFormatOptions, +): string | undefined { + return typeof placeholder === 'number' + ? formatNumber(placeholder, locale, options) + : placeholder; +} diff --git a/packages/circuit-ui/components/PercentageInput/index.ts b/packages/circuit-ui/components/PercentageInput/index.ts new file mode 100644 index 0000000000..2fed6943a1 --- /dev/null +++ b/packages/circuit-ui/components/PercentageInput/index.ts @@ -0,0 +1,20 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { PercentageInput } from './PercentageInput.js'; + +export type { PercentageInputProps } from './PercentageInput.js'; + +export default PercentageInput; diff --git a/packages/circuit-ui/index.ts b/packages/circuit-ui/index.ts index 09901222fb..48842aa774 100644 --- a/packages/circuit-ui/index.ts +++ b/packages/circuit-ui/index.ts @@ -54,6 +54,8 @@ export { default as TextArea } from './components/TextArea/index.js'; export type { TextAreaProps } from './components/TextArea/index.js'; export { default as CurrencyInput } from './components/CurrencyInput/index.js'; export type { CurrencyInputProps } from './components/CurrencyInput/index.js'; +export { default as PercentageInput } from './components/PercentageInput/index.js'; +export type { PercentageInputProps } from './components/PercentageInput/index.js'; export { default as ImageInput } from './components/ImageInput/index.js'; export type { ImageInputProps } from './components/ImageInput/index.js'; From b7042a7ced4ff86f3a0d89a96f75765d151d0c0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 29 Jan 2024 14:34:11 +0000 Subject: [PATCH 10/55] Version Packages (#2413) --- .changeset/clean-teachers-float.md | 5 ----- .changeset/lovely-pillows-build.md | 5 ----- packages/circuit-ui/CHANGELOG.md | 10 ++++++++++ packages/circuit-ui/package.json | 2 +- 4 files changed, 11 insertions(+), 11 deletions(-) delete mode 100644 .changeset/clean-teachers-float.md delete mode 100644 .changeset/lovely-pillows-build.md diff --git a/.changeset/clean-teachers-float.md b/.changeset/clean-teachers-float.md deleted file mode 100644 index adcddc3eea..0000000000 --- a/.changeset/clean-teachers-float.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': patch ---- - -Fixed a bug where users were unable to scroll after the ModalProvider was mounted and immediately unmounted. diff --git a/.changeset/lovely-pillows-build.md b/.changeset/lovely-pillows-build.md deleted file mode 100644 index 5a8b88bde0..0000000000 --- a/.changeset/lovely-pillows-build.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': minor ---- - -Added a PercentageInput component for fractional numeric values. diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index 67c59cb531..9ea98bc1a3 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,5 +1,15 @@ # @sumup/circuit-ui +## 8.2.0 + +### Minor Changes + +- [#2394](https://github.com/sumup-oss/circuit-ui/pull/2394) [`0d9d407`](https://github.com/sumup-oss/circuit-ui/commit/0d9d407dc3eb3a0384679890b5e476a704907749) Thanks [@connor-baer](https://github.com/connor-baer)! - Added a PercentageInput component for fractional numeric values. + +### Patch Changes + +- [#2412](https://github.com/sumup-oss/circuit-ui/pull/2412) [`86a15c8`](https://github.com/sumup-oss/circuit-ui/commit/86a15c80c2112faab6ae771e8a9b655a8238c60f) Thanks [@connor-baer](https://github.com/connor-baer)! - Fixed a bug where users were unable to scroll after the ModalProvider was mounted and immediately unmounted. + ## 8.1.2 ### Patch Changes diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 7362a9a27f..95fba73522 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/circuit-ui", - "version": "8.1.2", + "version": "8.2.0", "description": "SumUp's React UI component library", "type": "module", "main": "./dist/index.js", From 5d7a92f45c2475e1b9b705d2e2c349e5f9969437 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 31 Jan 2024 08:44:58 +0000 Subject: [PATCH 11/55] Add minimum height to SidePanelProvider (#2414) --- .changeset/clever-ducks-play.md | 5 +++++ .../SidePanel/SidePanelContext.module.css | 1 + .../SidePanel/SidePanelContext.spec.tsx | 11 +++++++++++ .../components/SidePanel/SidePanelContext.tsx | 16 +++++++++++----- 4 files changed, 28 insertions(+), 5 deletions(-) create mode 100644 .changeset/clever-ducks-play.md diff --git a/.changeset/clever-ducks-play.md b/.changeset/clever-ducks-play.md new file mode 100644 index 0000000000..77eee648eb --- /dev/null +++ b/.changeset/clever-ducks-play.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Added a minimum height to the SidePanelProvider to allow its children to be vertically centered. diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css b/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css index 6925878ab1..a971decf1e 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css +++ b/packages/circuit-ui/components/SidePanel/SidePanelContext.module.css @@ -1,5 +1,6 @@ .base { width: 100%; + min-height: calc(100vh - var(--top-navigation-height)); transition: width var(--cui-transitions-slow); } diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.spec.tsx b/packages/circuit-ui/components/SidePanel/SidePanelContext.spec.tsx index 5a603167d7..6dd940dd30 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanelContext.spec.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanelContext.spec.tsx @@ -135,6 +135,17 @@ describe('SidePanelContext', () => { ); + it('should merge a custom class name with the default ones', () => { + const className = 'foo'; + const { container } = render( + + + , + ); + const button = container.querySelector('div'); + expect(button?.className).toContain(className); + }); + describe('setSidePanel', () => { it('should open a side panel', async () => { const Trigger = () => { diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx b/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx index 1946b65d41..d4fe0a8c73 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx @@ -16,11 +16,12 @@ import { createContext, useCallback, - ReactNode, useMemo, useState, + type ReactNode, + type HTMLAttributes, } from 'react'; -import ReactModal, { Props as ReactModalProps } from 'react-modal'; +import ReactModal, { type Props as ReactModalProps } from 'react-modal'; import { useMedia } from '../../hooks/useMedia/index.js'; import { useStack, StackItem } from '../../hooks/useStack/index.js'; @@ -29,7 +30,7 @@ import { warn } from '../../util/logger.js'; import { clsx } from '../../styles/clsx.js'; import { useLatest } from '../../hooks/useLatest/useLatest.js'; -import { SidePanel, SidePanelProps } from './SidePanel.js'; +import { SidePanel, type SidePanelProps } from './SidePanel.js'; import { TRANSITION_DURATION } from './constants.js'; import type { SidePanelHookProps } from './useSidePanel.js'; import classes from './SidePanelContext.module.css'; @@ -102,7 +103,7 @@ export const SidePanelContext = createContext({ transitionDuration: TRANSITION_DURATION, }); -export interface SidePanelProviderProps { +export interface SidePanelProviderProps extends HTMLAttributes { /** * The SidePanelProvider should wrap your entire primary content, * which will be resized when the side panel is opened. @@ -110,7 +111,10 @@ export interface SidePanelProviderProps { children: ReactNode; } -export function SidePanelProvider({ children }: SidePanelProviderProps) { +export function SidePanelProvider({ + children, + ...props +}: SidePanelProviderProps) { const isMobile = useMedia('(max-width: 767px)'); const [sidePanels, dispatch] = useStack(); const [isPrimaryContentResized, setIsPrimaryContentResized] = useState(false); @@ -235,9 +239,11 @@ export function SidePanelProvider({ children }: SidePanelProviderProps) { return (
{children} From 1848443253a4ba048da7f0d94c4b6bac697fc04a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:51:34 +0000 Subject: [PATCH 12/55] chore(deps-dev): bump @vitest/coverage-c8 from 0.30.1 to 0.33.0 (#2418) Bumps [@vitest/coverage-c8](https://github.com/vitest-dev/vitest/tree/HEAD/packages/coverage-c8) from 0.30.1 to 0.33.0. - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Commits](https://github.com/vitest-dev/vitest/commits/v0.33.0/packages/coverage-c8) --- updated-dependencies: - dependency-name: "@vitest/coverage-c8" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 66 +++++++++++++++++++++++++---------------------- package.json | 2 +- 2 files changed, 36 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index aa93ce324c..68ca825d14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -31,7 +31,7 @@ "@sumup/foundry": "^6.2.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", "@types/node": "^18.16.19", - "@vitest/coverage-c8": "^0.30.1", + "@vitest/coverage-c8": "^0.33.0", "@vitest/coverage-v8": "^0.34.6", "audit-ci": "^6.6.1", "chromatic": "^10.3.1", @@ -12766,17 +12766,20 @@ } }, "node_modules/@vitest/coverage-c8": { - "version": "0.30.1", - "resolved": "https://registry.npmjs.org/@vitest/coverage-c8/-/coverage-c8-0.30.1.tgz", - "integrity": "sha512-/Wa3dtSuckpdngAmiCwowaEXXgJkqPrtfvrs9HTB9QoEfNbZWPu4E4cjEn4lJZb4qcGf4fxFtUA2f9DnDNAzBA==", + "version": "0.33.0", + "resolved": "https://registry.npmjs.org/@vitest/coverage-c8/-/coverage-c8-0.33.0.tgz", + "integrity": "sha512-DaF1zJz4dcOZS4k/neiQJokmOWqsGXwhthfmUdPGorXIQHjdPvV6JQSYhQDI41MyI8c+IieQUdIDs5XAMHtDDw==", + "deprecated": "v8 coverage is moved to @vitest/coverage-v8 package", "dev": true, "dependencies": { - "c8": "^7.13.0", + "@ampproject/remapping": "^2.2.1", + "c8": "^7.14.0", + "magic-string": "^0.30.1", "picocolors": "^1.0.0", - "std-env": "^3.3.2" + "std-env": "^3.3.3" }, "funding": { - "url": "https://github.com/sponsors/antfu" + "url": "https://opencollective.com/vitest" }, "peerDependencies": { "vitest": ">=0.30.0 <1" @@ -15246,9 +15249,9 @@ } }, "node_modules/c8": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/c8/-/c8-7.13.0.tgz", - "integrity": "sha512-/NL4hQTv1gBL6J6ei80zu3IiTrmePDKXKXOTLpHvcIWZTVYQlDhVWjjWvkhICylE8EwwnMVzDZugCvdx0/DIIA==", + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/c8/-/c8-7.14.0.tgz", + "integrity": "sha512-i04rtkkcNcCf7zsQcSv/T9EbUn4RXQ6mropeMcjFOsQXQ0iGLAr/xT6TImQg4+U9hmNpN9XdvPkjUL1IzbgxJw==", "dev": true, "dependencies": { "@bcoe/v8-coverage": "^0.2.3", @@ -19610,10 +19613,9 @@ }, "node_modules/foreground-child": { "version": "2.0.0", - "resolved": "https://registry.yarnpkg.com/foreground-child/-/foreground-child-2.0.0.tgz", - "integrity": "sha1-cbMoAMnxWqjy+D9Ka9m/812GGlM= sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz", + "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", "dev": true, - "license": "ISC", "dependencies": { "cross-spawn": "^7.0.0", "signal-exit": "^3.0.2" @@ -25688,9 +25690,9 @@ } }, "node_modules/magic-string": { - "version": "0.30.5", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", - "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", + "version": "0.30.6", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.6.tgz", + "integrity": "sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==", "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, @@ -37467,7 +37469,7 @@ }, "packages/circuit-ui": { "name": "@sumup/circuit-ui", - "version": "8.1.1", + "version": "8.2.0", "license": "Apache-2.0", "dependencies": { "@floating-ui/react-dom": "^2.0.5", @@ -37616,7 +37618,7 @@ }, "packages/icons": { "name": "@sumup/icons", - "version": "3.3.0", + "version": "3.4.0", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.23.7", @@ -47602,14 +47604,16 @@ } }, "@vitest/coverage-c8": { - "version": "0.30.1", - "resolved": "https://registry.npmjs.org/@vitest/coverage-c8/-/coverage-c8-0.30.1.tgz", - "integrity": "sha512-/Wa3dtSuckpdngAmiCwowaEXXgJkqPrtfvrs9HTB9QoEfNbZWPu4E4cjEn4lJZb4qcGf4fxFtUA2f9DnDNAzBA==", + "version": "0.33.0", + "resolved": "https://registry.npmjs.org/@vitest/coverage-c8/-/coverage-c8-0.33.0.tgz", + "integrity": "sha512-DaF1zJz4dcOZS4k/neiQJokmOWqsGXwhthfmUdPGorXIQHjdPvV6JQSYhQDI41MyI8c+IieQUdIDs5XAMHtDDw==", "dev": true, "requires": { - "c8": "^7.13.0", + "@ampproject/remapping": "^2.2.1", + "c8": "^7.14.0", + "magic-string": "^0.30.1", "picocolors": "^1.0.0", - "std-env": "^3.3.2" + "std-env": "^3.3.3" } }, "@vitest/coverage-v8": { @@ -49371,9 +49375,9 @@ "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==" }, "c8": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/c8/-/c8-7.13.0.tgz", - "integrity": "sha512-/NL4hQTv1gBL6J6ei80zu3IiTrmePDKXKXOTLpHvcIWZTVYQlDhVWjjWvkhICylE8EwwnMVzDZugCvdx0/DIIA==", + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/c8/-/c8-7.14.0.tgz", + "integrity": "sha512-i04rtkkcNcCf7zsQcSv/T9EbUn4RXQ6mropeMcjFOsQXQ0iGLAr/xT6TImQg4+U9hmNpN9XdvPkjUL1IzbgxJw==", "dev": true, "requires": { "@bcoe/v8-coverage": "^0.2.3", @@ -52686,8 +52690,8 @@ }, "foreground-child": { "version": "2.0.0", - "resolved": "https://registry.yarnpkg.com/foreground-child/-/foreground-child-2.0.0.tgz", - "integrity": "sha1-cbMoAMnxWqjy+D9Ka9m/812GGlM= sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", + "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz", + "integrity": "sha512-dCIq9FpEcyQyXKCkyzmlPTFNgrCzPudOe+mhvJU5zAtlBnGVy2yKxtfsxK2tQBThwq225jcvBjpw1Gr40uzZCA==", "dev": true, "requires": { "cross-spawn": "^7.0.0", @@ -57099,9 +57103,9 @@ "dev": true }, "magic-string": { - "version": "0.30.5", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz", - "integrity": "sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==", + "version": "0.30.6", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.6.tgz", + "integrity": "sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==", "requires": { "@jridgewell/sourcemap-codec": "^1.4.15" }, diff --git a/package.json b/package.json index 8830404c9e..fb4b024ab6 100644 --- a/package.json +++ b/package.json @@ -58,7 +58,7 @@ "@sumup/foundry": "^6.2.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", "@types/node": "^18.16.19", - "@vitest/coverage-c8": "^0.30.1", + "@vitest/coverage-c8": "^0.33.0", "@vitest/coverage-v8": "^0.34.6", "audit-ci": "^6.6.1", "chromatic": "^10.3.1", From 2cf7a594bb84943fb73290b4b231928963efb415 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:52:17 +0000 Subject: [PATCH 13/55] chore(deps-dev): bump @babel/preset-env from 7.23.7 to 7.23.9 (#2419) Bumps [@babel/preset-env](https://github.com/babel/babel/tree/HEAD/packages/babel-preset-env) from 7.23.7 to 7.23.9. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.9/packages/babel-preset-env) --- updated-dependencies: - dependency-name: "@babel/preset-env" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 158 ++++++++++++++++++------------------ packages/icons/package.json | 2 +- 2 files changed, 79 insertions(+), 81 deletions(-) diff --git a/package-lock.json b/package-lock.json index 68ca825d14..53e998f812 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1487,9 +1487,9 @@ } }, "node_modules/@babel/helper-define-polyfill-provider": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz", - "integrity": "sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz", + "integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==", "dev": true, "dependencies": { "@babel/helper-compilation-targets": "^7.22.6", @@ -2156,9 +2156,9 @@ } }, "node_modules/@babel/plugin-transform-async-generator-functions": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz", - "integrity": "sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz", + "integrity": "sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==", "dev": true, "dependencies": { "@babel/helper-environment-visitor": "^7.22.20", @@ -2254,16 +2254,15 @@ } }, "node_modules/@babel/plugin-transform-classes": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.5.tgz", - "integrity": "sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==", + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz", + "integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==", "dev": true, "dependencies": { "@babel/helper-annotate-as-pure": "^7.22.5", - "@babel/helper-compilation-targets": "^7.22.15", + "@babel/helper-compilation-targets": "^7.23.6", "@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/helper-split-export-declaration": "^7.22.6", @@ -2531,9 +2530,9 @@ } }, "node_modules/@babel/plugin-transform-modules-systemjs": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz", - "integrity": "sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz", + "integrity": "sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==", "dev": true, "dependencies": { "@babel/helper-hoist-variables": "^7.22.5", @@ -3040,9 +3039,9 @@ } }, "node_modules/@babel/preset-env": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.7.tgz", - "integrity": "sha512-SY27X/GtTz/L4UryMNJ6p4fH4nsgWbz84y9FE0bQeWJP6O5BhgVCt53CotQKHCOeXJel8VyhlhujhlltKms/CA==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.9.tgz", + "integrity": "sha512-3kBGTNBBk9DQiPoXYS0g0BYlwTQYUTifqgKTjxUwEUkduRT2QOa0FPGBJ+NROQhGyYO5BuTJwGvBnqKDykac6A==", "dev": true, "dependencies": { "@babel/compat-data": "^7.23.5", @@ -3072,13 +3071,13 @@ "@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6", "@babel/plugin-transform-arrow-functions": "^7.23.3", - "@babel/plugin-transform-async-generator-functions": "^7.23.7", + "@babel/plugin-transform-async-generator-functions": "^7.23.9", "@babel/plugin-transform-async-to-generator": "^7.23.3", "@babel/plugin-transform-block-scoped-functions": "^7.23.3", "@babel/plugin-transform-block-scoping": "^7.23.4", "@babel/plugin-transform-class-properties": "^7.23.3", "@babel/plugin-transform-class-static-block": "^7.23.4", - "@babel/plugin-transform-classes": "^7.23.5", + "@babel/plugin-transform-classes": "^7.23.8", "@babel/plugin-transform-computed-properties": "^7.23.3", "@babel/plugin-transform-destructuring": "^7.23.3", "@babel/plugin-transform-dotall-regex": "^7.23.3", @@ -3094,7 +3093,7 @@ "@babel/plugin-transform-member-expression-literals": "^7.23.3", "@babel/plugin-transform-modules-amd": "^7.23.3", "@babel/plugin-transform-modules-commonjs": "^7.23.3", - "@babel/plugin-transform-modules-systemjs": "^7.23.3", + "@babel/plugin-transform-modules-systemjs": "^7.23.9", "@babel/plugin-transform-modules-umd": "^7.23.3", "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5", "@babel/plugin-transform-new-target": "^7.23.3", @@ -3120,9 +3119,9 @@ "@babel/plugin-transform-unicode-regex": "^7.23.3", "@babel/plugin-transform-unicode-sets-regex": "^7.23.3", "@babel/preset-modules": "0.1.6-no-external-plugins", - "babel-plugin-polyfill-corejs2": "^0.4.7", - "babel-plugin-polyfill-corejs3": "^0.8.7", - "babel-plugin-polyfill-regenerator": "^0.5.4", + "babel-plugin-polyfill-corejs2": "^0.4.8", + "babel-plugin-polyfill-corejs3": "^0.9.0", + "babel-plugin-polyfill-regenerator": "^0.5.5", "core-js-compat": "^3.31.0", "semver": "^6.3.1" }, @@ -14716,13 +14715,13 @@ } }, "node_modules/babel-plugin-polyfill-corejs2": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz", - "integrity": "sha512-LidDk/tEGDfuHW2DWh/Hgo4rmnw3cduK6ZkOI1NPFceSK3n/yAGeOsNT7FLnSGHkXj3RHGSEVkN3FsCTY6w2CQ==", + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.8.tgz", + "integrity": "sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==", "dev": true, "dependencies": { "@babel/compat-data": "^7.22.6", - "@babel/helper-define-polyfill-provider": "^0.4.4", + "@babel/helper-define-polyfill-provider": "^0.5.0", "semver": "^6.3.1" }, "peerDependencies": { @@ -14739,25 +14738,25 @@ } }, "node_modules/babel-plugin-polyfill-corejs3": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz", - "integrity": "sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz", + "integrity": "sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==", "dev": true, "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.4.4", - "core-js-compat": "^3.33.1" + "@babel/helper-define-polyfill-provider": "^0.5.0", + "core-js-compat": "^3.34.0" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, "node_modules/babel-plugin-polyfill-regenerator": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.4.tgz", - "integrity": "sha512-S/x2iOCvDaCASLYsOOgWOq4bCfKYVqvO/uxjkaYyZ3rVsVE3CeAI/c84NpyuBBymEgNvHgjEot3a9/Z/kXvqsg==", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz", + "integrity": "sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==", "dev": true, "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.4.4" + "@babel/helper-define-polyfill-provider": "^0.5.0" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" @@ -16374,9 +16373,9 @@ } }, "node_modules/core-js-compat": { - "version": "3.35.0", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.0.tgz", - "integrity": "sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==", + "version": "3.35.1", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz", + "integrity": "sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==", "dev": true, "dependencies": { "browserslist": "^4.22.2" @@ -37622,7 +37621,7 @@ "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.23.7", - "@babel/preset-env": "^7.23.7", + "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", "@types/prettier": "^2.7.3", @@ -39467,9 +39466,9 @@ } }, "@babel/helper-define-polyfill-provider": { - "version": "0.4.4", - "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz", - "integrity": "sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==", + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.5.0.tgz", + "integrity": "sha512-NovQquuQLAQ5HuyjCz7WQP9MjRj7dx++yspwiyUiGl9ZyadHRSql1HZh5ogRd8W8w6YM6EQ/NTB8rgjLt5W65Q==", "dev": true, "requires": { "@babel/helper-compilation-targets": "^7.22.6", @@ -39943,9 +39942,9 @@ } }, "@babel/plugin-transform-async-generator-functions": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.7.tgz", - "integrity": "sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.23.9.tgz", + "integrity": "sha512-8Q3veQEDGe14dTYuwagbRtwxQDnytyg1JFu4/HwEMETeofocrB0U0ejBJIXoeG/t2oXZ8kzCyI0ZZfbT80VFNQ==", "dev": true, "requires": { "@babel/helper-environment-visitor": "^7.22.20", @@ -40005,16 +40004,15 @@ } }, "@babel/plugin-transform-classes": { - "version": "7.23.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.5.tgz", - "integrity": "sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==", + "version": "7.23.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.23.8.tgz", + "integrity": "sha512-yAYslGsY1bX6Knmg46RjiCiNSwJKv2IUC8qOdYKqMMr0491SXFhcHqOdRDeCRohOOIzwN/90C6mQ9qAKgrP7dg==", "dev": true, "requires": { "@babel/helper-annotate-as-pure": "^7.22.5", - "@babel/helper-compilation-targets": "^7.22.15", + "@babel/helper-compilation-targets": "^7.23.6", "@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/helper-split-export-declaration": "^7.22.6", @@ -40180,9 +40178,9 @@ } }, "@babel/plugin-transform-modules-systemjs": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.3.tgz", - "integrity": "sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.23.9.tgz", + "integrity": "sha512-KDlPRM6sLo4o1FkiSlXoAa8edLXFsKKIda779fbLrvmeuc3itnjCtaO6RrtoaANsIJANj+Vk1zqbZIMhkCAHVw==", "dev": true, "requires": { "@babel/helper-hoist-variables": "^7.22.5", @@ -40497,9 +40495,9 @@ } }, "@babel/preset-env": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.7.tgz", - "integrity": "sha512-SY27X/GtTz/L4UryMNJ6p4fH4nsgWbz84y9FE0bQeWJP6O5BhgVCt53CotQKHCOeXJel8VyhlhujhlltKms/CA==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.23.9.tgz", + "integrity": "sha512-3kBGTNBBk9DQiPoXYS0g0BYlwTQYUTifqgKTjxUwEUkduRT2QOa0FPGBJ+NROQhGyYO5BuTJwGvBnqKDykac6A==", "dev": true, "requires": { "@babel/compat-data": "^7.23.5", @@ -40529,13 +40527,13 @@ "@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6", "@babel/plugin-transform-arrow-functions": "^7.23.3", - "@babel/plugin-transform-async-generator-functions": "^7.23.7", + "@babel/plugin-transform-async-generator-functions": "^7.23.9", "@babel/plugin-transform-async-to-generator": "^7.23.3", "@babel/plugin-transform-block-scoped-functions": "^7.23.3", "@babel/plugin-transform-block-scoping": "^7.23.4", "@babel/plugin-transform-class-properties": "^7.23.3", "@babel/plugin-transform-class-static-block": "^7.23.4", - "@babel/plugin-transform-classes": "^7.23.5", + "@babel/plugin-transform-classes": "^7.23.8", "@babel/plugin-transform-computed-properties": "^7.23.3", "@babel/plugin-transform-destructuring": "^7.23.3", "@babel/plugin-transform-dotall-regex": "^7.23.3", @@ -40551,7 +40549,7 @@ "@babel/plugin-transform-member-expression-literals": "^7.23.3", "@babel/plugin-transform-modules-amd": "^7.23.3", "@babel/plugin-transform-modules-commonjs": "^7.23.3", - "@babel/plugin-transform-modules-systemjs": "^7.23.3", + "@babel/plugin-transform-modules-systemjs": "^7.23.9", "@babel/plugin-transform-modules-umd": "^7.23.3", "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5", "@babel/plugin-transform-new-target": "^7.23.3", @@ -40577,9 +40575,9 @@ "@babel/plugin-transform-unicode-regex": "^7.23.3", "@babel/plugin-transform-unicode-sets-regex": "^7.23.3", "@babel/preset-modules": "0.1.6-no-external-plugins", - "babel-plugin-polyfill-corejs2": "^0.4.7", - "babel-plugin-polyfill-corejs3": "^0.8.7", - "babel-plugin-polyfill-regenerator": "^0.5.4", + "babel-plugin-polyfill-corejs2": "^0.4.8", + "babel-plugin-polyfill-corejs3": "^0.9.0", + "babel-plugin-polyfill-regenerator": "^0.5.5", "core-js-compat": "^3.31.0", "semver": "^6.3.1" }, @@ -45965,7 +45963,7 @@ "version": "file:packages/icons", "requires": { "@babel/core": "^7.23.7", - "@babel/preset-env": "^7.23.7", + "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", "@types/prettier": "^2.7.3", @@ -48981,13 +48979,13 @@ } }, "babel-plugin-polyfill-corejs2": { - "version": "0.4.7", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.7.tgz", - "integrity": "sha512-LidDk/tEGDfuHW2DWh/Hgo4rmnw3cduK6ZkOI1NPFceSK3n/yAGeOsNT7FLnSGHkXj3RHGSEVkN3FsCTY6w2CQ==", + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.8.tgz", + "integrity": "sha512-OtIuQfafSzpo/LhnJaykc0R/MMnuLSSVjVYy9mHArIZ9qTCSZ6TpWCuEKZYVoN//t8HqBNScHrOtCrIK5IaGLg==", "dev": true, "requires": { "@babel/compat-data": "^7.22.6", - "@babel/helper-define-polyfill-provider": "^0.4.4", + "@babel/helper-define-polyfill-provider": "^0.5.0", "semver": "^6.3.1" }, "dependencies": { @@ -49000,22 +48998,22 @@ } }, "babel-plugin-polyfill-corejs3": { - "version": "0.8.7", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.7.tgz", - "integrity": "sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.9.0.tgz", + "integrity": "sha512-7nZPG1uzK2Ymhy/NbaOWTg3uibM2BmGASS4vHS4szRZAIR8R6GwA/xAujpdrXU5iyklrimWnLWU+BLF9suPTqg==", "dev": true, "requires": { - "@babel/helper-define-polyfill-provider": "^0.4.4", - "core-js-compat": "^3.33.1" + "@babel/helper-define-polyfill-provider": "^0.5.0", + "core-js-compat": "^3.34.0" } }, "babel-plugin-polyfill-regenerator": { - "version": "0.5.4", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.4.tgz", - "integrity": "sha512-S/x2iOCvDaCASLYsOOgWOq4bCfKYVqvO/uxjkaYyZ3rVsVE3CeAI/c84NpyuBBymEgNvHgjEot3a9/Z/kXvqsg==", + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.5.tgz", + "integrity": "sha512-OJGYZlhLqBh2DDHeqAxWB1XIvr49CxiJ2gIt61/PU55CQK4Z58OzMqjDe1zwQdQk+rBYsRc+1rJmdajM3gimHg==", "dev": true, "requires": { - "@babel/helper-define-polyfill-provider": "^0.4.4" + "@babel/helper-define-polyfill-provider": "^0.5.0" } }, "babel-preset-current-node-syntax": { @@ -50194,9 +50192,9 @@ } }, "core-js-compat": { - "version": "3.35.0", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.0.tgz", - "integrity": "sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==", + "version": "3.35.1", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.35.1.tgz", + "integrity": "sha512-sftHa5qUJY3rs9Zht1WEnmkvXputCyDBczPnr7QDgL8n3qrF3CMXY4VPSYtOLLiOUJcah2WNXREd48iOl6mQIw==", "dev": true, "requires": { "browserslist": "^4.22.2" diff --git a/packages/icons/package.json b/packages/icons/package.json index 79f409528c..1b73799ec3 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -35,7 +35,7 @@ }, "devDependencies": { "@babel/core": "^7.23.7", - "@babel/preset-env": "^7.23.7", + "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", "@types/prettier": "^2.7.3", From 1650adb8ca6496388d4859ae4ef023add081ec6a Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:52:33 +0000 Subject: [PATCH 14/55] chore(deps-dev): bump @testing-library/react from 14.1.2 to 14.2.0 (#2420) Bumps [@testing-library/react](https://github.com/testing-library/react-testing-library) from 14.1.2 to 14.2.0. - [Release notes](https://github.com/testing-library/react-testing-library/releases) - [Changelog](https://github.com/testing-library/react-testing-library/blob/main/CHANGELOG.md) - [Commits](https://github.com/testing-library/react-testing-library/compare/v14.1.2...v14.2.0) --- updated-dependencies: - dependency-name: "@testing-library/react" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 16 ++++++++-------- packages/circuit-ui/package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 53e998f812..a5cd2fe6a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11191,9 +11191,9 @@ "license": "MIT" }, "node_modules/@testing-library/react": { - "version": "14.1.2", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.1.2.tgz", - "integrity": "sha512-z4p7DVBTPjKM5qDZ0t5ZjzkpSNb+fZy1u6bzO7kk8oeGagpPCAtgh4cx1syrfp7a+QWkM021jGqjJaxJJnXAZg==", + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.0.tgz", + "integrity": "sha512-7uBnPHyOG6nDGCzv8SLeJbSa33ZoYw7swYpSLIgJvBALdq7l9zPNk33om4USrxy1lKTxXaVfufzLmq83WNfWIw==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", @@ -37485,7 +37485,7 @@ "@sumup/intl": "^1.5.0", "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "6.0.0", - "@testing-library/react": "^14.1.2", + "@testing-library/react": "^14.2.0", "@testing-library/user-event": "^14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "^18.16.19", @@ -45802,7 +45802,7 @@ "@sumup/intl": "^1.5.0", "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "6.0.0", - "@testing-library/react": "^14.1.2", + "@testing-library/react": "^14.2.0", "@testing-library/user-event": "^14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "^18.16.19", @@ -46486,9 +46486,9 @@ } }, "@testing-library/react": { - "version": "14.1.2", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.1.2.tgz", - "integrity": "sha512-z4p7DVBTPjKM5qDZ0t5ZjzkpSNb+fZy1u6bzO7kk8oeGagpPCAtgh4cx1syrfp7a+QWkM021jGqjJaxJJnXAZg==", + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.0.tgz", + "integrity": "sha512-7uBnPHyOG6nDGCzv8SLeJbSa33ZoYw7swYpSLIgJvBALdq7l9zPNk33om4USrxy1lKTxXaVfufzLmq83WNfWIw==", "dev": true, "requires": { "@babel/runtime": "^7.12.5", diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 95fba73522..8ab2e3dda9 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -60,7 +60,7 @@ "@sumup/intl": "^1.5.0", "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "6.0.0", - "@testing-library/react": "^14.1.2", + "@testing-library/react": "^14.2.0", "@testing-library/user-event": "^14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "^18.16.19", From efba4b12f95ab019588d443e5a0508daa48c3278 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 1 Feb 2024 10:58:55 +0000 Subject: [PATCH 15/55] chore(deps-dev): bump @babel/core from 7.23.7 to 7.23.9 (#2422) Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.23.7 to 7.23.9. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.23.9/packages/babel-core) --- updated-dependencies: - dependency-name: "@babel/core" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 128 ++++++++++++++++++------------------ packages/icons/package.json | 2 +- 2 files changed, 65 insertions(+), 65 deletions(-) diff --git a/package-lock.json b/package-lock.json index a5cd2fe6a7..3044a6d4d8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1276,20 +1276,20 @@ } }, "node_modules/@babel/core": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz", - "integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz", + "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==", "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.7", - "@babel/parser": "^7.23.6", - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.7", - "@babel/types": "^7.23.6", + "@babel/helpers": "^7.23.9", + "@babel/parser": "^7.23.9", + "@babel/template": "^7.23.9", + "@babel/traverse": "^7.23.9", + "@babel/types": "^7.23.9", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -1701,13 +1701,13 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.7.tgz", - "integrity": "sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz", + "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==", "dependencies": { - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.7", - "@babel/types": "^7.23.6" + "@babel/template": "^7.23.9", + "@babel/traverse": "^7.23.9", + "@babel/types": "^7.23.9" }, "engines": { "node": ">=6.9.0" @@ -1783,9 +1783,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", - "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz", + "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==", "bin": { "parser": "bin/babel-parser.js" }, @@ -3358,22 +3358,22 @@ } }, "node_modules/@babel/template": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", - "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz", + "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==", "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" + "@babel/code-frame": "^7.23.5", + "@babel/parser": "^7.23.9", + "@babel/types": "^7.23.9" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz", - "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz", + "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==", "dependencies": { "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", @@ -3381,8 +3381,8 @@ "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.6", - "@babel/types": "^7.23.6", + "@babel/parser": "^7.23.9", + "@babel/types": "^7.23.9", "debug": "^4.3.1", "globals": "^11.1.0" }, @@ -3391,9 +3391,9 @@ } }, "node_modules/@babel/types": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", - "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz", + "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==", "dependencies": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -37620,7 +37620,7 @@ "version": "3.4.0", "license": "Apache-2.0", "devDependencies": { - "@babel/core": "^7.23.7", + "@babel/core": "^7.23.9", "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", @@ -39303,20 +39303,20 @@ "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==" }, "@babel/core": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.7.tgz", - "integrity": "sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz", + "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==", "requires": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.7", - "@babel/parser": "^7.23.6", - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.7", - "@babel/types": "^7.23.6", + "@babel/helpers": "^7.23.9", + "@babel/parser": "^7.23.9", + "@babel/template": "^7.23.9", + "@babel/traverse": "^7.23.9", + "@babel/types": "^7.23.9", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -39617,13 +39617,13 @@ } }, "@babel/helpers": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.7.tgz", - "integrity": "sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz", + "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==", "requires": { - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.7", - "@babel/types": "^7.23.6" + "@babel/template": "^7.23.9", + "@babel/traverse": "^7.23.9", + "@babel/types": "^7.23.9" } }, "@babel/highlight": { @@ -39683,9 +39683,9 @@ } }, "@babel/parser": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.6.tgz", - "integrity": "sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==" + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz", + "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==" }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "version": "7.23.3", @@ -40749,19 +40749,19 @@ } }, "@babel/template": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", - "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz", + "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==", "requires": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" + "@babel/code-frame": "^7.23.5", + "@babel/parser": "^7.23.9", + "@babel/types": "^7.23.9" } }, "@babel/traverse": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.7.tgz", - "integrity": "sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz", + "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==", "requires": { "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", @@ -40769,16 +40769,16 @@ "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.6", - "@babel/types": "^7.23.6", + "@babel/parser": "^7.23.9", + "@babel/types": "^7.23.9", "debug": "^4.3.1", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.23.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.6.tgz", - "integrity": "sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==", + "version": "7.23.9", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz", + "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==", "requires": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -45962,7 +45962,7 @@ "@sumup/icons": { "version": "file:packages/icons", "requires": { - "@babel/core": "^7.23.7", + "@babel/core": "^7.23.9", "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", diff --git a/packages/icons/package.json b/packages/icons/package.json index 1b73799ec3..29c0d0115e 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -34,7 +34,7 @@ "prepublish": "npm run build" }, "devDependencies": { - "@babel/core": "^7.23.7", + "@babel/core": "^7.23.9", "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", From dcb816e84cc2edf26bd450d3f2a6f7a22ac30c38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 1 Feb 2024 13:10:45 +0000 Subject: [PATCH 16/55] Prefer web safe fonts over system fonts (#2416) --- .changeset/real-suits-relate.md | 5 +++++ .storybook/preview-head.html | 6 +++--- .storybook/themes.ts | 2 +- .../design-tokens/tests/__snapshots__/index.spec.ts.snap | 2 +- packages/design-tokens/themes/legacy/light.ts | 2 +- packages/design-tokens/themes/light.ts | 2 +- 6 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 .changeset/real-suits-relate.md diff --git a/.changeset/real-suits-relate.md b/.changeset/real-suits-relate.md new file mode 100644 index 0000000000..46d213e029 --- /dev/null +++ b/.changeset/real-suits-relate.md @@ -0,0 +1,5 @@ +--- +'@sumup/design-tokens': minor +--- + +Changed the order of the default font stack to prefer web safe fonts over system fonts. This provides a more consistent user experience across platforms, reduces layout shift when switching to SumUp's brand font, Aktiv Grotesk, and works around a (supposedly fixed) [Chrome bug](https://www.bram.us/2020/04/24/chrome-vs-blinkmacsystemfont-a-workaround/). diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index da5185505a..c3a7338b8f 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -31,9 +31,9 @@ } html { - font-family: 'aktiv-grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', - Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', - 'Segoe UI Emoji', 'Segoe UI Symbol'; + font-family: 'aktiv-grotesk', Helvetica, Arial, system-ui, sans-serif, + 'Segoe UI', Roboto, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol'; } .sbdocs.sbdocs-content { diff --git a/.storybook/themes.ts b/.storybook/themes.ts index 74f994206a..c7ac9f8732 100644 --- a/.storybook/themes.ts +++ b/.storybook/themes.ts @@ -5,7 +5,7 @@ const brand = { brandTitle: 'Circuit UI', brandUrl: 'https://github.com/sumup-oss/circuit-ui', fontBase: - 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', + 'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', }; export const light = create({ diff --git a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap index 30279281ae..2c697ab250 100644 --- a/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap +++ b/packages/design-tokens/tests/__snapshots__/index.spec.ts.snap @@ -28,7 +28,7 @@ exports[`Themes > light > should match the snapshot 1`] = ` "untilTera": "(max-width: 1279px)", }, "fontStack": { - "default": "aktiv-grotesk, -apple-system, BlinkMacSystemFont, \\"Segoe UI\\", Roboto, Helvetica, Arial, sans-serif, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"", + "default": "aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, \\"Segoe UI\\", Roboto, \\"Apple Color Emoji\\", \\"Segoe UI Emoji\\", \\"Segoe UI Symbol\\"", "mono": "Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace", }, "fontWeight": { diff --git a/packages/design-tokens/themes/legacy/light.ts b/packages/design-tokens/themes/legacy/light.ts index 753be6f8fd..a0b9640360 100644 --- a/packages/design-tokens/themes/legacy/light.ts +++ b/packages/design-tokens/themes/legacy/light.ts @@ -118,7 +118,7 @@ export const typography = { export const fontStack: FontStack = { default: - 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', + 'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', mono: 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace', }; diff --git a/packages/design-tokens/themes/light.ts b/packages/design-tokens/themes/light.ts index e3b7e0b4d5..b8dd56a906 100644 --- a/packages/design-tokens/themes/light.ts +++ b/packages/design-tokens/themes/light.ts @@ -756,7 +756,7 @@ export const light = [ { name: '--cui-font-stack-default', value: - 'aktiv-grotesk, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', + 'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', type: 'fontFamily', }, { From 1c9532c86f68c671c75bf1139563184838546e9d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 1 Feb 2024 13:37:46 +0000 Subject: [PATCH 17/55] Version Packages (#2415) --- .changeset/clever-ducks-play.md | 5 ----- .changeset/real-suits-relate.md | 5 ----- packages/circuit-ui/CHANGELOG.md | 6 ++++++ packages/circuit-ui/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 6 ++++++ packages/design-tokens/package.json | 2 +- 6 files changed, 14 insertions(+), 12 deletions(-) delete mode 100644 .changeset/clever-ducks-play.md delete mode 100644 .changeset/real-suits-relate.md diff --git a/.changeset/clever-ducks-play.md b/.changeset/clever-ducks-play.md deleted file mode 100644 index 77eee648eb..0000000000 --- a/.changeset/clever-ducks-play.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': minor ---- - -Added a minimum height to the SidePanelProvider to allow its children to be vertically centered. diff --git a/.changeset/real-suits-relate.md b/.changeset/real-suits-relate.md deleted file mode 100644 index 46d213e029..0000000000 --- a/.changeset/real-suits-relate.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/design-tokens': minor ---- - -Changed the order of the default font stack to prefer web safe fonts over system fonts. This provides a more consistent user experience across platforms, reduces layout shift when switching to SumUp's brand font, Aktiv Grotesk, and works around a (supposedly fixed) [Chrome bug](https://www.bram.us/2020/04/24/chrome-vs-blinkmacsystemfont-a-workaround/). diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index 9ea98bc1a3..d8212e5e47 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,5 +1,11 @@ # @sumup/circuit-ui +## 8.3.0 + +### Minor Changes + +- [#2414](https://github.com/sumup-oss/circuit-ui/pull/2414) [`5d7a92f`](https://github.com/sumup-oss/circuit-ui/commit/5d7a92f45c2475e1b9b705d2e2c349e5f9969437) Thanks [@connor-baer](https://github.com/connor-baer)! - Added a minimum height to the SidePanelProvider to allow its children to be vertically centered. + ## 8.2.0 ### Minor Changes diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 8ab2e3dda9..3c2e9e02c7 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/circuit-ui", - "version": "8.2.0", + "version": "8.3.0", "description": "SumUp's React UI component library", "type": "module", "main": "./dist/index.js", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 63d075c300..37c0b479d0 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -1,5 +1,11 @@ # @sumup/design-tokens +## 7.1.0 + +### Minor Changes + +- [#2416](https://github.com/sumup-oss/circuit-ui/pull/2416) [`dcb816e`](https://github.com/sumup-oss/circuit-ui/commit/dcb816e84cc2edf26bd450d3f2a6f7a22ac30c38) Thanks [@connor-baer](https://github.com/connor-baer)! - Changed the order of the default font stack to prefer web safe fonts over system fonts. This provides a more consistent user experience across platforms, reduces layout shift when switching to SumUp's brand font, Aktiv Grotesk, and works around a (supposedly fixed) [Chrome bug](https://www.bram.us/2020/04/24/chrome-vs-blinkmacsystemfont-a-workaround/). + ## 7.0.0 ### Major Changes diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index 835f00487d..b05b7755c2 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/design-tokens", - "version": "7.0.0", + "version": "7.1.0", "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From 1cb290d2fa899f38dbf2c9fa2b6cde36dd639025 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 7 Feb 2024 11:31:04 +0000 Subject: [PATCH 18/55] Make legacy component migration sound less urgent --- docs/introduction/3-component-lifecycle.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/introduction/3-component-lifecycle.mdx b/docs/introduction/3-component-lifecycle.mdx index 8ea4f390d3..58d265c6b2 100644 --- a/docs/introduction/3-component-lifecycle.mdx +++ b/docs/introduction/3-component-lifecycle.mdx @@ -42,7 +42,7 @@ import { Component } from '@sumup/circuit-ui/experimental'; -Legacy components are going to be phased out soon, but don't have a stable replacement yet. You can continue to use them in existing code until a stable alternative becomes available. We don't recommend adopting legacy components in new code. Legacy components won't receive any updates apart from bugfixes. +Legacy components are going to be phased out eventually, but don't have a stable replacement yet. You can continue to use them in existing code until a stable alternative becomes available. We don't recommend adopting legacy components in new code. Legacy components won't receive any updates apart from bugfixes. Legacy components are exported separately from stable components. Import them from `@sumup/circuit-ui/legacy`: From a6dba352ea97e49b47a91096a60a4b4ec4b08969 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 7 Feb 2024 11:36:32 +0000 Subject: [PATCH 19/55] Fix lock file --- package-lock.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 3044a6d4d8..1d60842a44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25689,9 +25689,9 @@ } }, "node_modules/magic-string": { - "version": "0.30.6", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.6.tgz", - "integrity": "sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==", + "version": "0.30.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz", + "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==", "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, @@ -37468,7 +37468,7 @@ }, "packages/circuit-ui": { "name": "@sumup/circuit-ui", - "version": "8.2.0", + "version": "8.3.0", "license": "Apache-2.0", "dependencies": { "@floating-ui/react-dom": "^2.0.5", @@ -37583,7 +37583,7 @@ }, "packages/design-tokens": { "name": "@sumup/design-tokens", - "version": "7.0.0", + "version": "7.1.0", "license": "Apache-2.0", "dependencies": { "browserslist": "^4.22.2", @@ -57101,9 +57101,9 @@ "dev": true }, "magic-string": { - "version": "0.30.6", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.6.tgz", - "integrity": "sha512-n62qCLbPjNjyo+owKtveQxZFZTBm+Ms6YoGD23Wew6Vw337PElFNifQpknPruVRQV57kVShPnLGo9vWxVhpPvA==", + "version": "0.30.7", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz", + "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==", "requires": { "@jridgewell/sourcemap-codec": "^1.4.15" }, From 789d79685bd3c5c5d7908bc960ae490c60a1811f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 8 Feb 2024 17:26:42 +0000 Subject: [PATCH 20/55] Fix display and transition of Carousel slides (#2434) --- .changeset/sour-terms-tap.md | 5 +++++ .../components/Carousel/components/Slide/Slide.tsx | 6 +++--- 2 files changed, 8 insertions(+), 3 deletions(-) create mode 100644 .changeset/sour-terms-tap.md diff --git a/.changeset/sour-terms-tap.md b/.changeset/sour-terms-tap.md new file mode 100644 index 0000000000..b0605c6d2c --- /dev/null +++ b/.changeset/sour-terms-tap.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Fix the display and transition of Carousel slides. diff --git a/packages/circuit-ui/components/Carousel/components/Slide/Slide.tsx b/packages/circuit-ui/components/Carousel/components/Slide/Slide.tsx index 1a763bc257..3058c58a71 100644 --- a/packages/circuit-ui/components/Carousel/components/Slide/Slide.tsx +++ b/packages/circuit-ui/components/Carousel/components/Slide/Slide.tsx @@ -85,7 +85,7 @@ export function Slide({ style={{ '--slide-width': dynamicWidth, '--slide-stack-order': stackOrder, - '--slide-transform-x': `${index * 100}%`, + '--slide-transform-x': `${-index * 100}%`, '--slide-animation-duration': `${animationDuration}ms`, }} className={classes.base} @@ -98,11 +98,11 @@ export function Slide({ slideDirection === SLIDE_DIRECTIONS.FORWARD && classes['animate-in'], isAnimating && - slideDirection === SLIDE_DIRECTIONS.FORWARD && + slideDirection === SLIDE_DIRECTIONS.BACK && classes['animate-out'], )} > -
{children}
+
{children}
); From 0e0a8e8bd261ff7cc8705f26a3b90c08620060ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 8 Feb 2024 17:51:50 +0000 Subject: [PATCH 21/55] Adjust shadows and gradients for dark mode (#2433) --- .changeset/stale-parrots-hear.md | 5 +++++ .../Carousel/components/Slide/Slide.module.css | 1 - .../circuit-ui/components/Modal/Modal.module.css | 6 +++--- .../components/Popover/Popover.module.css | 11 ++++++++--- .../DesktopNavigation/DesktopNavigation.module.css | 4 ++++ .../MobileNavigation/MobileNavigation.module.css | 13 ++++++------- .../Tooltip/__snapshots__/Tooltip.spec.tsx.snap | 10 ++++++++++ packages/circuit-ui/styles/style-mixins.spec.tsx | 3 +++ packages/circuit-ui/styles/style-mixins.ts | 3 +++ packages/circuit-ui/styles/utility.module.css | 3 +++ 10 files changed, 45 insertions(+), 14 deletions(-) create mode 100644 .changeset/stale-parrots-hear.md diff --git a/.changeset/stale-parrots-hear.md b/.changeset/stale-parrots-hear.md new file mode 100644 index 0000000000..a4c32d25fa --- /dev/null +++ b/.changeset/stale-parrots-hear.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Adjust components to better support the experimental dark theme. diff --git a/packages/circuit-ui/components/Carousel/components/Slide/Slide.module.css b/packages/circuit-ui/components/Carousel/components/Slide/Slide.module.css index 0313eaf89a..9c81cdf059 100644 --- a/packages/circuit-ui/components/Carousel/components/Slide/Slide.module.css +++ b/packages/circuit-ui/components/Carousel/components/Slide/Slide.module.css @@ -11,7 +11,6 @@ .inner { overflow: hidden; - box-shadow: 0 0 1px rgb(0 0 0 / 5%); will-change: width; } diff --git a/packages/circuit-ui/components/Modal/Modal.module.css b/packages/circuit-ui/components/Modal/Modal.module.css index 208161d258..c034e4e2e4 100644 --- a/packages/circuit-ui/components/Modal/Modal.module.css +++ b/packages/circuit-ui/components/Modal/Modal.module.css @@ -12,9 +12,9 @@ display: block; content: ""; background: linear-gradient( - rgb(255 255 255 / 0%), - rgb(255 255 255 / 66%), - rgb(255 255 255 / 100%) + color-mix(in sRGB, var(--cui-bg-elevated) 0%, transparent), + color-mix(in sRGB, var(--cui-bg-elevated) 66%, transparent), + color-mix(in sRGB, var(--cui-bg-elevated) 100%, transparent) ); } diff --git a/packages/circuit-ui/components/Popover/Popover.module.css b/packages/circuit-ui/components/Popover/Popover.module.css index cc263610b1..14d47150ad 100644 --- a/packages/circuit-ui/components/Popover/Popover.module.css +++ b/packages/circuit-ui/components/Popover/Popover.module.css @@ -6,6 +6,7 @@ font-size: var(--cui-typography-body-one-font-size); line-height: var(--cui-typography-body-one-line-height); text-align: left; + background: var(--cui-bg-elevated); } .icon { @@ -25,7 +26,11 @@ background-color: var(--cui-bg-elevated); border: 1px solid var(--cui-border-subtle); border-radius: var(--cui-border-radius-byte); + + /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%); + box-shadow: 0 3px 8px 0 + color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); opacity: 0; } @@ -93,9 +98,9 @@ height: var(--cui-spacings-kilo); content: ""; background: linear-gradient( - rgb(255 255 255 / 0%), - rgb(255 255 255 / 66%), - rgb(255 255 255 / 100%) + color-mix(in sRGB, var(--cui-bg-elevated) 0%, transparent), + color-mix(in sRGB, var(--cui-bg-elevated) 66%, transparent), + color-mix(in sRGB, var(--cui-bg-elevated) 100%, transparent) ); border-bottom-right-radius: var(--cui-border-radius-byte); border-bottom-left-radius: var(--cui-border-radius-byte); diff --git a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.module.css b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.module.css index 9ea5ea31e5..690dbc25e9 100644 --- a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.module.css +++ b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.module.css @@ -44,7 +44,11 @@ .primary:hover, .primary:focus-within { width: var(--primary-navigation-width-open); + + /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%); + box-shadow: 0 3px 8px 0 + color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); } @media (min-width: 1900px) { diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css index d891763782..5f73b9f35e 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.module.css @@ -24,9 +24,9 @@ height: var(--cui-spacings-mega); content: ""; background: linear-gradient( - rgb(255 255 255 / 0%), - rgb(255 255 255 / 66%), - rgb(255 255 255 / 100%) + color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent), + color-mix(in sRGB, var(--cui-bg-normal) 66%, transparent), + color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent) ); } @@ -79,10 +79,9 @@ width: 100%; padding: var(--cui-spacings-bit); background: linear-gradient( - to bottom, - rgb(255 255 255 / 100%), - rgb(255 255 255 / 100%) 60%, - rgb(255 255 255 / 0%) + color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent), + color-mix(in sRGB, var(--cui-bg-normal) 100%, transparent) 66%, + color-mix(in sRGB, var(--cui-bg-normal) 0%, transparent) ); } diff --git a/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap b/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap index acfb9faf91..1352d4595d 100644 --- a/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap +++ b/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap @@ -17,6 +17,7 @@ exports[`Tooltip > should override alignment styles with position styles 1`] = ` -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -74,6 +75,7 @@ exports[`Tooltip > should render with align bottom, when passed "bottom" for the -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; top: calc(50% - (16px + 4px)); left: 100%; @@ -124,6 +126,7 @@ exports[`Tooltip > should render with align center, when passed "center" for the -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -181,6 +184,7 @@ exports[`Tooltip > should render with align left, when passed "left" for the ali -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -238,6 +242,7 @@ exports[`Tooltip > should render with align right, when passed "right" for the a -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -295,6 +300,7 @@ exports[`Tooltip > should render with align top, when passed "top" for the align -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); bottom: 50%; bottom: calc(50% - (16px + 4px)); left: 100%; @@ -345,6 +351,7 @@ exports[`Tooltip > should render with position bottom, when passed "bottom" for -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); @@ -402,6 +409,7 @@ exports[`Tooltip > should render with position left, when passed "left" for the -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -459,6 +467,7 @@ exports[`Tooltip > should render with position right, when passed "right" for th -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -516,6 +525,7 @@ exports[`Tooltip > should render with position top, when passed "top" for the po -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx index a5586623b1..dc040da982 100644 --- a/packages/circuit-ui/styles/style-mixins.spec.tsx +++ b/packages/circuit-ui/styles/style-mixins.spec.tsx @@ -152,7 +152,10 @@ describe('Style helpers', () => { expect(styles).toMatchInlineSnapshot( ` " + /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 + color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); " `, ); diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts index 4ef35db5a8..ad005d9315 100644 --- a/packages/circuit-ui/styles/style-mixins.ts +++ b/packages/circuit-ui/styles/style-mixins.ts @@ -128,7 +128,10 @@ export const spacing = ( */ export function shadow(): SerializedStyles { return css` + /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); + box-shadow: 0 3px 8px 0 + color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); `; } diff --git a/packages/circuit-ui/styles/utility.module.css b/packages/circuit-ui/styles/utility.module.css index 25871c2d52..a83545443c 100644 --- a/packages/circuit-ui/styles/utility.module.css +++ b/packages/circuit-ui/styles/utility.module.css @@ -53,5 +53,8 @@ } .shadow { + /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%); + box-shadow: 0 3px 8px 0 + color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); } From 51d123dcb8b9506562a758493759db5359d9f3f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 8 Feb 2024 18:21:12 +0000 Subject: [PATCH 22/55] Adjust Calendar for dark mode --- .../CalendarWrapper/CalendarImportedStyles.ts | 62 +++++++++---------- .../CalendarWrapper/CalendarWrapper.tsx | 4 +- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarImportedStyles.ts b/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarImportedStyles.ts index 8570b4aa20..7a19e142bd 100644 --- a/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarImportedStyles.ts +++ b/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarImportedStyles.ts @@ -40,12 +40,12 @@ const calendarInheritStyles = () => css` outline: 0; } .PresetDateRangePicker_button__selected { - color: #fff; + color: var(--cui-fg-on-strong); background: #00a699; } .SingleDatePickerInput { display: inline-block; - background-color: #fff; + background-color: var(--cui-bg-normal); } .SingleDatePickerInput__withBorder { border-radius: 2px; @@ -128,7 +128,7 @@ const calendarInheritStyles = () => css` } .SingleDatePicker_picker { z-index: 1; - background-color: #fff; + background-color: var(--cui-bg-normal); position: absolute; } .SingleDatePicker_picker__rtl { @@ -149,7 +149,7 @@ const calendarInheritStyles = () => css` width: 100%; } .SingleDatePicker_picker__fullScreenPortal { - background-color: #fff; + background-color: var(--cui-bg-normal); } .SingleDatePicker_closeButton { background: 0 0; @@ -242,7 +242,7 @@ const calendarInheritStyles = () => css` border-left: 33px solid #008489; } .DayPickerKeyboardShortcuts_showSpan { - color: #fff; + color: var(--cui-fg-on-strong); position: absolute; } .DayPickerKeyboardShortcuts_showSpan__bottomRight { @@ -259,7 +259,7 @@ const calendarInheritStyles = () => css` } .DayPickerKeyboardShortcuts_panel { overflow: auto; - background: #fff; + background-color: var(--cui-bg-normal); border: 1px solid #dbdbdb; border-radius: 2px; position: absolute; @@ -316,7 +316,7 @@ const calendarInheritStyles = () => css` .CalendarDay__default { border: 1px solid #e4e7e7; color: #484848; - background: #fff; + background-color: var(--cui-bg-normal); } .CalendarDay__default:hover { background: #e4e7e7; @@ -330,20 +330,20 @@ const calendarInheritStyles = () => css` } .CalendarDay__outside { border: 0; - background: #fff; + background-color: var(--cui-bg-normal); color: #484848; } .CalendarDay__outside:hover { border: 0; } .CalendarDay__blocked_minimum_nights { - background: #fff; + background-color: var(--cui-bg-normal); border: 1px solid #eceeee; color: #cacccd; } .CalendarDay__blocked_minimum_nights:active, .CalendarDay__blocked_minimum_nights:hover { - background: #fff; + background-color: var(--cui-bg-normal); color: #cacccd; } .CalendarDay__highlighted_calendar { @@ -358,20 +358,20 @@ const calendarInheritStyles = () => css` .CalendarDay__selected_span { background: #66e2da; border: 1px double #33dacd; - color: #fff; + color: var(--cui-fg-on-strong); } .CalendarDay__selected_span:active, .CalendarDay__selected_span:hover { background: #33dacd; border: 1px double #33dacd; - color: #fff; + color: var(--cui-fg-on-strong); } .CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover { background: #00a699; border: 1px double #00a699; - color: #fff; + color: var(--cui-fg-on-strong); } .CalendarDay__hovered_span, .CalendarDay__hovered_span:hover { @@ -394,7 +394,7 @@ const calendarInheritStyles = () => css` .CalendarDay__blocked_out_of_range, .CalendarDay__blocked_out_of_range:active, .CalendarDay__blocked_out_of_range:hover { - background: #fff; + background-color: var(--cui-bg-normal); border: 1px solid #e4e7e7; color: #cacccd; } @@ -407,7 +407,7 @@ const calendarInheritStyles = () => css` border: 1px double #e4e7e7; } .CalendarMonth { - background: #fff; + background-color: var(--cui-bg-normal); text-align: center; vertical-align: top; -webkit-user-select: none; @@ -435,7 +435,7 @@ const calendarInheritStyles = () => css` padding-bottom: 7px; } .CalendarMonthGrid { - background: #fff; + background-color: var(--cui-bg-normal); text-align: left; z-index: 0; } @@ -510,7 +510,7 @@ const calendarInheritStyles = () => css` } .DayPickerNavigation_button__default { border: 1px solid #e4e7e7; - background-color: #fff; + background-color: var(--cui-bg-normal); color: #757575; } .DayPickerNavigation_button__default:focus, @@ -550,7 +550,7 @@ const calendarInheritStyles = () => css` } .DayPickerNavigation_button__vertical { padding: 5px; - background: #fff; + background-color: var(--cui-bg-normal); box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); position: relative; display: inline-block; @@ -580,12 +580,12 @@ const calendarInheritStyles = () => css` fill: #f2f2f2; } .DayPicker { - background: #fff; + background-color: var(--cui-bg-normal); position: relative; text-align: left; } .DayPicker__horizontal { - background: #fff; + background-color: var(--cui-bg-normal); } .DayPicker__verticalScrollable { height: 100%; @@ -594,7 +594,7 @@ const calendarInheritStyles = () => css` visibility: hidden; } .DayPicker__withBorder { - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); + box-shadow: 0 0 0 1px var(--cui-border-normal); border-radius: 3px; } .DayPicker_portal__horizontal { @@ -634,7 +634,7 @@ const calendarInheritStyles = () => css` top: 0; display: table-row; border-bottom: 1px solid #dbdbdb; - background: #fff; + background-color: var(--cui-bg-normal); margin-left: 0; left: 0; width: 100%; @@ -677,7 +677,7 @@ const calendarInheritStyles = () => css` .DateInput { margin: 0; padding: 0; - background: #fff; + background-color: var(--cui-bg-normal); position: relative; display: inline-block; width: 130px; @@ -698,7 +698,7 @@ const calendarInheritStyles = () => css` font-size: 19px; line-height: 24px; color: #484848; - background-color: #fff; + background-color: var(--cui-bg-normal); width: 100%; padding: 11px 11px 9px; border: 0; @@ -725,7 +725,7 @@ const calendarInheritStyles = () => css` } .DateInput_input__focused { outline: 0; - background: #fff; + background-color: var(--cui-bg-normal); border: 0; border-top: 0; border-right: 0; @@ -751,17 +751,17 @@ const calendarInheritStyles = () => css` width: 20px; height: 10px; left: 22px; - z-index: 2; + z-index: 20000; } .DateInput_fangShape { - fill: #fff; + fill: var(--cui-bg-normal); } .DateInput_fangStroke { - stroke: #dbdbdb; + stroke: var(--cui-border-normal); fill: transparent; } .DateRangePickerInput { - background-color: #fff; + background-color: var(--cui-bg-normal); display: inline-block; } .DateRangePickerInput__disabled { @@ -856,7 +856,7 @@ const calendarInheritStyles = () => css` } .DateRangePicker_picker { z-index: 1; - background-color: #fff; + background-color: var(--cui-bg-normal); position: absolute; } .DateRangePicker_picker__rtl { @@ -877,7 +877,7 @@ const calendarInheritStyles = () => css` width: 100%; } .DateRangePicker_picker__fullScreenPortal { - background-color: #fff; + background-color: var(--cui-bg-normal); } .DateRangePicker_closeButton { background: 0 0; diff --git a/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx b/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx index 4a0d6dd880..cbd06857f5 100644 --- a/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx +++ b/packages/circuit-ui/components/legacy/Calendar/components/CalendarWrapper/CalendarWrapper.tsx @@ -91,7 +91,7 @@ const blockedOutOfRange = css` .CalendarDay__blocked_out_of_range, .CalendarDay__blocked_out_of_range:active, .CalendarDay__blocked_out_of_range:hover { - background: #fff; + background-color: var(--cui-bg-normal); border: 1px solid var(--cui-border-divider); color: var(--cui-fg-normal-disabled); } @@ -157,7 +157,7 @@ const dateRangePickerInput = (theme: Theme) => css` } .DateInput_fang { - margin-top: -8px; + margin-top: -11px; } `; From 865178886b0c125fde57d5a60aeddfa48e6d22bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 8 Feb 2024 18:32:26 +0000 Subject: [PATCH 23/55] Version Packages (#2436) Co-authored-by: github-actions[bot] --- .changeset/sour-terms-tap.md | 5 ----- .changeset/stale-parrots-hear.md | 5 ----- packages/circuit-ui/CHANGELOG.md | 8 ++++++++ packages/circuit-ui/package.json | 2 +- 4 files changed, 9 insertions(+), 11 deletions(-) delete mode 100644 .changeset/sour-terms-tap.md delete mode 100644 .changeset/stale-parrots-hear.md diff --git a/.changeset/sour-terms-tap.md b/.changeset/sour-terms-tap.md deleted file mode 100644 index b0605c6d2c..0000000000 --- a/.changeset/sour-terms-tap.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': patch ---- - -Fix the display and transition of Carousel slides. diff --git a/.changeset/stale-parrots-hear.md b/.changeset/stale-parrots-hear.md deleted file mode 100644 index a4c32d25fa..0000000000 --- a/.changeset/stale-parrots-hear.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': patch ---- - -Adjust components to better support the experimental dark theme. diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index d8212e5e47..5d0570643f 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,5 +1,13 @@ # @sumup/circuit-ui +## 8.3.1 + +### Patch Changes + +- [#2434](https://github.com/sumup-oss/circuit-ui/pull/2434) [`789d796`](https://github.com/sumup-oss/circuit-ui/commit/789d79685bd3c5c5d7908bc960ae490c60a1811f) Thanks [@connor-baer](https://github.com/connor-baer)! - Fix the display and transition of Carousel slides. + +- [#2433](https://github.com/sumup-oss/circuit-ui/pull/2433) [`0e0a8e8`](https://github.com/sumup-oss/circuit-ui/commit/0e0a8e8bd261ff7cc8705f26a3b90c08620060ee) Thanks [@connor-baer](https://github.com/connor-baer)! - Adjust components to better support the experimental dark theme. + ## 8.3.0 ### Minor Changes diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 3c2e9e02c7..3175033f4e 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/circuit-ui", - "version": "8.3.0", + "version": "8.3.1", "description": "SumUp's React UI component library", "type": "module", "main": "./dist/index.js", From 16626e5347e88faccb1a5b3dd4d7066488ee9f3a Mon Sep 17 00:00:00 2001 From: NataliaSokolowska <32021807+NataliaSokolowska@users.noreply.github.com> Date: Fri, 9 Feb 2024 17:24:54 +0100 Subject: [PATCH 24/55] Add new Sparkles icon (#2440) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Connor Bär --- .changeset/friendly-suns-occur.md | 5 +++++ packages/icons/manifest.json | 5 +++++ packages/icons/web/v2/sparkles_16.svg | 3 +++ 3 files changed, 13 insertions(+) create mode 100644 .changeset/friendly-suns-occur.md create mode 100644 packages/icons/web/v2/sparkles_16.svg diff --git a/.changeset/friendly-suns-occur.md b/.changeset/friendly-suns-occur.md new file mode 100644 index 0000000000..9103d0e78a --- /dev/null +++ b/.changeset/friendly-suns-occur.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': major +--- + +Added a new `Sparkles` icon in size 16. diff --git a/packages/icons/manifest.json b/packages/icons/manifest.json index 053795fe21..645f01a084 100644 --- a/packages/icons/manifest.json +++ b/packages/icons/manifest.json @@ -301,6 +301,11 @@ "category": "Action", "size": "16" }, + { + "name": "sparkles", + "category": "Action", + "size": "16" + }, { "name": "stop", "category": "Action", diff --git a/packages/icons/web/v2/sparkles_16.svg b/packages/icons/web/v2/sparkles_16.svg new file mode 100644 index 0000000000..dbc47824e4 --- /dev/null +++ b/packages/icons/web/v2/sparkles_16.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file From f1977ef93fadfbbc8a255a3a616ff814e23cba50 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 8 Feb 2024 18:55:22 +0000 Subject: [PATCH 25/55] Replace no-bundle plugin with Rollup option (#2431) --- .changeset/empty-insects-return.md | 5 +++ package-lock.json | 57 ++---------------------------- packages/circuit-ui/package.json | 3 +- packages/circuit-ui/vite.config.ts | 9 ++--- 4 files changed, 11 insertions(+), 63 deletions(-) create mode 100644 .changeset/empty-insects-return.md diff --git a/.changeset/empty-insects-return.md b/.changeset/empty-insects-return.md new file mode 100644 index 0000000000..6bf2ac726e --- /dev/null +++ b/.changeset/empty-insects-return.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Changed how CSS Modules are bundled to fix CSS specificity issues caused by out-of-order styles. diff --git a/package-lock.json b/package-lock.json index 1d60842a44..0c803adc88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -36260,32 +36260,6 @@ "url": "https://opencollective.com/vitest" } }, - "node_modules/vite-plugin-no-bundle": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/vite-plugin-no-bundle/-/vite-plugin-no-bundle-3.0.0.tgz", - "integrity": "sha512-B8O4ZmWHbA8MWhsCqjcxwCLW5Kk2Q1Ax7JhZBBB/ort+DNONkBA2HND0d9lQ5d0Q+JSOMYAQDDQ1qAS1nmThyA==", - "dev": true, - "dependencies": { - "fast-glob": "^3.2.12", - "micromatch": "^4.0.5" - } - }, - "node_modules/vite-plugin-no-bundle/node_modules/fast-glob": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz", - "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==", - "dev": true, - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, "node_modules/vite-plugin-turbosnap": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/vite-plugin-turbosnap/-/vite-plugin-turbosnap-1.0.2.tgz", @@ -37501,8 +37475,7 @@ "react-swipeable": "^7.0.1", "typescript": "^5.3.3", "typescript-plugin-css-modules": "^5.0.2", - "vite": "^4.5.2", - "vite-plugin-no-bundle": "^3.0.0" + "vite": "^4.5.2" }, "engines": { "node": ">=18" @@ -45820,8 +45793,7 @@ "react-swipeable": "^7.0.1", "typescript": "^5.3.3", "typescript-plugin-css-modules": "^5.0.2", - "vite": "^4.5.2", - "vite-plugin-no-bundle": "^3.0.0" + "vite": "^4.5.2" }, "dependencies": { "@testing-library/jest-dom": { @@ -65198,31 +65170,6 @@ "vite": "^3.0.0 || ^4.0.0 || ^5.0.0-0" } }, - "vite-plugin-no-bundle": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/vite-plugin-no-bundle/-/vite-plugin-no-bundle-3.0.0.tgz", - "integrity": "sha512-B8O4ZmWHbA8MWhsCqjcxwCLW5Kk2Q1Ax7JhZBBB/ort+DNONkBA2HND0d9lQ5d0Q+JSOMYAQDDQ1qAS1nmThyA==", - "dev": true, - "requires": { - "fast-glob": "^3.2.12", - "micromatch": "^4.0.5" - }, - "dependencies": { - "fast-glob": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz", - "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==", - "dev": true, - "requires": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - } - } - } - }, "vite-plugin-turbosnap": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/vite-plugin-turbosnap/-/vite-plugin-turbosnap-1.0.2.tgz", diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 3175033f4e..a5e0c0e852 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -76,8 +76,7 @@ "react-swipeable": "^7.0.1", "typescript": "^5.3.3", "typescript-plugin-css-modules": "^5.0.2", - "vite": "^4.5.2", - "vite-plugin-no-bundle": "^3.0.0" + "vite": "^4.5.2" }, "peerDependencies": { "@emotion/is-prop-valid": "^1.2.1", diff --git a/packages/circuit-ui/vite.config.ts b/packages/circuit-ui/vite.config.ts index a7bd79d70a..1740ceac2c 100644 --- a/packages/circuit-ui/vite.config.ts +++ b/packages/circuit-ui/vite.config.ts @@ -17,7 +17,6 @@ import crypto from 'node:crypto'; import path from 'node:path'; import { UserConfig, defineConfig } from 'vite'; -import noBundlePlugin from 'vite-plugin-no-bundle'; import { dependencies, @@ -84,6 +83,9 @@ export default defineConfig({ }, minify: false, rollupOptions: { + output: { + preserveModules: true, + }, external: [ ...Object.keys(dependencies), ...Object.keys(peerDependencies), @@ -95,11 +97,6 @@ export default defineConfig({ ], }, }, - plugins: [ - // @ts-expect-error vite-plugin-no-bundle is bundled in a non-standard way. - // eslint-disable-next-line @typescript-eslint/no-unsafe-call - (noBundlePlugin.default || noBundlePlugin)({ root: './' }), - ], test: { globals: true, environment: 'jsdom', From ad4c31fcafcde9f8534c5793dfc1c7b04d645980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Fri, 9 Feb 2024 13:11:40 +0000 Subject: [PATCH 26/55] Make components compatible with React Server Components (#2430) --- .changeset/four-garlics-sleep.md | 5 ++ .eslintrc.js | 18 +++- package-lock.json | 88 +++++++++++++++++++ package.json | 1 + .../circuit-ui/components/Anchor/Anchor.tsx | 2 + .../circuit-ui/components/Button/base.tsx | 2 + .../Card/components/Header/Header.tsx | 2 + .../components/Carousel/Carousel.tsx | 2 + .../components/Checkbox/Checkbox.tsx | 2 + .../CheckboxGroup/CheckboxGroup.tsx | 2 + .../CurrencyInput/CurrencyInput.tsx | 2 + .../components/DateInput/DateInput.tsx | 2 + .../components/Hamburger/Hamburger.tsx | 2 + .../components/ImageInput/ImageInput.tsx | 2 + .../circuit-ui/components/Input/Input.tsx | 2 + .../components/ListItem/ListItem.tsx | 2 + .../ListItemGroup/ListItemGroup.tsx | 2 + .../circuit-ui/components/Modal/Modal.tsx | 2 + .../components/ModalContext/ModalContext.tsx | 2 + .../NotificationBanner/NotificationBanner.tsx | 2 + .../NotificationInline/NotificationInline.tsx | 2 + .../NotificationModal/NotificationModal.tsx | 2 + .../NotificationToast/NotificationToast.tsx | 2 + .../components/Pagination/Pagination.tsx | 2 + .../components/PageList/PageList.tsx | 2 + .../components/PageSelect/PageSelect.tsx | 2 + .../PercentageInput/PercentageInput.tsx | 2 + .../circuit-ui/components/Popover/Popover.tsx | 2 + .../components/ProgressBar/ProgressBar.tsx | 2 + .../components/RadioButton/RadioButton.tsx | 2 + .../RadioButtonGroup/RadioButtonGroup.tsx | 2 + .../components/SearchInput/SearchInput.tsx | 2 + .../circuit-ui/components/Select/Select.tsx | 2 + .../components/Selector/Selector.tsx | 2 + .../SelectorGroup/SelectorGroup.tsx | 2 + .../SideNavigation/SideNavigation.tsx | 2 + .../DesktopNavigation/DesktopNavigation.tsx | 2 + .../MobileNavigation/MobileNavigation.tsx | 2 + .../components/PrimaryLink/PrimaryLink.tsx | 2 + .../SecondaryLinks/SecondaryLinks.tsx | 2 + .../components/SidePanel/SidePanel.tsx | 2 + .../components/SidePanel/SidePanelContext.tsx | 2 + .../SidePanel/components/Header/Header.tsx | 2 + .../components/Skeleton/Skeleton.tsx | 2 + .../Step/examples/MultiStepForm.tsx | 2 + .../Step/examples/YesOrNoSlider.tsx | 2 + .../circuit-ui/components/Table/Table.tsx | 2 + .../Table/components/TableBody/TableBody.tsx | 2 + .../Table/components/TableHead/TableHead.tsx | 2 + .../components/TableHeader/TableHeader.tsx | 2 + .../Table/components/TableRow/TableRow.tsx | 2 + packages/circuit-ui/components/Tabs/Tabs.tsx | 2 + .../components/Tabs/components/Tab/Tab.tsx | 2 + packages/circuit-ui/components/Tag/Tag.tsx | 2 + .../components/TextArea/TextArea.tsx | 2 + .../components/ToastContext/ToastContext.tsx | 2 + .../circuit-ui/components/Toggle/Toggle.tsx | 2 + .../TopNavigation/TopNavigation.tsx | 2 + .../components/ProfileMenu/ProfileMenu.tsx | 2 + .../components/UtilityLinks/UtilityLinks.tsx | 2 + .../legacy/CalendarTag/CalendarTag.tsx | 2 + .../CalendarTagTwoStep/CalendarTagTwoStep.tsx | 2 + packages/circuit-ui/package.json | 1 + packages/circuit-ui/vite.config.ts | 6 ++ 64 files changed, 234 insertions(+), 1 deletion(-) create mode 100644 .changeset/four-garlics-sleep.md diff --git a/.changeset/four-garlics-sleep.md b/.changeset/four-garlics-sleep.md new file mode 100644 index 0000000000..ce7d1f00a4 --- /dev/null +++ b/.changeset/four-garlics-sleep.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Made all components compatible with [React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) out of the box by adding the [`use client`](https://react.dev/reference/react/use-client) directive to client components. diff --git a/.eslintrc.js b/.eslintrc.js index be75540d6c..854f095f77 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,5 +1,8 @@ module.exports = require('@sumup/foundry/eslint')({ - extends: ['plugin:storybook/recommended'], + extends: [ + 'plugin:storybook/recommended', + 'plugin:react-server-components/recommended', + ], plugins: ['@sumup/circuit-ui'], settings: { 'import/parsers': { @@ -26,6 +29,19 @@ module.exports = require('@sumup/foundry/eslint')({ files: ['**/*.stories.*'], rules: { 'import/no-relative-packages': 'off', + 'react-server-components/use-client': 'off', + }, + }, + { + files: ['**/*.spec.*'], + rules: { + 'react-server-components/use-client': 'off', + }, + }, + { + files: ['packages/circuit-ui/components/legacy/**/*'], + rules: { + '@sumup/circuit-ui/prefer-custom-properties': 'off', }, }, { diff --git a/package-lock.json b/package-lock.json index 0c803adc88..152575dd62 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,6 +37,7 @@ "chromatic": "^10.3.1", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react-server-components": "^1.1.1", "eslint-plugin-storybook": "^0.6.15", "jsdom": "^23.2.0", "lerna": "^8.0.2", @@ -18549,6 +18550,43 @@ "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0" } }, + "node_modules/eslint-plugin-react-server-components": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-server-components/-/eslint-plugin-react-server-components-1.1.1.tgz", + "integrity": "sha512-oL8d1mzvUgm6ezwKie0hQvXAgjx5II8e2vzt9vcp6Ygn+LXyg3KXdVTpQu6bsJomblbRBVLJCIFDSKr420+wmA==", + "dev": true, + "dependencies": { + "eslint-plugin-react": "^7.32.2", + "globals": "^13.20.0" + } + }, + "node_modules/eslint-plugin-react-server-components/node_modules/globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint-plugin-react-server-components/node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/eslint-plugin-react/node_modules/doctrine": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", @@ -32595,6 +32633,18 @@ "fsevents": "~2.3.2" } }, + "node_modules/rollup-plugin-preserve-directives": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/rollup-plugin-preserve-directives/-/rollup-plugin-preserve-directives-0.3.1.tgz", + "integrity": "sha512-Jn1gWU7G55A1sU6eFpXmwknfBasF0XbBzRqsE6nqrb/gun+mGV7nx++CwOSGPJQpFzFqvKm5U4XNKo3LTLi4Hg==", + "dev": true, + "dependencies": { + "magic-string": "^0.30.5" + }, + "peerDependencies": { + "rollup": "2.x || 3.x || 4.x" + } + }, "node_modules/rrweb-cssom": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz", @@ -37473,6 +37523,7 @@ "react-dates": "^21.8.0", "react-dom": "^18.2.0", "react-swipeable": "^7.0.1", + "rollup-plugin-preserve-directives": "^0.3.1", "typescript": "^5.3.3", "typescript-plugin-css-modules": "^5.0.2", "vite": "^4.5.2" @@ -45791,6 +45842,7 @@ "react-modal": "^3.16.1", "react-number-format": "5.3.0", "react-swipeable": "^7.0.1", + "rollup-plugin-preserve-directives": "^0.3.1", "typescript": "^5.3.3", "typescript-plugin-css-modules": "^5.0.2", "vite": "^4.5.2" @@ -51922,6 +51974,33 @@ "dev": true, "requires": {} }, + "eslint-plugin-react-server-components": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-server-components/-/eslint-plugin-react-server-components-1.1.1.tgz", + "integrity": "sha512-oL8d1mzvUgm6ezwKie0hQvXAgjx5II8e2vzt9vcp6Ygn+LXyg3KXdVTpQu6bsJomblbRBVLJCIFDSKr420+wmA==", + "dev": true, + "requires": { + "eslint-plugin-react": "^7.32.2", + "globals": "^13.20.0" + }, + "dependencies": { + "globals": { + "version": "13.24.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz", + "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==", + "dev": true, + "requires": { + "type-fest": "^0.20.2" + } + }, + "type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true + } + } + }, "eslint-plugin-storybook": { "version": "0.6.15", "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.15.tgz", @@ -62278,6 +62357,15 @@ "fsevents": "~2.3.2" } }, + "rollup-plugin-preserve-directives": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/rollup-plugin-preserve-directives/-/rollup-plugin-preserve-directives-0.3.1.tgz", + "integrity": "sha512-Jn1gWU7G55A1sU6eFpXmwknfBasF0XbBzRqsE6nqrb/gun+mGV7nx++CwOSGPJQpFzFqvKm5U4XNKo3LTLi4Hg==", + "dev": true, + "requires": { + "magic-string": "^0.30.5" + } + }, "rrweb-cssom": { "version": "0.6.0", "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz", diff --git a/package.json b/package.json index fb4b024ab6..d4c246bc71 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "chromatic": "^10.3.1", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-react-server-components": "^1.1.1", "eslint-plugin-storybook": "^0.6.15", "jsdom": "^23.2.0", "lerna": "^8.0.2", diff --git a/packages/circuit-ui/components/Anchor/Anchor.tsx b/packages/circuit-ui/components/Anchor/Anchor.tsx index 65f58ed334..0bdd0dd88f 100644 --- a/packages/circuit-ui/components/Anchor/Anchor.tsx +++ b/packages/circuit-ui/components/Anchor/Anchor.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, AnchorHTMLAttributes, diff --git a/packages/circuit-ui/components/Button/base.tsx b/packages/circuit-ui/components/Button/base.tsx index 54a2852de0..10a6b059ba 100644 --- a/packages/circuit-ui/components/Button/base.tsx +++ b/packages/circuit-ui/components/Button/base.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, type ButtonHTMLAttributes, diff --git a/packages/circuit-ui/components/Card/components/Header/Header.tsx b/packages/circuit-ui/components/Card/components/Header/Header.tsx index 8b7ad0cd02..2f18b7faa9 100644 --- a/packages/circuit-ui/components/Card/components/Header/Header.tsx +++ b/packages/circuit-ui/components/Card/components/Header/Header.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ReactNode, HTMLAttributes, forwardRef } from 'react'; import type { ClickEvent } from '../../../../types/events.js'; diff --git a/packages/circuit-ui/components/Carousel/Carousel.tsx b/packages/circuit-ui/components/Carousel/Carousel.tsx index cf70db73ef..e8d3d62e5e 100644 --- a/packages/circuit-ui/components/Carousel/Carousel.tsx +++ b/packages/circuit-ui/components/Carousel/Carousel.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ReactNode, useRef, useState } from 'react'; import ProgressBar from '../ProgressBar/index.js'; diff --git a/packages/circuit-ui/components/Checkbox/Checkbox.tsx b/packages/circuit-ui/components/Checkbox/Checkbox.tsx index 604cbb4ae0..381c1e49ba 100644 --- a/packages/circuit-ui/components/Checkbox/Checkbox.tsx +++ b/packages/circuit-ui/components/Checkbox/Checkbox.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { InputHTMLAttributes, forwardRef, diff --git a/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.tsx b/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.tsx index aafbc3a40a..0ae1069a6b 100644 --- a/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.tsx +++ b/packages/circuit-ui/components/CheckboxGroup/CheckboxGroup.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { FieldsetHTMLAttributes, InputHTMLAttributes, diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx index 6b0e2a8b48..7b205c4335 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, useId } from 'react'; import { resolveCurrencyFormat } from '@sumup/intl'; import { NumericFormat, NumericFormatProps } from 'react-number-format'; diff --git a/packages/circuit-ui/components/DateInput/DateInput.tsx b/packages/circuit-ui/components/DateInput/DateInput.tsx index 12a087e974..d983e85470 100644 --- a/packages/circuit-ui/components/DateInput/DateInput.tsx +++ b/packages/circuit-ui/components/DateInput/DateInput.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, useState, useEffect } from 'react'; import { PatternFormat } from 'react-number-format'; diff --git a/packages/circuit-ui/components/Hamburger/Hamburger.tsx b/packages/circuit-ui/components/Hamburger/Hamburger.tsx index 7f56962a7d..de3e320b01 100644 --- a/packages/circuit-ui/components/Hamburger/Hamburger.tsx +++ b/packages/circuit-ui/components/Hamburger/Hamburger.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef } from 'react'; import { legacyButtonSizeMap } from '../Button/index.js'; diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.tsx index 6bd1eb825f..d8a915d3c1 100644 --- a/packages/circuit-ui/components/ImageInput/ImageInput.tsx +++ b/packages/circuit-ui/components/ImageInput/ImageInput.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { useState, useRef, diff --git a/packages/circuit-ui/components/Input/Input.tsx b/packages/circuit-ui/components/Input/Input.tsx index e77b188fd5..27be520a92 100644 --- a/packages/circuit-ui/components/Input/Input.tsx +++ b/packages/circuit-ui/components/Input/Input.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ComponentType, forwardRef, diff --git a/packages/circuit-ui/components/ListItem/ListItem.tsx b/packages/circuit-ui/components/ListItem/ListItem.tsx index 0122b5b22e..5ce6cbac23 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ReactNode, forwardRef, diff --git a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.tsx b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.tsx index 02caef39d5..d4883a2465 100644 --- a/packages/circuit-ui/components/ListItemGroup/ListItemGroup.tsx +++ b/packages/circuit-ui/components/ListItemGroup/ListItemGroup.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, HTMLAttributes, ReactNode, useState } from 'react'; import { AccessibilityError } from '../../util/errors.js'; diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx index f160e7d998..47b73b5d81 100644 --- a/packages/circuit-ui/components/Modal/Modal.tsx +++ b/packages/circuit-ui/components/Modal/Modal.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { HTMLAttributes, ReactNode } from 'react'; import ReactModal from 'react-modal'; diff --git a/packages/circuit-ui/components/ModalContext/ModalContext.tsx b/packages/circuit-ui/components/ModalContext/ModalContext.tsx index dab5d76e71..9236365ea4 100644 --- a/packages/circuit-ui/components/ModalContext/ModalContext.tsx +++ b/packages/circuit-ui/components/ModalContext/ModalContext.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { createContext, useEffect, diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx index 88372a1cad..98bbe5944c 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx +++ b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { MouseEvent, KeyboardEvent, diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx index 656b3f4300..88734e4a98 100644 --- a/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx +++ b/packages/circuit-ui/components/NotificationInline/NotificationInline.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ForwardRefExoticComponent, HTMLAttributes, diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx index 489f08c463..f5ee5d7f0c 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { FC, ReactNode, SVGProps } from 'react'; import ReactModal from 'react-modal'; diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx index 35555f889a..3ccd97e1ab 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { HTMLAttributes, RefObject, useEffect, useRef, useState } from 'react'; import { useAnimation } from '../../hooks/useAnimation/index.js'; diff --git a/packages/circuit-ui/components/Pagination/Pagination.tsx b/packages/circuit-ui/components/Pagination/Pagination.tsx index 957d85fe2c..516c5e4429 100644 --- a/packages/circuit-ui/components/Pagination/Pagination.tsx +++ b/packages/circuit-ui/components/Pagination/Pagination.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { HTMLAttributes, ReactElement } from 'react'; import { ChevronLeft, ChevronRight } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx b/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx index 2fd1bf5e3a..ce642c86c1 100644 --- a/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx +++ b/packages/circuit-ui/components/Pagination/components/PageList/PageList.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { FC, OlHTMLAttributes } from 'react'; import Button from '../../../Button/index.js'; diff --git a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx index f325a5cbb4..8ab0be9879 100644 --- a/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx +++ b/packages/circuit-ui/components/Pagination/components/PageSelect/PageSelect.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { useCallback, FunctionComponent, ChangeEvent, Fragment } from 'react'; import Select, { SelectProps } from '../../../Select/index.js'; diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx index ac3c7e8729..4a393644a9 100644 --- a/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, useId } from 'react'; import { resolveNumberFormat } from '@sumup/intl'; import { NumericFormat, NumericFormatProps } from 'react-number-format'; diff --git a/packages/circuit-ui/components/Popover/Popover.tsx b/packages/circuit-ui/components/Popover/Popover.tsx index dd8719ae49..be2d360bf4 100644 --- a/packages/circuit-ui/components/Popover/Popover.tsx +++ b/packages/circuit-ui/components/Popover/Popover.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { Fragment, useEffect, diff --git a/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx b/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx index c54590c272..a7d644876a 100644 --- a/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx +++ b/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx @@ -117,6 +117,8 @@ export function ProgressBar({ className, ...props }: ProgressBarProps): ReturnType { + // useId is allowed in Server Components + // eslint-disable-next-line react-server-components/use-client const ariaId = useId(); if ( diff --git a/packages/circuit-ui/components/RadioButton/RadioButton.tsx b/packages/circuit-ui/components/RadioButton/RadioButton.tsx index fc5f69d76b..b603f5d418 100644 --- a/packages/circuit-ui/components/RadioButton/RadioButton.tsx +++ b/packages/circuit-ui/components/RadioButton/RadioButton.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { createContext, InputHTMLAttributes, diff --git a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx index 22e745ae00..140039b0e5 100644 --- a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx @@ -132,6 +132,8 @@ export const RadioButtonGroup = forwardRef( }: RadioButtonGroupProps, ref: RadioButtonGroupProps['ref'], ) => { + // useId is allowed in Server Components + // eslint-disable-next-line react-server-components/use-client const randomName = useId(); const name = customName || randomName; const validationHintId = useId(); diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.tsx index 224639c7df..b337129c18 100644 --- a/packages/circuit-ui/components/SearchInput/SearchInput.tsx +++ b/packages/circuit-ui/components/SearchInput/SearchInput.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, useRef } from 'react'; import { Search } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/Select/Select.tsx b/packages/circuit-ui/components/Select/Select.tsx index 9ba9587808..c743fb853c 100644 --- a/packages/circuit-ui/components/Select/Select.tsx +++ b/packages/circuit-ui/components/Select/Select.tsx @@ -139,6 +139,8 @@ export const Select = forwardRef( 'The `label` prop is missing or invalid. Pass `hideLabel` if you intend to hide the label visually.', ); } + // useId is allowed in Server Components + // eslint-disable-next-line react-server-components/use-client const id = useId(); const selectId = customId || id; const validationHintId = useId(); diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx index f877bb2680..ebf4345595 100644 --- a/packages/circuit-ui/components/Selector/Selector.tsx +++ b/packages/circuit-ui/components/Selector/Selector.tsx @@ -128,6 +128,8 @@ export const Selector = forwardRef( }, ref, ) => { + // useId is allowed in Server Components + // eslint-disable-next-line react-server-components/use-client const randomId = useId(); const inputId = customId || randomId; const descriptionId = useId(); diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx index 0d3fc31ae9..ff2b78dc74 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx +++ b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx @@ -146,6 +146,8 @@ export const SelectorGroup = forwardRef< }, ref, ) => { + // useId is allowed in Server Components + // eslint-disable-next-line react-server-components/use-client const randomName = useId(); const name = customName || randomName; const validationHintId = useId(); diff --git a/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx b/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx index bc39bbe58b..26454cf475 100644 --- a/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx +++ b/packages/circuit-ui/components/SideNavigation/SideNavigation.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { useEffect } from 'react'; import { useMedia } from '../../hooks/useMedia/index.js'; diff --git a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx index 406ff98bec..faf07cb1b3 100644 --- a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.tsx @@ -15,6 +15,8 @@ /* eslint-disable jsx-a11y/no-redundant-roles */ +'use client'; + import utilityClasses from '../../../../styles/utility.js'; import { clsx } from '../../../../styles/clsx.js'; import { useFocusList } from '../../../../hooks/useFocusList/index.js'; diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx index 65e5e2c680..7781b83b97 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { Fragment } from 'react'; import ReactModal from 'react-modal'; import { ChevronDown } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx index 148200d702..d68e32e2b1 100644 --- a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ArrowRight } from '@sumup/icons'; import { ComponentType } from 'react'; diff --git a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx index 2419d59c6c..c53b1c8f37 100644 --- a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.tsx @@ -15,6 +15,8 @@ /* eslint-disable jsx-a11y/no-redundant-roles */ +'use client'; + import { forwardRef } from 'react'; import type { AsPropType } from '../../../../types/prop-types.js'; diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.tsx index 541125642c..d5ebd37db7 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanel.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanel.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { UIEventHandler, useEffect, useId, useState } from 'react'; import type { Props as ReactModalProps } from 'react-modal'; diff --git a/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx b/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx index d4fe0a8c73..6191ec2cd1 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanelContext.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { createContext, useCallback, diff --git a/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx b/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx index c203ca74ae..9ff4445bbe 100644 --- a/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx +++ b/packages/circuit-ui/components/SidePanel/components/Header/Header.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import type { HTMLAttributes } from 'react'; import { ArrowLeft } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/Skeleton/Skeleton.tsx b/packages/circuit-ui/components/Skeleton/Skeleton.tsx index 3afbfb4c11..d8a6da353b 100644 --- a/packages/circuit-ui/components/Skeleton/Skeleton.tsx +++ b/packages/circuit-ui/components/Skeleton/Skeleton.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { createContext, useContext, diff --git a/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx b/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx index 63b6a87ef7..ff2db332fc 100644 --- a/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx +++ b/packages/circuit-ui/components/Step/examples/MultiStepForm.tsx @@ -15,6 +15,8 @@ /* istanbul ignore file */ +'use client'; + import Headline from '../../Headline/index.js'; import Button from '../../Button/index.js'; import ButtonGroup from '../../ButtonGroup/index.js'; diff --git a/packages/circuit-ui/components/Step/examples/YesOrNoSlider.tsx b/packages/circuit-ui/components/Step/examples/YesOrNoSlider.tsx index 5b28a428b0..3d44864d01 100644 --- a/packages/circuit-ui/components/Step/examples/YesOrNoSlider.tsx +++ b/packages/circuit-ui/components/Step/examples/YesOrNoSlider.tsx @@ -16,6 +16,8 @@ /* istanbul ignore file */ /* eslint-disable import/no-extraneous-dependencies */ +'use client'; + import { ReactNode, useState } from 'react'; import { SwipeableProps, diff --git a/packages/circuit-ui/components/Table/Table.tsx b/packages/circuit-ui/components/Table/Table.tsx index e6516fc9b5..2b30334045 100644 --- a/packages/circuit-ui/components/Table/Table.tsx +++ b/packages/circuit-ui/components/Table/Table.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { Component, createRef, HTMLAttributes, UIEvent } from 'react'; import { isNil } from '../../util/type-check.js'; diff --git a/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx b/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx index e9425a3c04..1267aff1cc 100644 --- a/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx +++ b/packages/circuit-ui/components/Table/components/TableBody/TableBody.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { mapRowProps, mapCellProps } from '../../utils.js'; import { Row } from '../../types.js'; import TableRow from '../TableRow/index.js'; diff --git a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx index a877f76257..d322921ea4 100644 --- a/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx +++ b/packages/circuit-ui/components/Table/components/TableHead/TableHead.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { Fragment } from 'react'; import TableRow from '../TableRow/index.js'; diff --git a/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx b/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx index 2223e42f7b..09ce4fc892 100644 --- a/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx +++ b/packages/circuit-ui/components/Table/components/TableHeader/TableHeader.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import type { ThHTMLAttributes } from 'react'; import SortArrow from '../SortArrow/index.js'; diff --git a/packages/circuit-ui/components/Table/components/TableRow/TableRow.tsx b/packages/circuit-ui/components/Table/components/TableRow/TableRow.tsx index d2301f8afa..5f1a79552b 100644 --- a/packages/circuit-ui/components/Table/components/TableRow/TableRow.tsx +++ b/packages/circuit-ui/components/Table/components/TableRow/TableRow.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import type { HTMLAttributes } from 'react'; import type { ClickEvent } from '../../../../types/events.js'; diff --git a/packages/circuit-ui/components/Tabs/Tabs.tsx b/packages/circuit-ui/components/Tabs/Tabs.tsx index 8a42631dca..d21210b963 100644 --- a/packages/circuit-ui/components/Tabs/Tabs.tsx +++ b/packages/circuit-ui/components/Tabs/Tabs.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { Component, Fragment, ReactElement, ReactNode, createRef } from 'react'; import { diff --git a/packages/circuit-ui/components/Tabs/components/Tab/Tab.tsx b/packages/circuit-ui/components/Tabs/components/Tab/Tab.tsx index 97fb193519..8367d26d08 100644 --- a/packages/circuit-ui/components/Tabs/components/Tab/Tab.tsx +++ b/packages/circuit-ui/components/Tabs/components/Tab/Tab.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from 'react'; import { useComponents } from '../../../ComponentsContext/index.js'; diff --git a/packages/circuit-ui/components/Tag/Tag.tsx b/packages/circuit-ui/components/Tag/Tag.tsx index b30f5957bb..70b7b0d196 100644 --- a/packages/circuit-ui/components/Tag/Tag.tsx +++ b/packages/circuit-ui/components/Tag/Tag.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, type HTMLAttributes, diff --git a/packages/circuit-ui/components/TextArea/TextArea.tsx b/packages/circuit-ui/components/TextArea/TextArea.tsx index 89d7013598..590550535a 100644 --- a/packages/circuit-ui/components/TextArea/TextArea.tsx +++ b/packages/circuit-ui/components/TextArea/TextArea.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, useRef } from 'react'; import Input from '../Input/index.js'; diff --git a/packages/circuit-ui/components/ToastContext/ToastContext.tsx b/packages/circuit-ui/components/ToastContext/ToastContext.tsx index 57daf0eea5..d8cade5fdb 100644 --- a/packages/circuit-ui/components/ToastContext/ToastContext.tsx +++ b/packages/circuit-ui/components/ToastContext/ToastContext.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { createContext, ReactNode, diff --git a/packages/circuit-ui/components/Toggle/Toggle.tsx b/packages/circuit-ui/components/Toggle/Toggle.tsx index 779795b135..a137c2f51a 100644 --- a/packages/circuit-ui/components/Toggle/Toggle.tsx +++ b/packages/circuit-ui/components/Toggle/Toggle.tsx @@ -92,6 +92,8 @@ export const Toggle = forwardRef( } } + // useId is allowed in Server Components + // eslint-disable-next-line react-server-components/use-client const switchId = useId(); const labelId = useId(); const descriptionId = useId(); diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx b/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx index b8c084ddd1..330522c392 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { HTMLAttributes, ReactNode, useEffect } from 'react'; import Hamburger, { HamburgerProps } from '../Hamburger/index.js'; diff --git a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx index 4c918a4e02..9871f62258 100644 --- a/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx +++ b/packages/circuit-ui/components/TopNavigation/components/ProfileMenu/ProfileMenu.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { useState, ButtonHTMLAttributes, useEffect } from 'react'; import { ChevronDown, Profile as ProfileIcon } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx index c9a502472a..1cc6cce01d 100644 --- a/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx +++ b/packages/circuit-ui/components/TopNavigation/components/UtilityLinks/UtilityLinks.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import type { MouseEvent, KeyboardEvent, AnchorHTMLAttributes } from 'react'; import type { IconComponentType } from '@sumup/icons'; diff --git a/packages/circuit-ui/components/legacy/CalendarTag/CalendarTag.tsx b/packages/circuit-ui/components/legacy/CalendarTag/CalendarTag.tsx index 80f2dbc3a7..7f8552ebc3 100644 --- a/packages/circuit-ui/components/legacy/CalendarTag/CalendarTag.tsx +++ b/packages/circuit-ui/components/legacy/CalendarTag/CalendarTag.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { Component, createRef } from 'react'; import type { Moment } from 'moment'; diff --git a/packages/circuit-ui/components/legacy/CalendarTagTwoStep/CalendarTagTwoStep.tsx b/packages/circuit-ui/components/legacy/CalendarTagTwoStep/CalendarTagTwoStep.tsx index dac608be49..3778aa9ccb 100644 --- a/packages/circuit-ui/components/legacy/CalendarTagTwoStep/CalendarTagTwoStep.tsx +++ b/packages/circuit-ui/components/legacy/CalendarTagTwoStep/CalendarTagTwoStep.tsx @@ -15,6 +15,8 @@ /** @jsxImportSource @emotion/react */ +'use client'; + import { Component, createRef } from 'react'; import { css } from '@emotion/react'; import type { Moment } from 'moment'; diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index a5e0c0e852..2eea528a60 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -74,6 +74,7 @@ "react-dates": "^21.8.0", "react-dom": "^18.2.0", "react-swipeable": "^7.0.1", + "rollup-plugin-preserve-directives": "^0.3.1", "typescript": "^5.3.3", "typescript-plugin-css-modules": "^5.0.2", "vite": "^4.5.2" diff --git a/packages/circuit-ui/vite.config.ts b/packages/circuit-ui/vite.config.ts index 1740ceac2c..e5fce2b246 100644 --- a/packages/circuit-ui/vite.config.ts +++ b/packages/circuit-ui/vite.config.ts @@ -15,6 +15,7 @@ import crypto from 'node:crypto'; import path from 'node:path'; +import preserveDirectives from 'rollup-plugin-preserve-directives'; import { UserConfig, defineConfig } from 'vite'; @@ -83,6 +84,11 @@ export default defineConfig({ }, minify: false, rollupOptions: { + plugins: [ + // @ts-expect-error rollup-plugin-preserve-directives is bundled in a non-standard way. + // eslint-disable-next-line @typescript-eslint/no-unsafe-call + (preserveDirectives.default || preserveDirectives)(), + ], output: { preserveModules: true, }, From 6fcf2f07dded234816d1780398659b24341a8b90 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Fri, 9 Feb 2024 16:35:40 +0000 Subject: [PATCH 27/55] Downgrade changeset --- .changeset/friendly-suns-occur.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/friendly-suns-occur.md b/.changeset/friendly-suns-occur.md index 9103d0e78a..8a32c2e1f4 100644 --- a/.changeset/friendly-suns-occur.md +++ b/.changeset/friendly-suns-occur.md @@ -1,5 +1,5 @@ --- -'@sumup/icons': major +'@sumup/icons': minor --- Added a new `Sparkles` icon in size 16. From be731a024a4a4397fdcc719ff218b6bfabe663c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Fri, 9 Feb 2024 16:49:23 +0000 Subject: [PATCH 28/55] Version Packages (#2441) --- .changeset/empty-insects-return.md | 5 ----- .changeset/four-garlics-sleep.md | 5 ----- .changeset/friendly-suns-occur.md | 5 ----- packages/circuit-ui/CHANGELOG.md | 10 ++++++++++ packages/circuit-ui/package.json | 2 +- packages/icons/CHANGELOG.md | 6 ++++++ packages/icons/package.json | 2 +- 7 files changed, 18 insertions(+), 17 deletions(-) delete mode 100644 .changeset/empty-insects-return.md delete mode 100644 .changeset/four-garlics-sleep.md delete mode 100644 .changeset/friendly-suns-occur.md diff --git a/.changeset/empty-insects-return.md b/.changeset/empty-insects-return.md deleted file mode 100644 index 6bf2ac726e..0000000000 --- a/.changeset/empty-insects-return.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': patch ---- - -Changed how CSS Modules are bundled to fix CSS specificity issues caused by out-of-order styles. diff --git a/.changeset/four-garlics-sleep.md b/.changeset/four-garlics-sleep.md deleted file mode 100644 index ce7d1f00a4..0000000000 --- a/.changeset/four-garlics-sleep.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': minor ---- - -Made all components compatible with [React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) out of the box by adding the [`use client`](https://react.dev/reference/react/use-client) directive to client components. diff --git a/.changeset/friendly-suns-occur.md b/.changeset/friendly-suns-occur.md deleted file mode 100644 index 8a32c2e1f4..0000000000 --- a/.changeset/friendly-suns-occur.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Added a new `Sparkles` icon in size 16. diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index 5d0570643f..e69f9c3a43 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,5 +1,15 @@ # @sumup/circuit-ui +## 8.4.0 + +### Minor Changes + +- [`ad4c31f`](https://github.com/sumup-oss/circuit-ui/commit/ad4c31fcafcde9f8534c5793dfc1c7b04d645980) Thanks [@connor-baer](https://github.com/connor-baer)! - Made all components compatible with [React Server Components](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md) out of the box by adding the [`use client`](https://react.dev/reference/react/use-client) directive to client components. + +### Patch Changes + +- [`f1977ef`](https://github.com/sumup-oss/circuit-ui/commit/f1977ef93fadfbbc8a255a3a616ff814e23cba50) Thanks [@connor-baer](https://github.com/connor-baer)! - Changed how CSS Modules are bundled to fix CSS specificity issues caused by out-of-order styles. + ## 8.3.1 ### Patch Changes diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 2eea528a60..30d46e434b 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/circuit-ui", - "version": "8.3.1", + "version": "8.4.0", "description": "SumUp's React UI component library", "type": "module", "main": "./dist/index.js", diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 19a6f22ed1..0f0aa26b7c 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,11 @@ # @sumup/icons +## 3.5.0 + +### Minor Changes + +- [#2440](https://github.com/sumup-oss/circuit-ui/pull/2440) [`16626e5`](https://github.com/sumup-oss/circuit-ui/commit/16626e5347e88faccb1a5b3dd4d7066488ee9f3a) Thanks [@NataliaSokolowska](https://github.com/NataliaSokolowska)! - Added a new `Sparkles` icon in size 16. + ## 3.4.0 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 29c0d0115e..4ec1f7e6f3 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/icons", - "version": "3.4.0", + "version": "3.5.0", "description": "A collection of icons by SumUp", "type": "module", "main": "./dist/index.js", From 2fa3c77d1cc1fcb3645afcf09fb31c7988d975f6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 14 Feb 2024 10:56:25 +0000 Subject: [PATCH 29/55] Remove obsolete prop reference in SidePanel docs --- packages/circuit-ui/components/SidePanel/SidePanel.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.mdx b/packages/circuit-ui/components/SidePanel/SidePanel.mdx index d223d40799..522c0f0ae2 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanel.mdx +++ b/packages/circuit-ui/components/SidePanel/SidePanel.mdx @@ -33,10 +33,9 @@ Once the side panel is closed focus is returned to the trigger element. First, wrap the primary content of your application in the `SidePanelProvider`. There should be only one instance of `SidePanelProvider` as part of your global application layout. On desktop resolutions the primary content will be resized when the side panel is opened. -Additionally, the `SidePanelProvider` allows for the side panels to work seamlessly with the top navigation through the `withTopNavigation` prop. ```tsx - + {/* Your primary content here... */} ``` From 9964c358f15884122412130770bf6450ea084208 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 20 Feb 2024 22:16:13 +0000 Subject: [PATCH 30/55] chore(deps-dev): bump ip from 2.0.0 to 2.0.1 (#2442) Bumps [ip](https://github.com/indutny/node-ip) from 2.0.0 to 2.0.1. - [Commits](https://github.com/indutny/node-ip/compare/v2.0.0...v2.0.1) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 152575dd62..a3c3ea1881 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21666,9 +21666,9 @@ } }, "node_modules/ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", + "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", "dev": true }, "node_modules/ipaddr.js": { @@ -37492,7 +37492,7 @@ }, "packages/circuit-ui": { "name": "@sumup/circuit-ui", - "version": "8.3.0", + "version": "8.4.0", "license": "Apache-2.0", "dependencies": { "@floating-ui/react-dom": "^2.0.5", @@ -37641,7 +37641,7 @@ }, "packages/icons": { "name": "@sumup/icons", - "version": "3.4.0", + "version": "3.5.0", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.23.9", @@ -54201,9 +54201,9 @@ } }, "ip": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", - "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.1.tgz", + "integrity": "sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==", "dev": true }, "ipaddr.js": { From a36e35296a720415e8dfc8cab688d19b685e61ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=ADssa=20Dutra?= Date: Thu, 22 Feb 2024 16:52:58 +0100 Subject: [PATCH 31/55] Add flag icons for AE, HK, JP, MY, MX, NZ, and SG (#2443) * feat: add new icons * fix: typo on manifest * fix: add montenegro flag back * fix: fix alphabetical order * fix: alphabetical order for new zeland * fix: alphabetical order according to icon name * chore: changeset * fix: UEA flag name and changeset description --- .changeset/green-garlics-compete.md | 5 ++++ packages/icons/manifest.json | 42 ++++++++++++++++++++++++++++ packages/icons/web/v2/flag_ae_16.svg | 7 +++++ packages/icons/web/v2/flag_hk_16.svg | 5 ++++ packages/icons/web/v2/flag_ja_16.svg | 5 ++++ packages/icons/web/v2/flag_mx_16.svg | 8 ++++++ packages/icons/web/v2/flag_my_16.svg | 8 ++++++ packages/icons/web/v2/flag_nz_16.svg | 9 ++++++ packages/icons/web/v2/flag_sg_16.svg | 11 ++++++++ 9 files changed, 100 insertions(+) create mode 100644 .changeset/green-garlics-compete.md create mode 100644 packages/icons/web/v2/flag_ae_16.svg create mode 100644 packages/icons/web/v2/flag_hk_16.svg create mode 100644 packages/icons/web/v2/flag_ja_16.svg create mode 100644 packages/icons/web/v2/flag_mx_16.svg create mode 100644 packages/icons/web/v2/flag_my_16.svg create mode 100644 packages/icons/web/v2/flag_nz_16.svg create mode 100644 packages/icons/web/v2/flag_sg_16.svg diff --git a/.changeset/green-garlics-compete.md b/.changeset/green-garlics-compete.md new file mode 100644 index 0000000000..990b056066 --- /dev/null +++ b/.changeset/green-garlics-compete.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Added new country flag icons for Hong Kong, Japan, Malaysia, Mexico, New Zealand, Singapore and the United Arab Emirates. diff --git a/packages/icons/manifest.json b/packages/icons/manifest.json index 645f01a084..4ae686a00c 100644 --- a/packages/icons/manifest.json +++ b/packages/icons/manifest.json @@ -736,6 +736,12 @@ "category": "Card scheme", "size": "32" }, + { + "name": "flag_ae", + "category": "Country flag", + "keywords": ["United Arab Emirates"], + "size": "16" + }, { "name": "flag_ar", "category": "Country flag", @@ -856,6 +862,12 @@ "keywords": ["Greece"], "size": "16" }, + { + "name": "flag_hk", + "category": "Country flag", + "keywords": ["Hong Kong"], + "size": "16" + }, { "name": "flag_hr", "category": "Country flag", @@ -880,6 +892,12 @@ "keywords": ["Italy"], "size": "16" }, + { + "name": "flag_ja", + "category": "Country flag", + "keywords": ["Japan"], + "size": "16" + }, { "name": "flag_lt", "category": "Country flag", @@ -904,6 +922,18 @@ "keywords": ["Montenegro"], "size": "16" }, + { + "name": "flag_mx", + "category": "Country flag", + "keywords": ["Mexico"], + "size": "16" + }, + { + "name": "flag_my", + "category": "Country flag", + "keywords": ["Malaysia"], + "size": "16" + }, { "name": "flag_nl", "category": "Country flag", @@ -916,6 +946,12 @@ "keywords": ["Norway"], "size": "16" }, + { + "name": "flag_nz", + "category": "Country flag", + "keywords": ["New Zeland"], + "size": "16" + }, { "name": "flag_pe", "category": "Country flag", @@ -946,6 +982,12 @@ "keywords": ["Sweden"], "size": "16" }, + { + "name": "flag_sg", + "category": "Country flag", + "keywords": ["Singapore"], + "size": "16" + }, { "name": "flag_si", "category": "Country flag", diff --git a/packages/icons/web/v2/flag_ae_16.svg b/packages/icons/web/v2/flag_ae_16.svg new file mode 100644 index 0000000000..7e957e1e0c --- /dev/null +++ b/packages/icons/web/v2/flag_ae_16.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/icons/web/v2/flag_hk_16.svg b/packages/icons/web/v2/flag_hk_16.svg new file mode 100644 index 0000000000..529d330984 --- /dev/null +++ b/packages/icons/web/v2/flag_hk_16.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/web/v2/flag_ja_16.svg b/packages/icons/web/v2/flag_ja_16.svg new file mode 100644 index 0000000000..8251b2b760 --- /dev/null +++ b/packages/icons/web/v2/flag_ja_16.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/icons/web/v2/flag_mx_16.svg b/packages/icons/web/v2/flag_mx_16.svg new file mode 100644 index 0000000000..9cbc79a795 --- /dev/null +++ b/packages/icons/web/v2/flag_mx_16.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/icons/web/v2/flag_my_16.svg b/packages/icons/web/v2/flag_my_16.svg new file mode 100644 index 0000000000..b91c6cad0e --- /dev/null +++ b/packages/icons/web/v2/flag_my_16.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/icons/web/v2/flag_nz_16.svg b/packages/icons/web/v2/flag_nz_16.svg new file mode 100644 index 0000000000..785a03d664 --- /dev/null +++ b/packages/icons/web/v2/flag_nz_16.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/packages/icons/web/v2/flag_sg_16.svg b/packages/icons/web/v2/flag_sg_16.svg new file mode 100644 index 0000000000..4d220dcc0d --- /dev/null +++ b/packages/icons/web/v2/flag_sg_16.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + From 390d21fb20109061180fe824d6da4ef948281bb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 22 Feb 2024 17:06:27 +0100 Subject: [PATCH 32/55] Sync icons with Figma (#2447) --- .changeset/clean-carrots-marry.md | 5 ++ .changeset/olive-mails-notice.md | 5 ++ .changeset/rare-apes-hunt.md | 5 ++ .storybook/components/Icons.module.css | 4 ++ .storybook/components/Icons.tsx | 2 +- packages/icons/manifest.json | 61 ++++++++++++++++--- packages/icons/web/v2/banco_estado_24.svg | 16 ++--- packages/icons/web/v2/boleto_24.svg | 9 ++- packages/icons/web/v2/cookie_24.svg | 3 + packages/icons/web/v2/driver_license_24.svg | 3 + packages/icons/web/v2/email_24.svg | 3 + .../icons/web/v2/facebook_messenger_24.svg | 3 + packages/icons/web/v2/items_24.svg | 10 +-- packages/icons/web/v2/manage_24.svg | 13 ++++ packages/icons/web/v2/passport_24.svg | 3 + packages/icons/web/v2/phone_24.svg | 3 + packages/icons/web/v2/receipt_24.svg | 4 +- packages/icons/web/v2/refresh_16.svg | 5 +- packages/icons/web/v2/refresh_24.svg | 4 +- packages/icons/web/v2/residence_permit_24.svg | 3 + packages/icons/web/v2/reward_24.svg | 3 + packages/icons/web/v2/vr_24.svg | 5 +- svgo.config.js | 2 +- 23 files changed, 136 insertions(+), 38 deletions(-) create mode 100644 .changeset/clean-carrots-marry.md create mode 100644 .changeset/olive-mails-notice.md create mode 100644 .changeset/rare-apes-hunt.md create mode 100644 packages/icons/web/v2/cookie_24.svg create mode 100644 packages/icons/web/v2/driver_license_24.svg create mode 100644 packages/icons/web/v2/email_24.svg create mode 100644 packages/icons/web/v2/facebook_messenger_24.svg create mode 100644 packages/icons/web/v2/manage_24.svg create mode 100644 packages/icons/web/v2/passport_24.svg create mode 100644 packages/icons/web/v2/phone_24.svg create mode 100644 packages/icons/web/v2/residence_permit_24.svg create mode 100644 packages/icons/web/v2/reward_24.svg diff --git a/.changeset/clean-carrots-marry.md b/.changeset/clean-carrots-marry.md new file mode 100644 index 0000000000..49c8d44d07 --- /dev/null +++ b/.changeset/clean-carrots-marry.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Renamed the `Cookie`, `Email`, `FacebookMessenger`, `Phone`, and `Reward` icons. The previous names are deprecated and will be removed in the next major version. diff --git a/.changeset/olive-mails-notice.md b/.changeset/olive-mails-notice.md new file mode 100644 index 0000000000..e8b8f33164 --- /dev/null +++ b/.changeset/olive-mails-notice.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Updated the `BancoEstado`, `Boleto`, `Items`, `Receipt`, `Refresh`, and `Vr` icons. diff --git a/.changeset/rare-apes-hunt.md b/.changeset/rare-apes-hunt.md new file mode 100644 index 0000000000..66f45d1799 --- /dev/null +++ b/.changeset/rare-apes-hunt.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': minor +--- + +Added new `DriverLicense`, `Manage`, `Passport`, and `ResidencePermit` icons in size 24. diff --git a/.storybook/components/Icons.module.css b/.storybook/components/Icons.module.css index 122193ddcf..08d77ab1f4 100644 --- a/.storybook/components/Icons.module.css +++ b/.storybook/components/Icons.module.css @@ -85,8 +85,12 @@ } .label { + display: block; + overflow: hidden; font-size: var(--cui-typography-body-two-font-size); line-height: var(--cui-typography-body-two-line-height); + text-overflow: ellipsis; + white-space: nowrap; } .badge { diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx index 0a10d04566..2ad38453ea 100644 --- a/.storybook/components/Icons.tsx +++ b/.storybook/components/Icons.tsx @@ -171,7 +171,7 @@ const Icons = () => { }} /> - + {icon.name} {size === 'all' && ( {icon.size} diff --git a/packages/icons/manifest.json b/packages/icons/manifest.json index 4ae686a00c..f54a56f0d4 100644 --- a/packages/icons/manifest.json +++ b/packages/icons/manifest.json @@ -347,20 +347,32 @@ "size": "24" }, { - "name": "email_chat", + "name": "email", "category": "Communication", "size": "24" }, + { + "name": "email_chat", + "category": "Communication", + "size": "24", + "deprecation": "Use the `Email` icon instead." + }, { "name": "live_chat", "category": "Communication", "size": "24" }, { - "name": "phone_chat", + "name": "phone", "category": "Communication", "size": "24" }, + { + "name": "phone_chat", + "category": "Communication", + "size": "24", + "deprecation": "Use the `Phone` icon instead." + }, { "name": "alelo", "category": "Payment method", @@ -1086,6 +1098,11 @@ "category": "File", "size": "24" }, + { + "name": "driver_license", + "category": "File", + "size": "24" + }, { "name": "electronic_invoice", "category": "File", @@ -1111,11 +1128,21 @@ "category": "File", "size": "24" }, + { + "name": "passport", + "category": "File", + "size": "24" + }, { "name": "recurring_invoice", "category": "File", "size": "24" }, + { + "name": "residence_permit", + "category": "File", + "size": "24" + }, { "name": "zip_file", "category": "File", @@ -1129,7 +1156,8 @@ { "name": "apm", "category": "Finance", - "size": "32" + "size": "32", + "deprecation": "Use the `AlternativePaymentMethod` icon instead." }, { "name": "atm", @@ -1288,10 +1316,16 @@ "size": "24" }, { - "name": "cookie_preferences", + "name": "cookie", "category": "Miscellaneous", "size": "24" }, + { + "name": "cookie_preferences", + "category": "Miscellaneous", + "size": "24", + "deprecation": "Use the `Cookie` icon instead." + }, { "name": "custom_amount", "category": "Miscellaneous", @@ -1785,7 +1819,8 @@ { "name": "refer", "category": "Product and feature", - "size": "24" + "size": "24", + "deprecation": "Use the `ReferAFriend` or `Reward` icons instead." }, { "name": "refer_a_friend", @@ -1798,10 +1833,16 @@ "size": "24" }, { - "name": "sales", + "name": "reward", "category": "Product and feature", "size": "24" }, + { + "name": "sales", + "category": "Product and feature", + "size": "24", + "deprecation": "Use the `Receipt` icon instead." + }, { "name": "shop", "category": "Product and feature", @@ -1867,6 +1908,11 @@ "category": "Social media", "size": "24" }, + { + "name": "facebook_messenger", + "category": "Social media", + "size": "24" + }, { "name": "instagram", "category": "Social media", @@ -1880,7 +1926,8 @@ { "name": "messenger", "category": "Social media", - "size": "24" + "size": "24", + "deprecation": "Use the `FacebookMessenger` icon instead." }, { "name": "pinterest", diff --git a/packages/icons/web/v2/banco_estado_24.svg b/packages/icons/web/v2/banco_estado_24.svg index c43f8b50d6..045011e57f 100644 --- a/packages/icons/web/v2/banco_estado_24.svg +++ b/packages/icons/web/v2/banco_estado_24.svg @@ -1,9 +1,9 @@ - - - - - - - - + + + + + + + + diff --git a/packages/icons/web/v2/boleto_24.svg b/packages/icons/web/v2/boleto_24.svg index a21fcb7923..f6cec07556 100644 --- a/packages/icons/web/v2/boleto_24.svg +++ b/packages/icons/web/v2/boleto_24.svg @@ -1,3 +1,8 @@ - - + + + + + + + diff --git a/packages/icons/web/v2/cookie_24.svg b/packages/icons/web/v2/cookie_24.svg new file mode 100644 index 0000000000..6328defd1b --- /dev/null +++ b/packages/icons/web/v2/cookie_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/driver_license_24.svg b/packages/icons/web/v2/driver_license_24.svg new file mode 100644 index 0000000000..69c7fa13d0 --- /dev/null +++ b/packages/icons/web/v2/driver_license_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/email_24.svg b/packages/icons/web/v2/email_24.svg new file mode 100644 index 0000000000..fa4fb19f17 --- /dev/null +++ b/packages/icons/web/v2/email_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/facebook_messenger_24.svg b/packages/icons/web/v2/facebook_messenger_24.svg new file mode 100644 index 0000000000..0273a3c89a --- /dev/null +++ b/packages/icons/web/v2/facebook_messenger_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/items_24.svg b/packages/icons/web/v2/items_24.svg index af2aeaabf5..31460683f3 100644 --- a/packages/icons/web/v2/items_24.svg +++ b/packages/icons/web/v2/items_24.svg @@ -1,13 +1,5 @@ - - - diff --git a/packages/icons/web/v2/manage_24.svg b/packages/icons/web/v2/manage_24.svg new file mode 100644 index 0000000000..af2aeaabf5 --- /dev/null +++ b/packages/icons/web/v2/manage_24.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/packages/icons/web/v2/passport_24.svg b/packages/icons/web/v2/passport_24.svg new file mode 100644 index 0000000000..5b9f727b9b --- /dev/null +++ b/packages/icons/web/v2/passport_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/phone_24.svg b/packages/icons/web/v2/phone_24.svg new file mode 100644 index 0000000000..e472d0d47e --- /dev/null +++ b/packages/icons/web/v2/phone_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/receipt_24.svg b/packages/icons/web/v2/receipt_24.svg index e5610ebea8..cd466bebc8 100644 --- a/packages/icons/web/v2/receipt_24.svg +++ b/packages/icons/web/v2/receipt_24.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/web/v2/refresh_16.svg b/packages/icons/web/v2/refresh_16.svg index c16b90d546..ad98622e51 100644 --- a/packages/icons/web/v2/refresh_16.svg +++ b/packages/icons/web/v2/refresh_16.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/icons/web/v2/refresh_24.svg b/packages/icons/web/v2/refresh_24.svg index 45dd1b3506..908539031f 100644 --- a/packages/icons/web/v2/refresh_24.svg +++ b/packages/icons/web/v2/refresh_24.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/icons/web/v2/residence_permit_24.svg b/packages/icons/web/v2/residence_permit_24.svg new file mode 100644 index 0000000000..739fc6bca7 --- /dev/null +++ b/packages/icons/web/v2/residence_permit_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/reward_24.svg b/packages/icons/web/v2/reward_24.svg new file mode 100644 index 0000000000..f125a594a4 --- /dev/null +++ b/packages/icons/web/v2/reward_24.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/icons/web/v2/vr_24.svg b/packages/icons/web/v2/vr_24.svg index 7d2c562e32..46207317eb 100644 --- a/packages/icons/web/v2/vr_24.svg +++ b/packages/icons/web/v2/vr_24.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/svgo.config.js b/svgo.config.js index ddf43bb640..c66a5d8d78 100644 --- a/svgo.config.js +++ b/svgo.config.js @@ -5,7 +5,7 @@ module.exports = { params: { overrides: { convertColors: { - currentColor: '#212933', + currentColor: '#0F131A', }, removeViewBox: false, }, From 118fc92fc0520f8d7dd90b24eaaa4bf0b5cd6f65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 22 Feb 2024 17:18:00 +0100 Subject: [PATCH 33/55] Version Packages (#2446) --- .changeset/clean-carrots-marry.md | 5 ----- .changeset/green-garlics-compete.md | 5 ----- .changeset/olive-mails-notice.md | 5 ----- .changeset/rare-apes-hunt.md | 5 ----- packages/icons/CHANGELOG.md | 12 ++++++++++++ packages/icons/package.json | 2 +- 6 files changed, 13 insertions(+), 21 deletions(-) delete mode 100644 .changeset/clean-carrots-marry.md delete mode 100644 .changeset/green-garlics-compete.md delete mode 100644 .changeset/olive-mails-notice.md delete mode 100644 .changeset/rare-apes-hunt.md diff --git a/.changeset/clean-carrots-marry.md b/.changeset/clean-carrots-marry.md deleted file mode 100644 index 49c8d44d07..0000000000 --- a/.changeset/clean-carrots-marry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Renamed the `Cookie`, `Email`, `FacebookMessenger`, `Phone`, and `Reward` icons. The previous names are deprecated and will be removed in the next major version. diff --git a/.changeset/green-garlics-compete.md b/.changeset/green-garlics-compete.md deleted file mode 100644 index 990b056066..0000000000 --- a/.changeset/green-garlics-compete.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Added new country flag icons for Hong Kong, Japan, Malaysia, Mexico, New Zealand, Singapore and the United Arab Emirates. diff --git a/.changeset/olive-mails-notice.md b/.changeset/olive-mails-notice.md deleted file mode 100644 index e8b8f33164..0000000000 --- a/.changeset/olive-mails-notice.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Updated the `BancoEstado`, `Boleto`, `Items`, `Receipt`, `Refresh`, and `Vr` icons. diff --git a/.changeset/rare-apes-hunt.md b/.changeset/rare-apes-hunt.md deleted file mode 100644 index 66f45d1799..0000000000 --- a/.changeset/rare-apes-hunt.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': minor ---- - -Added new `DriverLicense`, `Manage`, `Passport`, and `ResidencePermit` icons in size 24. diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 0f0aa26b7c..1988123ee6 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,17 @@ # @sumup/icons +## 3.6.0 + +### Minor Changes + +- [#2447](https://github.com/sumup-oss/circuit-ui/pull/2447) [`390d21f`](https://github.com/sumup-oss/circuit-ui/commit/390d21fb20109061180fe824d6da4ef948281bb6) Thanks [@connor-baer](https://github.com/connor-baer)! - Renamed the `Cookie`, `Email`, `FacebookMessenger`, `Phone`, and `Reward` icons. The previous names are deprecated and will be removed in the next major version. + +- [#2443](https://github.com/sumup-oss/circuit-ui/pull/2443) [`a36e352`](https://github.com/sumup-oss/circuit-ui/commit/a36e35296a720415e8dfc8cab688d19b685e61ff) Thanks [@rcdutra](https://github.com/rcdutra)! - Added new country flag icons for Hong Kong, Japan, Malaysia, Mexico, New Zealand, Singapore and the United Arab Emirates. + +- [#2447](https://github.com/sumup-oss/circuit-ui/pull/2447) [`390d21f`](https://github.com/sumup-oss/circuit-ui/commit/390d21fb20109061180fe824d6da4ef948281bb6) Thanks [@connor-baer](https://github.com/connor-baer)! - Updated the `BancoEstado`, `Boleto`, `Items`, `Receipt`, `Refresh`, and `Vr` icons. + +- [#2447](https://github.com/sumup-oss/circuit-ui/pull/2447) [`390d21f`](https://github.com/sumup-oss/circuit-ui/commit/390d21fb20109061180fe824d6da4ef948281bb6) Thanks [@connor-baer](https://github.com/connor-baer)! - Added new `DriverLicense`, `Manage`, `Passport`, and `ResidencePermit` icons in size 24. + ## 3.5.0 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 4ec1f7e6f3..1b39b0567d 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/icons", - "version": "3.5.0", + "version": "3.6.0", "description": "A collection of icons by SumUp", "type": "module", "main": "./dist/index.js", From 9b6c7d68820d557dfdcf1b14b2a2b96275d9e353 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 22 Feb 2024 17:38:03 +0100 Subject: [PATCH 34/55] Add missing client directives (#2448) --- .changeset/stupid-cups-sell.md | 5 +++++ package-lock.json | 16 ++++++++-------- package.json | 2 +- .../components/ProgressBar/ProgressBar.tsx | 2 -- .../RadioButtonGroup/RadioButtonGroup.tsx | 4 ++-- packages/circuit-ui/components/Select/Select.tsx | 3 +-- .../circuit-ui/components/Selector/Selector.tsx | 4 ++-- .../components/SelectorGroup/SelectorGroup.tsx | 4 ++-- packages/circuit-ui/components/Toggle/Toggle.tsx | 4 ++-- 9 files changed, 23 insertions(+), 21 deletions(-) create mode 100644 .changeset/stupid-cups-sell.md diff --git a/.changeset/stupid-cups-sell.md b/.changeset/stupid-cups-sell.md new file mode 100644 index 0000000000..eaac7535ed --- /dev/null +++ b/.changeset/stupid-cups-sell.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': patch +--- + +Added the `use client` directive to a few more components that require it. diff --git a/package-lock.json b/package-lock.json index a3c3ea1881..4aed7d8756 100644 --- a/package-lock.json +++ b/package-lock.json @@ -37,7 +37,7 @@ "chromatic": "^10.3.1", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react-server-components": "^1.1.1", + "eslint-plugin-react-server-components": "^1.1.2", "eslint-plugin-storybook": "^0.6.15", "jsdom": "^23.2.0", "lerna": "^8.0.2", @@ -18551,9 +18551,9 @@ } }, "node_modules/eslint-plugin-react-server-components": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-server-components/-/eslint-plugin-react-server-components-1.1.1.tgz", - "integrity": "sha512-oL8d1mzvUgm6ezwKie0hQvXAgjx5II8e2vzt9vcp6Ygn+LXyg3KXdVTpQu6bsJomblbRBVLJCIFDSKr420+wmA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-server-components/-/eslint-plugin-react-server-components-1.1.2.tgz", + "integrity": "sha512-t3hEE7V7YxeWBkC2hL/GUBBCZ9xa6leo4SzAudlt6ZUSBQkK8UeSziLKnhyuK+GI7KSTp6j+CaGJ/RggJQNrYg==", "dev": true, "dependencies": { "eslint-plugin-react": "^7.32.2", @@ -37641,7 +37641,7 @@ }, "packages/icons": { "name": "@sumup/icons", - "version": "3.5.0", + "version": "3.6.0", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.23.9", @@ -51975,9 +51975,9 @@ "requires": {} }, "eslint-plugin-react-server-components": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-server-components/-/eslint-plugin-react-server-components-1.1.1.tgz", - "integrity": "sha512-oL8d1mzvUgm6ezwKie0hQvXAgjx5II8e2vzt9vcp6Ygn+LXyg3KXdVTpQu6bsJomblbRBVLJCIFDSKr420+wmA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-react-server-components/-/eslint-plugin-react-server-components-1.1.2.tgz", + "integrity": "sha512-t3hEE7V7YxeWBkC2hL/GUBBCZ9xa6leo4SzAudlt6ZUSBQkK8UeSziLKnhyuK+GI7KSTp6j+CaGJ/RggJQNrYg==", "dev": true, "requires": { "eslint-plugin-react": "^7.32.2", diff --git a/package.json b/package.json index d4c246bc71..80310e046d 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,7 @@ "chromatic": "^10.3.1", "eslint-import-resolver-typescript": "^3.6.1", "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react-server-components": "^1.1.1", + "eslint-plugin-react-server-components": "^1.1.2", "eslint-plugin-storybook": "^0.6.15", "jsdom": "^23.2.0", "lerna": "^8.0.2", diff --git a/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx b/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx index a7d644876a..c54590c272 100644 --- a/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx +++ b/packages/circuit-ui/components/ProgressBar/ProgressBar.tsx @@ -117,8 +117,6 @@ export function ProgressBar({ className, ...props }: ProgressBarProps): ReturnType { - // useId is allowed in Server Components - // eslint-disable-next-line react-server-components/use-client const ariaId = useId(); if ( diff --git a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx index 140039b0e5..6ac2dc27d7 100644 --- a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { FieldsetHTMLAttributes, InputHTMLAttributes, @@ -132,8 +134,6 @@ export const RadioButtonGroup = forwardRef( }: RadioButtonGroupProps, ref: RadioButtonGroupProps['ref'], ) => { - // useId is allowed in Server Components - // eslint-disable-next-line react-server-components/use-client const randomName = useId(); const name = customName || randomName; const validationHintId = useId(); diff --git a/packages/circuit-ui/components/Select/Select.tsx b/packages/circuit-ui/components/Select/Select.tsx index c743fb853c..5028fbfe9b 100644 --- a/packages/circuit-ui/components/Select/Select.tsx +++ b/packages/circuit-ui/components/Select/Select.tsx @@ -139,8 +139,7 @@ export const Select = forwardRef( 'The `label` prop is missing or invalid. Pass `hideLabel` if you intend to hide the label visually.', ); } - // useId is allowed in Server Components - // eslint-disable-next-line react-server-components/use-client + const id = useId(); const selectId = customId || id; const validationHintId = useId(); diff --git a/packages/circuit-ui/components/Selector/Selector.tsx b/packages/circuit-ui/components/Selector/Selector.tsx index ebf4345595..2e46be8f4a 100644 --- a/packages/circuit-ui/components/Selector/Selector.tsx +++ b/packages/circuit-ui/components/Selector/Selector.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ComponentType, Fragment, @@ -128,8 +130,6 @@ export const Selector = forwardRef( }, ref, ) => { - // useId is allowed in Server Components - // eslint-disable-next-line react-server-components/use-client const randomId = useId(); const inputId = customId || randomId; const descriptionId = useId(); diff --git a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx index ff2b78dc74..21bfb08fd0 100644 --- a/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx +++ b/packages/circuit-ui/components/SelectorGroup/SelectorGroup.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { forwardRef, FieldsetHTMLAttributes, useId } from 'react'; import { @@ -146,8 +148,6 @@ export const SelectorGroup = forwardRef< }, ref, ) => { - // useId is allowed in Server Components - // eslint-disable-next-line react-server-components/use-client const randomName = useId(); const name = customName || randomName; const validationHintId = useId(); diff --git a/packages/circuit-ui/components/Toggle/Toggle.tsx b/packages/circuit-ui/components/Toggle/Toggle.tsx index a137c2f51a..55641c442c 100644 --- a/packages/circuit-ui/components/Toggle/Toggle.tsx +++ b/packages/circuit-ui/components/Toggle/Toggle.tsx @@ -13,6 +13,8 @@ * limitations under the License. */ +'use client'; + import { ButtonHTMLAttributes, forwardRef, useId } from 'react'; import { @@ -92,8 +94,6 @@ export const Toggle = forwardRef( } } - // useId is allowed in Server Components - // eslint-disable-next-line react-server-components/use-client const switchId = useId(); const labelId = useId(); const descriptionId = useId(); From 7e98d5e4a7e3f3ed6a7948d6d778173bcb690007 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 22 Feb 2024 17:43:01 +0100 Subject: [PATCH 35/55] Version Packages (#2449) Co-authored-by: github-actions[bot] --- .changeset/stupid-cups-sell.md | 5 ----- packages/circuit-ui/CHANGELOG.md | 6 ++++++ packages/circuit-ui/package.json | 2 +- 3 files changed, 7 insertions(+), 6 deletions(-) delete mode 100644 .changeset/stupid-cups-sell.md diff --git a/.changeset/stupid-cups-sell.md b/.changeset/stupid-cups-sell.md deleted file mode 100644 index eaac7535ed..0000000000 --- a/.changeset/stupid-cups-sell.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': patch ---- - -Added the `use client` directive to a few more components that require it. diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index e69f9c3a43..c570560c7a 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,5 +1,11 @@ # @sumup/circuit-ui +## 8.4.1 + +### Patch Changes + +- [#2448](https://github.com/sumup-oss/circuit-ui/pull/2448) [`9b6c7d6`](https://github.com/sumup-oss/circuit-ui/commit/9b6c7d68820d557dfdcf1b14b2a2b96275d9e353) Thanks [@connor-baer](https://github.com/connor-baer)! - Added the `use client` directive to a few more components that require it. + ## 8.4.0 ### Minor Changes diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 30d46e434b..42a84a7ff4 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/circuit-ui", - "version": "8.4.0", + "version": "8.4.1", "description": "SumUp's React UI component library", "type": "module", "main": "./dist/index.js", From a380abbe0c5680a9ad8ff33c00ca6d3bbb741cba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 29 Feb 2024 17:00:01 +0100 Subject: [PATCH 36/55] Enable table of contents for doc pages (#2451) --- .storybook/components/Icons.tsx | 3 +- .storybook/components/Teaser.tsx | 4 +- .storybook/preview.tsx | 7 ++- .storybook/slugify.ts | 7 +++ docs/contributing/3-testing.mdx | 2 +- package-lock.json | 49 ++++++++----------- package.json | 1 + .../components/Headline/Headline.mdx | 4 +- .../NotificationBanner/NotificationBanner.mdx | 4 +- .../NotificationFullscreen.mdx | 2 +- packages/circuit-ui/components/Step/Step.mdx | 2 +- .../components/SubHeadline/SubHeadline.mdx | 2 +- .../TopNavigation/TopNavigation.mdx | 2 +- 13 files changed, 48 insertions(+), 41 deletions(-) create mode 100644 .storybook/slugify.ts diff --git a/.storybook/components/Icons.tsx b/.storybook/components/Icons.tsx index 2ad38453ea..288f285e42 100644 --- a/.storybook/components/Icons.tsx +++ b/.storybook/components/Icons.tsx @@ -33,6 +33,7 @@ import { clsx, utilClasses, } from '../../packages/circuit-ui/index.js'; +import { slugify } from '../slugify.js'; import classes from './Icons.module.css'; function groupBy( @@ -145,7 +146,7 @@ const Icons = () => { groupBy(activeIcons, 'category'), ).map(([category, items]) => (
- + {category}
diff --git a/.storybook/components/Teaser.tsx b/.storybook/components/Teaser.tsx index a2c562bd05..36d7853090 100644 --- a/.storybook/components/Teaser.tsx +++ b/.storybook/components/Teaser.tsx @@ -14,7 +14,9 @@ */ import type { ReactNode } from 'react'; + import { Headline, Card } from '../../packages/circuit-ui/index.js'; +import { slugify } from '../slugify.js'; import classes from './Teaser.module.css'; interface TeaserProps { @@ -24,7 +26,7 @@ interface TeaserProps { const Teaser = ({ title, children }: TeaserProps) => ( - + {title} diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 67d65cb8dc..0f0d155510 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -45,7 +45,12 @@ export const parameters = { includeName: true, }, }, - docs: { theme: light, components, container: DocsContainer }, + docs: { + theme: light, + components, + container: DocsContainer, + toc: { title: 'On this page', headingSelector: 'h2, h3' }, + }, }; // TODO: Re-enable once a dark theme exists diff --git a/.storybook/slugify.ts b/.storybook/slugify.ts new file mode 100644 index 0000000000..6dddd8df4f --- /dev/null +++ b/.storybook/slugify.ts @@ -0,0 +1,7 @@ +import GithubSlugger from 'github-slugger'; + +const slugger = new GithubSlugger(); + +export function slugify(value: string): string { + return slugger.slug(value); +} diff --git a/docs/contributing/3-testing.mdx b/docs/contributing/3-testing.mdx index 0b4d246fbb..f61adb4c28 100644 --- a/docs/contributing/3-testing.mdx +++ b/docs/contributing/3-testing.mdx @@ -6,7 +6,7 @@ import { Meta } from '../../.storybook/components'; ## Unit tests -We use [Vitest](https://vitest.dev/) and [@testing-library/react](https://github.com/testing-library/react-testing-library) to unit test our components. Since most components are purely visual, we rely a lot on snapshot tests. Business logic should be tested with more specific assertions. To start unit tests in watch mode, run: +We use [Vitest](https://vitest.dev/) and [@testing-library/react](https://github.com/testing-library/react-testing-library) to unit test the business logic and accessibility of our components. To start unit tests in watch mode, run: ```bash npm run test diff --git a/package-lock.json b/package-lock.json index 4aed7d8756..fe4d5fc7eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,6 +39,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react-server-components": "^1.1.2", "eslint-plugin-storybook": "^0.6.15", + "github-slugger": "^2.0.0", "jsdom": "^23.2.0", "lerna": "^8.0.2", "license-checker": "^25.0.1", @@ -197,11 +198,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/@astrojs/markdown-remark/node_modules/github-slugger": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", - "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" - }, "node_modules/@astrojs/markdown-remark/node_modules/is-plain-obj": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", @@ -13816,11 +13812,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/astro/node_modules/github-slugger": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", - "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" - }, "node_modules/astro/node_modules/html-escaper": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", @@ -20070,10 +20061,9 @@ } }, "node_modules/github-slugger": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", - "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==", - "dev": true + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", + "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" }, "node_modules/glob": { "version": "7.2.3", @@ -32050,6 +32040,12 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/remark-slug/node_modules/github-slugger": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", + "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==", + "dev": true + }, "node_modules/remark-slug/node_modules/mdast-util-to-string": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz", @@ -37492,7 +37488,7 @@ }, "packages/circuit-ui": { "name": "@sumup/circuit-ui", - "version": "8.4.0", + "version": "8.4.1", "license": "Apache-2.0", "dependencies": { "@floating-ui/react-dom": "^2.0.5", @@ -38632,11 +38628,6 @@ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz", "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==" }, - "github-slugger": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", - "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" - }, "is-plain-obj": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", @@ -48431,11 +48422,6 @@ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==" }, - "github-slugger": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", - "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" - }, "html-escaper": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-3.0.3.tgz", @@ -53042,10 +53028,9 @@ } }, "github-slugger": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", - "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==", - "dev": true + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz", + "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" }, "glob": { "version": "7.2.3", @@ -61962,6 +61947,12 @@ "unist-util-visit": "^2.0.0" }, "dependencies": { + "github-slugger": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", + "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==", + "dev": true + }, "mdast-util-to-string": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz", diff --git a/package.json b/package.json index 80310e046d..cbfdbae86f 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react-server-components": "^1.1.2", "eslint-plugin-storybook": "^0.6.15", + "github-slugger": "^2.0.0", "jsdom": "^23.2.0", "lerna": "^8.0.2", "license-checker": "^25.0.1", diff --git a/packages/circuit-ui/components/Headline/Headline.mdx b/packages/circuit-ui/components/Headline/Headline.mdx index 06ddaeaba0..adf8b41100 100644 --- a/packages/circuit-ui/components/Headline/Headline.mdx +++ b/packages/circuit-ui/components/Headline/Headline.mdx @@ -9,7 +9,7 @@ import * as Stories from './Headline.stories'; The Headline component is used for describing the contents of a page or page section. It is an essential part of a page's structure, helping organize information for users. - + ## Component variations @@ -20,7 +20,7 @@ The Headline component comes in four sizes. Use the `four` size for card headers and `three` for page titles in web applications. For specific use cases such as landing pages, consider using the [Title](Typography/Title) component. - + --- diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.mdx b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.mdx index c1fc1cbcbe..ce383b3219 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.mdx +++ b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.mdx @@ -9,7 +9,7 @@ import * as Stories from './NotificationBanner.stories'; The notification banner component prominently communicates and promotes high-level, site-wide information to the user. - + ## When to use it @@ -28,4 +28,4 @@ The notification banner should be used to display the global system messages or - **Do** use the coloured illustration style for the promotional notification use cases. - **Do** provide an action to allow users to directly follow up on the communicated content. Depending on the context action can be either tertirary, or a primary button. - + diff --git a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.mdx b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.mdx index 9f9091d83e..cda7cf70cf 100644 --- a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.mdx +++ b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.mdx @@ -9,7 +9,7 @@ import * as Stories from './NotificationFullscreen.stories'; The NotificationFullscreen component provides important information or feedback as part of a process flow. - + ## When to use it diff --git a/packages/circuit-ui/components/Step/Step.mdx b/packages/circuit-ui/components/Step/Step.mdx index 5dd0b7121c..848db4f9e8 100644 --- a/packages/circuit-ui/components/Step/Step.mdx +++ b/packages/circuit-ui/components/Step/Step.mdx @@ -23,4 +23,4 @@ import * as Stories from './Step.stories'; ### Multi Step Form - + diff --git a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx index ec82a4a75e..0909f36672 100644 --- a/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx +++ b/packages/circuit-ui/components/SubHeadline/SubHeadline.mdx @@ -9,7 +9,7 @@ import * as Stories from './SubHeadline.stories'; The SubHeadline component helps break up larger related chunks of content in the same section. It is typically used to separate subsections within a card. - + --- diff --git a/packages/circuit-ui/components/TopNavigation/TopNavigation.mdx b/packages/circuit-ui/components/TopNavigation/TopNavigation.mdx index 180939739a..dea9397c5e 100644 --- a/packages/circuit-ui/components/TopNavigation/TopNavigation.mdx +++ b/packages/circuit-ui/components/TopNavigation/TopNavigation.mdx @@ -14,6 +14,6 @@ The top navigation is part of the [application shell](https://developers.google. ## Usage with the side navigation - + When used alongside the [SideNavigation](Navigation/SideNavigation) component, the top navigation displays a hamburger button on narrow viewports which can be used to toggle the side navigation. From 779a911bb080dfc129f471ab08a22cf7675adc33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 29 Feb 2024 21:38:08 +0100 Subject: [PATCH 37/55] Merge branch 'next' into main --- .changeset/fuzzy-actors-marry.md | 5 + .changeset/lazy-dingos-look.md | 5 + .changeset/nasty-owls-collect.md | 5 + .changeset/pre.json | 21 + .changeset/shaggy-points-think.md | 5 + .changeset/swift-readers-retire.md | 5 + .storybook/components/DocsContainer.tsx | 33 +- .storybook/components/Image.module.css | 13 + .storybook/components/Image.tsx | 27 +- .storybook/decorators/withThemeProvider.tsx | 28 +- .storybook/manager-head.html | 7 + .storybook/manager.tsx | 20 +- .storybook/modes.ts | 10 + .storybook/preview.tsx | 61 +- .storybook/themes.ts | 64 +- docs/introduction/1-welcome.mdx | 1 + .../CloseButton/CloseButton.module.css | 4 - .../components/CloseButton/CloseButton.tsx | 7 +- .../components/Popover/Popover.module.css | 4 - .../DesktopNavigation.module.css | 4 - .../components/Toggle/Toggle.module.css | 28 +- .../components/Toggle/Toggle.stories.tsx | 16 +- .../InlineElements/InlineElements.stories.tsx | 73 +- .../__snapshots__/Tooltip.spec.tsx.snap | 10 - .../useFocusList/useFocusList.stories.tsx | 5 + .../circuit-ui/styles/style-mixins.spec.tsx | 3 - .../styles/style-mixins.stories.tsx | 18 +- packages/circuit-ui/styles/style-mixins.ts | 3 - packages/circuit-ui/styles/utility.module.css | 3 - packages/design-tokens/README.md | 35 +- packages/design-tokens/scripts/build.spec.ts | 112 ++- packages/design-tokens/scripts/build.ts | 151 +++- packages/design-tokens/themes/dark.ts | 713 ++++++++++++++++++ packages/design-tokens/themes/light.ts | 318 +------- packages/design-tokens/themes/shared.ts | 335 ++++++++ packages/design-tokens/types/index.ts | 26 + 36 files changed, 1642 insertions(+), 536 deletions(-) create mode 100644 .changeset/fuzzy-actors-marry.md create mode 100644 .changeset/lazy-dingos-look.md create mode 100644 .changeset/nasty-owls-collect.md create mode 100644 .changeset/pre.json create mode 100644 .changeset/shaggy-points-think.md create mode 100644 .changeset/swift-readers-retire.md create mode 100644 .storybook/components/Image.module.css delete mode 100644 packages/circuit-ui/components/CloseButton/CloseButton.module.css create mode 100644 packages/design-tokens/themes/dark.ts create mode 100644 packages/design-tokens/themes/shared.ts diff --git a/.changeset/fuzzy-actors-marry.md b/.changeset/fuzzy-actors-marry.md new file mode 100644 index 0000000000..0124b822a8 --- /dev/null +++ b/.changeset/fuzzy-actors-marry.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Changed the CloseButton to use the _tertiary_ instead of the _secondary_ Button variant. diff --git a/.changeset/lazy-dingos-look.md b/.changeset/lazy-dingos-look.md new file mode 100644 index 0000000000..0be44522e0 --- /dev/null +++ b/.changeset/lazy-dingos-look.md @@ -0,0 +1,5 @@ +--- +'@sumup/design-tokens': minor +--- + +Added a dark theme. Import `@sumup/design-tokens/dark.css` for the standalone dark theme. Import `@sumup/design-tokens/dynamic.css` to switch between the light and dark themes automatically based on the system settings or explicitly using the `data-color-scheme` attribute. diff --git a/.changeset/nasty-owls-collect.md b/.changeset/nasty-owls-collect.md new file mode 100644 index 0000000000..c238bad218 --- /dev/null +++ b/.changeset/nasty-owls-collect.md @@ -0,0 +1,5 @@ +--- +'@sumup/design-tokens': minor +--- + +Added scoped light and dark themes. Import `@sumup/design-tokens/light-scoped.css` or `@sumup/design-tokens/dark-scoped.css` to theme a subset of an application marked up with the `data-color-scheme` attribute. diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000000..50a8e76cf7 --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,21 @@ +{ + "mode": "exit", + "tag": "next", + "initialVersions": { + "@sumup/astro-template-circuit-ui": "2.0.0", + "@sumup/circuit-ui": "8.3.0", + "@sumup/cna-template": "5.1.0", + "@sumup/design-tokens": "7.1.0", + "@sumup/eslint-plugin-circuit-ui": "4.1.0", + "@sumup/icons": "3.4.0", + "@sumup/remix-template-circuit-ui": "3.0.0", + "@sumup/stylelint-plugin-circuit-ui": "1.0.0" + }, + "changesets": [ + "clever-laws-wait", + "fuzzy-actors-marry", + "lazy-dingos-look", + "nasty-owls-collect", + "swift-readers-retire" + ] +} diff --git a/.changeset/shaggy-points-think.md b/.changeset/shaggy-points-think.md new file mode 100644 index 0000000000..a7ea370f6d --- /dev/null +++ b/.changeset/shaggy-points-think.md @@ -0,0 +1,5 @@ +--- +'@sumup/design-tokens': patch +--- + +Fixed the `border-focus` color token value. diff --git a/.changeset/swift-readers-retire.md b/.changeset/swift-readers-retire.md new file mode 100644 index 0000000000..2ba4efe6a6 --- /dev/null +++ b/.changeset/swift-readers-retire.md @@ -0,0 +1,5 @@ +--- +'@sumup/circuit-ui': minor +--- + +Changed the background color of the active Toggle to green to better distinguish its states. diff --git a/.storybook/components/DocsContainer.tsx b/.storybook/components/DocsContainer.tsx index 3e5b0964b5..9ca3b93981 100644 --- a/.storybook/components/DocsContainer.tsx +++ b/.storybook/components/DocsContainer.tsx @@ -1,32 +1,29 @@ -// import { useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { DocsContainer as BaseContainer } from '@storybook/addon-docs'; -import * as themes from '../themes'; +import { dark, light, listenToColorScheme } from '../themes'; + +const themes = { light, dark }; /** - * Automatically switch light/dark theme based on system preferences + * Switch color scheme based on the global types or system preferences */ const DocsContainer: typeof BaseContainer = ({ children, context }) => { - // TODO: Re-enable automatic theme switching once there is a proper - // dark theme for Circuit UI. - // const query = window?.matchMedia('(prefers-color-scheme: dark)'); - - // const [theme, setTheme] = useState(getTheme(query.matches)); + const [colorScheme, setColorScheme] = useState('light'); - // useEffect(() => { - // const handleChange = (event: MediaQueryListEvent) => { - // setTheme(getTheme(event.matches)); - // }; + useEffect( + () => listenToColorScheme(context.channel, setColorScheme), + [context.channel], + ); - // query.addEventListener('change', handleChange); + useEffect(() => { + document.documentElement.dataset.colorScheme = colorScheme; + }, [colorScheme]); - // return () => { - // query.removeEventListener('change', handleChange); - // }; - // }, []); + const theme = themes[colorScheme]; return ( - + {children} ); diff --git a/.storybook/components/Image.module.css b/.storybook/components/Image.module.css new file mode 100644 index 0000000000..1697dd3644 --- /dev/null +++ b/.storybook/components/Image.module.css @@ -0,0 +1,13 @@ +.dark { + display: none; +} + +/* Show dark image in dark mode */ +[data-color-scheme="dark"] .dark { + display: block; +} + +/* Hide light image in dark mode when dark image is present */ +[data-color-scheme="dark"] .dark + .light { + display: none; +} diff --git a/.storybook/components/Image.tsx b/.storybook/components/Image.tsx index 70c2410a91..610ac50382 100644 --- a/.storybook/components/Image.tsx +++ b/.storybook/components/Image.tsx @@ -13,11 +13,34 @@ * limitations under the License. */ +import { Fragment } from 'react'; import { + clsx, Image as BaseImage, - ImageProps, + type ImageProps as BaseImageProps, } from '../../packages/circuit-ui/index.js'; -const Image = ({ children, ...props }: ImageProps) => ; +import classes from './Image.module.css'; + +interface ImageProps extends BaseImageProps { + darkSrc?: string; +} + +const Image = ({ children, src, darkSrc, ...props }: ImageProps) => ( + + {darkSrc && ( + + )} + + +); export default Image; diff --git a/.storybook/decorators/withThemeProvider.tsx b/.storybook/decorators/withThemeProvider.tsx index d6dd9f444b..6d37e6d7b4 100644 --- a/.storybook/decorators/withThemeProvider.tsx +++ b/.storybook/decorators/withThemeProvider.tsx @@ -3,12 +3,34 @@ import { ThemeProvider } from '@emotion/react'; import type { Decorator } from '@storybook/react'; import { light } from '@sumup/design-tokens'; +function setColorScheme(colorScheme: 'light' | 'dark') { + document.documentElement.dataset.colorScheme = colorScheme; +} + export const withThemeProvider: Decorator = (Story, context) => { - const theme = context.parameters.theme || context.globals.theme; + const colorScheme = + context.parameters.colorScheme || context.globals.colorScheme; useEffect(() => { - document.documentElement.dataset.theme = theme; - }, [theme]); + if (colorScheme !== 'system') { + setColorScheme(colorScheme); + return undefined; + } + + const query = window.matchMedia('(prefers-color-scheme: dark)'); + + setColorScheme(query.matches ? 'dark' : 'light'); + + const handleChange = (event: MediaQueryListEvent) => { + setColorScheme(event.matches ? 'dark' : 'light'); + }; + + query.addEventListener('change', handleChange); + + return () => { + query.removeEventListener('change', handleChange); + }; + }, [colorScheme]); return ( diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 7e00a87912..c246c1d022 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,2 +1,9 @@ + + diff --git a/.storybook/manager.tsx b/.storybook/manager.tsx index da29a0949e..9948cfe135 100644 --- a/.storybook/manager.tsx +++ b/.storybook/manager.tsx @@ -1,6 +1,6 @@ import { addons, types } from '@storybook/addons'; -import { getTheme } from './themes'; +import { dark, light, listenToColorScheme } from './themes.js'; import { PARAM_KEY as VERSIONS_PARAM_KEY, Versions } from './addons/versions'; addons.setConfig({ @@ -11,21 +11,15 @@ addons.setConfig({ }); /** - * Automatically switch light/dark theme based on system preferences + * Switch color scheme based on the global types or system preferences */ -addons.register('auto-theme-switcher', (api) => { - const setTheme = (prefersDark: boolean) => { - api.setOptions({ theme: getTheme(prefersDark) }); - document.documentElement.dataset.theme = prefersDark ? 'dark' : 'light'; +addons.register('color-scheme', (api) => { + const setTheme = (colorScheme: 'dark' | 'light') => { + api.setOptions({ theme: colorScheme === 'dark' ? dark : light }); + document.documentElement.dataset.colorScheme = colorScheme; }; - const query = window?.matchMedia('(prefers-color-scheme: dark)'); - - setTheme(query.matches); - - query.addEventListener('change', (event) => { - setTheme(event.matches); - }); + listenToColorScheme(api, setTheme); }); /** diff --git a/.storybook/modes.ts b/.storybook/modes.ts index 22ea5f2ab9..9b514c1b36 100644 --- a/.storybook/modes.ts +++ b/.storybook/modes.ts @@ -1,3 +1,12 @@ +const colorSchemes = { + dark: { + colorScheme: 'dark', + }, + light: { + colorScheme: 'light', + }, +}; + const viewports = { smallMobile: { viewport: 'smallMobile', @@ -14,5 +23,6 @@ const viewports = { }; export const modes = { + ...colorSchemes, ...viewports, }; diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 0f0d155510..c1673f52ba 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,10 +1,11 @@ -import '@sumup/design-tokens/light.css'; +import '@sumup/design-tokens/dynamic.css'; import '../packages/circuit-ui/styles/base.css'; import { light, components } from './themes'; import { withThemeProvider } from './decorators/withThemeProvider'; import { withUnmountWhenHidden } from './decorators/withUnmountWhenHidden'; import { DocsContainer } from './components'; +import { modes } from './modes'; export const parameters = { layout: 'centered', @@ -16,6 +17,12 @@ export const parameters = { { name: 'v5', url: 'https://circuit-v5.sumup-vercel.app' }, ], }, + chromatic: { + modes: { + light: modes.light, + dark: modes.dark, + }, + }, viewport: { viewports: { smallMobile: { @@ -53,29 +60,33 @@ export const parameters = { }, }; -// TODO: Re-enable once a dark theme exists -// export const globalTypes = { -// theme: { -// name: 'Theme', -// description: 'Global theme for components', -// defaultValue: 'light', -// toolbar: { -// title: 'Theme', -// icon: 'paintbrush', -// items: [ -// { -// title: 'Light', -// value: 'light', -// icon: 'circle', -// }, -// { -// title: 'Dark (WIP)', -// value: 'dark', -// icon: 'circlehollow', -// }, -// ], -// }, -// }, -// }; +export const globalTypes = { + colorScheme: { + name: 'Color Scheme', + description: 'Global theme for components', + defaultValue: 'system', + toolbar: { + title: 'Color Scheme', + icon: 'paintbrush', + items: [ + { + title: 'Match system', + value: 'system', + icon: 'mirror', + }, + { + title: 'Light', + value: 'light', + icon: 'circlehollow', + }, + { + title: 'Dark (WIP)', + value: 'dark', + icon: 'circle', + }, + ], + }, + }, +}; export const decorators = [withThemeProvider, withUnmountWhenHidden]; diff --git a/.storybook/themes.ts b/.storybook/themes.ts index c7ac9f8732..f2f85e13d2 100644 --- a/.storybook/themes.ts +++ b/.storybook/themes.ts @@ -1,4 +1,5 @@ import { create } from '@storybook/theming'; +import { GLOBALS_UPDATED } from '@storybook/core-events'; import Link from './components/Link'; const brand = { @@ -46,15 +47,64 @@ export const dark = create({ base: 'dark', ...brand, brandImage: '/images/logo-name-dark.png', - colorPrimary: '#ffffff', - colorSecondary: '#ffffff', - appBg: '#0f131a', -}); + colorPrimary: '#ffffff', // var(--cui-fg-accent) + colorSecondary: '#ffffff', // var(--cui-fg-normal) -export function getTheme(prefersDark: boolean) { - return prefersDark ? dark : light; -} + // UI + appBg: '#0f131a', // var(--cui-bg-normal) + appContentBg: '#0f131a', // var(--cui-bg-normal) + appPreviewBg: '#0f131a', // var(--cui-bg-normal) +}); export const components = { a: Link, }; + +type ColorScheme = 'light' | 'dark'; + +type EventListener = ( + eventName: string, + callback: (context: { globals: Record }) => void, +) => void; + +export function listenToColorScheme( + eventEmitter: { on: EventListener; off: EventListener }, + callback: (colorMode: ColorScheme) => void, +) { + const query = window.matchMedia('(prefers-color-scheme: dark)'); + + const handleMediaChange = (event: MediaQueryListEvent) => { + callback(event.matches ? 'dark' : 'light'); + }; + + const handleGlobalsChange = ({ globals }) => { + if (globals.colorScheme === 'system') { + callback(query.matches ? 'dark' : 'light'); + query.addEventListener('change', handleMediaChange); + } else { + callback(globals.colorScheme); + query.removeEventListener('change', handleMediaChange); + } + }; + + const initColorScheme = () => { + const globals = new URL(window.location.href).searchParams.get('globals'); + + if (globals) { + const [key, value] = globals.split(':'); + if (key === 'colorScheme') { + return handleGlobalsChange({ globals: { colorScheme: value } }); + } + } + + handleGlobalsChange({ globals: { colorScheme: 'system' } }); + }; + + initColorScheme(); + + eventEmitter.on(GLOBALS_UPDATED, handleGlobalsChange); + + return () => { + eventEmitter.off(GLOBALS_UPDATED, handleGlobalsChange); + }; +} diff --git a/docs/introduction/1-welcome.mdx b/docs/introduction/1-welcome.mdx index 375a642400..7decf9b193 100644 --- a/docs/introduction/1-welcome.mdx +++ b/docs/introduction/1-welcome.mdx @@ -7,6 +7,7 @@ import { Meta, Image, Intro, Teaser } from '../../.storybook/components'; height="1000" alt="Logo of SumUp's Circuit UI design system" src="/images/logo-name-brand-light.png" + darkSrc="/images/logo-name-brand-dark.png" style={{ margin: '0 auto 36px' }} /> diff --git a/packages/circuit-ui/components/CloseButton/CloseButton.module.css b/packages/circuit-ui/components/CloseButton/CloseButton.module.css deleted file mode 100644 index fed6717dde..0000000000 --- a/packages/circuit-ui/components/CloseButton/CloseButton.module.css +++ /dev/null @@ -1,4 +0,0 @@ -.base { - /* The !important is necessary to override the default hover styles */ - border-color: transparent !important; -} diff --git a/packages/circuit-ui/components/CloseButton/CloseButton.tsx b/packages/circuit-ui/components/CloseButton/CloseButton.tsx index 00354a4983..cadf9ed847 100644 --- a/packages/circuit-ui/components/CloseButton/CloseButton.tsx +++ b/packages/circuit-ui/components/CloseButton/CloseButton.tsx @@ -16,21 +16,18 @@ import { forwardRef } from 'react'; import { Close } from '@sumup/icons'; -import { clsx } from '../../styles/clsx.js'; import { IconButton, IconButtonProps } from '../Button/IconButton.js'; -import classes from './CloseButton.module.css'; - export type CloseButtonProps = Omit; /** * A generic close button. */ export const CloseButton = forwardRef( - ({ label = 'Close', children = label, className, ...props }, ref) => ( + ({ label = 'Close', children = label, ...props }, ref) => ( { const handleChange = () => { setChecked((prev) => !prev); }; - return ; + return ( + + + + + ); }; Base.args = baseArgs; @@ -54,7 +61,12 @@ WithDescription.args = { description: 'Some more detailed text of what this means', }; -export const Disabled = (args: ToggleProps) => ; +export const Disabled = (args: ToggleProps) => ( + + + + +); Disabled.args = { ...baseArgs, diff --git a/packages/circuit-ui/components/legacy/InlineElements/InlineElements.stories.tsx b/packages/circuit-ui/components/legacy/InlineElements/InlineElements.stories.tsx index 6c39998161..11b5bff96f 100644 --- a/packages/circuit-ui/components/legacy/InlineElements/InlineElements.stories.tsx +++ b/packages/circuit-ui/components/legacy/InlineElements/InlineElements.stories.tsx @@ -17,7 +17,9 @@ import { css } from '@emotion/react'; +import { Stack } from '../../../../../.storybook/components/index.js'; import styled from '../../../styles/styled.js'; +import { modes } from '../../../../../.storybook/modes.js'; import { InlineElements } from './InlineElements.js'; @@ -26,6 +28,12 @@ export default { component: InlineElements, parameters: { controls: { hideNoControlsWarning: true }, + chromatic: { + modes: { + mobile: modes.smallMobile, + desktop: modes.desktop, + }, + }, }, }; @@ -53,39 +61,38 @@ const inlineElementsStyles = css` border: 1px solid magenta; `; -export const TwoInlineElements = () => ( - - - - +export const Base = () => ( + + + + + + + + + + + + 2x + 1x + + ); -export const ThreeInlineElements = () => ( - - - - - -); - -export const ThreeInlineElementsInlineOnMobile = () => ( - - - - - -); - -export const TwoInlineElementsWithRatios = () => ( - - 2x - 1x - -); - -export const TwoInlineElementsWithRatiosInlineOnMobile = () => ( - - 2x - 1x - +export const InlineOnMobile = () => ( + + + + + + + + + + + + 2x + 1x + + ); diff --git a/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap b/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap index 1352d4595d..acfb9faf91 100644 --- a/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap +++ b/packages/circuit-ui/components/legacy/Tooltip/__snapshots__/Tooltip.spec.tsx.snap @@ -17,7 +17,6 @@ exports[`Tooltip > should override alignment styles with position styles 1`] = ` -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -75,7 +74,6 @@ exports[`Tooltip > should render with align bottom, when passed "bottom" for the -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; top: calc(50% - (16px + 4px)); left: 100%; @@ -126,7 +124,6 @@ exports[`Tooltip > should render with align center, when passed "center" for the -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -184,7 +181,6 @@ exports[`Tooltip > should render with align left, when passed "left" for the ali -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -242,7 +238,6 @@ exports[`Tooltip > should render with align right, when passed "right" for the a -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -300,7 +295,6 @@ exports[`Tooltip > should render with align top, when passed "top" for the align -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); bottom: 50%; bottom: calc(50% - (16px + 4px)); left: 100%; @@ -351,7 +345,6 @@ exports[`Tooltip > should render with position bottom, when passed "bottom" for -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); @@ -409,7 +402,6 @@ exports[`Tooltip > should render with position left, when passed "left" for the -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -467,7 +459,6 @@ exports[`Tooltip > should render with position right, when passed "right" for th -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); @@ -525,7 +516,6 @@ exports[`Tooltip > should render with position top, when passed "top" for the po -webkit-transition: opacity 0.3s; transition: opacity 0.3s; box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); diff --git a/packages/circuit-ui/hooks/useFocusList/useFocusList.stories.tsx b/packages/circuit-ui/hooks/useFocusList/useFocusList.stories.tsx index c52cf11701..042837b669 100644 --- a/packages/circuit-ui/hooks/useFocusList/useFocusList.stories.tsx +++ b/packages/circuit-ui/hooks/useFocusList/useFocusList.stories.tsx @@ -15,6 +15,7 @@ /* eslint-disable jsx-a11y/no-redundant-roles */ import { action } from '@storybook/addon-actions'; +import { userEvent } from '@storybook/testing-library'; import sharedClasses from '../../styles/shared.js'; @@ -45,3 +46,7 @@ export const Example = () => { ); }; + +Example.play = async () => { + await userEvent.tab(); +}; diff --git a/packages/circuit-ui/styles/style-mixins.spec.tsx b/packages/circuit-ui/styles/style-mixins.spec.tsx index dc040da982..a5586623b1 100644 --- a/packages/circuit-ui/styles/style-mixins.spec.tsx +++ b/packages/circuit-ui/styles/style-mixins.spec.tsx @@ -152,10 +152,7 @@ describe('Style helpers', () => { expect(styles).toMatchInlineSnapshot( ` " - /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 - color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); " `, ); diff --git a/packages/circuit-ui/styles/style-mixins.stories.tsx b/packages/circuit-ui/styles/style-mixins.stories.tsx index 0afabec567..d20fa6ba48 100644 --- a/packages/circuit-ui/styles/style-mixins.stories.tsx +++ b/packages/circuit-ui/styles/style-mixins.stories.tsx @@ -15,6 +15,8 @@ /** @jsxImportSource @emotion/react */ +import { userEvent } from '@storybook/testing-library'; + import { Stack } from '../../../.storybook/components/index.js'; import Button from '../components/Button/index.js'; @@ -57,7 +59,7 @@ const spaceOptions = { const Background = styled.div` display: inline-block; - background-color: #f8cb9c; + background-color: var(--cui-bg-promo); `; type SpacingArgs = { @@ -103,10 +105,14 @@ const Box = styled.div` width: 15rem; max-width: 100%; margin: 1rem; - background-color: white; + background-color: var(--cui-bg-normal); `; -export const Shadow = () => ; +export const Shadow = () => ( + + + +); const Parent = styled.div` width: 100%; @@ -118,7 +124,7 @@ const Floated = styled.div` float: right; height: 120px; width: 240px; - background-color: #ccc; + background-color: var(--cui-bg-highlight); `; export const Clearfix = () => ( @@ -137,6 +143,10 @@ export const FocusVisible = () => ( ); +FocusVisible.play = async () => { + await userEvent.tab(); +}; + export const InputOutline = () => ( diff --git a/packages/circuit-ui/styles/style-mixins.ts b/packages/circuit-ui/styles/style-mixins.ts index ad005d9315..4ef35db5a8 100644 --- a/packages/circuit-ui/styles/style-mixins.ts +++ b/packages/circuit-ui/styles/style-mixins.ts @@ -128,10 +128,7 @@ export const spacing = ( */ export function shadow(): SerializedStyles { return css` - /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2); - box-shadow: 0 3px 8px 0 - color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); `; } diff --git a/packages/circuit-ui/styles/utility.module.css b/packages/circuit-ui/styles/utility.module.css index a83545443c..25871c2d52 100644 --- a/packages/circuit-ui/styles/utility.module.css +++ b/packages/circuit-ui/styles/utility.module.css @@ -53,8 +53,5 @@ } .shadow { - /* Fallback for browsers that don't support color-mix yet */ box-shadow: 0 3px 8px 0 rgb(0 0 0 / 20%); - box-shadow: 0 3px 8px 0 - color-mix(in sRGB, var(--cui-border-strong) 20%, transparent); } diff --git a/packages/design-tokens/README.md b/packages/design-tokens/README.md index f55877000c..599b2ed329 100644 --- a/packages/design-tokens/README.md +++ b/packages/design-tokens/README.md @@ -22,16 +22,10 @@ yarn add @sumup/design-tokens ## Usage -The [legacy JavaScript theme](#legacy-javascript-theme) for Emotion.js is being replaced by [CSS custom properties](#css-custom-properties) (aka CSS variables) to improve performance and compatibility with other frameworks. We recommend installing the [`@sumup/eslint-plugin-circuit-ui`](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) ESLint plugin and turning on the `prefer-custom-properties` and `no-invalid-custom-properties` rules to help with the migration. - -Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/features-theme--docs) for a full reference of the available tokens. - -### CSS custom properties - -The `@sumup/design-tokens/light.css` CSS file contains all CSS custom properties that are used by Circuit UI. Import it globally in your application, such as in Next.js' `_app.tsx` file: +The design tokens are exported as [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). Choose a [color scheme](#color-schemes), then import the corresponding CSS file globally in your application, such as in Next.js' `app/layout.tsx` file: ```tsx -// _app.tsx +// app/layout.tsx import '@sumup/design-tokens/light.css'; function App({ Component, pageProps }) { @@ -41,8 +35,29 @@ function App({ Component, pageProps }) { The application code must be processed by a bundler that can handle CSS files. [Next.js](https://nextjs.org/docs/pages/building-your-application/styling), [Create React App](https://create-react-app.dev/docs/adding-a-stylesheet), [Vite](https://vitejs.dev/guide/features.html#css-modules), [Parcel](https://parceljs.org/languages/css/#css-modules), and others support importing CSS files out of the box. +Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/features-theme--docs) for a complete reference of the available tokens. + +### Color schemes + +#### Single color scheme + +For applications that support a single color scheme, import the `@sumup/design-tokens/light.css` or `@sumup/design-tokens/dark.css` themes. They contain the complete set of design tokens, in light and dark mode respectively. The tokens are defined globally on the `:root` element. The themes can be used independently or with a [scoped theme](#scoped-color-scheme). + +#### Scoped color scheme + +To apply a different color scheme to a subset of an application, import the `@sumup/design-tokens/light-scoped.css` or `@sumup/design-tokens/dark-scoped.css` themes. They contain only color tokens which are scoped to the `data-color-scheme="light"` and `data-color-scheme="dark"` selectors respectively. The themes must be used alongside a [full theme](#single-color-scheme) to ensure that all design tokens are defined. + +#### Multiple color schemes + +For applications that support switching between light and dark color schemes, import the `@sumup/design-tokens/dynamic.css` theme. It contains all tokens defined globally on the `:root` element, the dark color tokens scoped to the `prefers-color-scheme: dark` media query, and the [scoped themes](#scoped-color-scheme). By default, the color scheme follows the system settings. Add the `data-color-scheme` attribute on the document root to set a specific color scheme. + +Ensure that users have full control over their preferred color mode: dark, light, or match system. Their choice should be persisted between devices and sessions. There should be no [Flash of inAccurate coloR Theme (FART)](https://css-tricks.com/flash-of-inaccurate-color-theme-fart/), regardless of whether the app is client-side or server-side rendered. + ### Legacy JavaScript theme +> [!WARNING] +> The JavaScript theme is being replaced by [CSS custom properties](#usage) (aka CSS variables) to improve performance and compatibility with other frameworks. We recommend installing the [`@sumup/eslint-plugin-circuit-ui`](https://circuit.sumup.com/?path=/docs/packages-eslint-plugin-circuit-ui--docs) ESLint plugin and turning on the `prefer-custom-properties` and `no-invalid-custom-properties` rules to help with the migration. + The `light` theme is meant to be used with Emotion.js' [`ThemeProvider`](https://emotion.sh/docs/theming): ```tsx @@ -75,7 +90,7 @@ import { withTheme } from '@emotion/react'; import { themePropType } from '@sumup/design-tokens'; function ComponentWithInlineStyles({ theme, label }) { - return
{label}
; + return
{label}
; } ComponentWithInlineStyles.propTypes = { @@ -92,7 +107,7 @@ The package exports a `Theme` interface that can be used to augment Emotion.js' ```ts import '@emotion/react'; -import { Theme as CircuitUITheme } from '@sumup/design-tokens'; +import type { Theme as CircuitUITheme } from '@sumup/design-tokens'; declare module '@emotion/react' { export interface Theme extends CircuitUITheme {} diff --git a/packages/design-tokens/scripts/build.spec.ts b/packages/design-tokens/scripts/build.spec.ts index b5443908fd..a4d16b9789 100644 --- a/packages/design-tokens/scripts/build.spec.ts +++ b/packages/design-tokens/scripts/build.spec.ts @@ -18,41 +18,86 @@ import { describe, it, expect } from 'vitest'; import type { Token } from '../types/index.js'; import { - validateTokens, + validateTheme, createCSSCustomProperties, createStyles, } from './build.js'; describe('build', () => { - describe('validateTokens', () => { - it('should throw an error when required tokens are missing', () => { - const tokens = [ + it('should throw not throw an error when tokens are missing in a scoped theme', () => { + const theme = { + name: 'test', + groups: [ { - name: '--cui-bg-normal', - description: 'Use as normal background color in any given interface', - value: '#00f2b840', - type: 'color', + colorScheme: 'light' as const, + selectors: ['[data-color-scheme="light"]'], + tokens: [ + { + name: '--cui-bg-normal', + description: + 'Use as normal background color in any given interface', + value: '#00f2b840', + type: 'color', + }, + ] as Token[], }, - ] as Token[]; + ], + }; - const actual = () => validateTokens(tokens); + const actual = () => validateTheme(theme); + + expect(actual).not.toThrow(); + }); + + describe('validateTheme', () => { + it('should throw an error when required tokens are not globally defined', () => { + const theme = { + name: 'test', + groups: [ + { + colorScheme: 'light' as const, + selectors: [':root'], + tokens: [ + { + name: '--cui-bg-normal', + description: + 'Use as normal background color in any given interface', + value: '#00f2b840', + type: 'color', + }, + ] as Token[], + }, + ], + }; + + const actual = () => validateTheme(theme); expect(actual).toThrow( - 'The theme is missing the required "--cui-bg-normal-hovered" token.', + 'The "test" theme does not globally define the required "--cui-bg-normal-hovered" token. Add it to the ":root" selector.', ); }); it('should throw an error when a token does not match the expected type', () => { - const tokens = [ - { - name: '--cui-bg-normal', - description: 'Use as normal background color in any given interface', - value: '#00f2b840', - type: 'spacing', - }, - ] as unknown as Token[]; + const theme = { + name: 'test', + groups: [ + { + colorScheme: 'light' as const, + selectors: [':root'], + tokens: [ + { + name: '--cui-bg-normal', + description: + 'Use as normal background color in any given interface', + value: '#00f2b840', + type: 'spacing', + }, + ] as unknown as Token[], + }, + ], + }; - const actual = () => validateTokens(tokens); + const actual = () => validateTheme(theme); expect(actual).toThrow( 'The "--cui-bg-normal" token does not match the expected type. Expected "color". Received "spacing."', @@ -62,7 +107,6 @@ describe('build', () => { describe('createStyles', () => { const theme = { - name: 'test', tokens: [ { name: '--cui-bg-normal', @@ -71,15 +115,33 @@ describe('build', () => { type: 'color', }, ] as Token[], - selector: ':root', - colorScheme: 'light', - } as const; + selectors: [':root'], + colorScheme: 'light' as const, + }; + + it('should create CSS styles for the theme', () => { + const actual = createStyles(theme); + + expect(actual).toMatchInlineSnapshot( + ` + ":root { + color-scheme: light; + /* Use as normal background color in any given interface */ --cui-bg-normal: #00f2b840; + }" + `, + ); + }); it('should create CSS styles for the theme', () => { const actual = createStyles(theme); expect(actual).toMatchInlineSnapshot( - '":root { color-scheme: light; /* Use as normal background color in any given interface */ --cui-bg-normal: #00f2b840; }"', + ` + ":root { + color-scheme: light; + /* Use as normal background color in any given interface */ --cui-bg-normal: #00f2b840; + }" + `, ); }); }); diff --git a/packages/design-tokens/scripts/build.ts b/packages/design-tokens/scripts/build.ts index 9e1306681d..010ac2f87e 100755 --- a/packages/design-tokens/scripts/build.ts +++ b/packages/design-tokens/scripts/build.ts @@ -22,35 +22,100 @@ import browserslist from 'browserslist'; import { transform, browserslistToTargets } from 'lightningcss'; import { schema } from '../themes/schema.js'; +import { shared } from '../themes/shared.js'; import { light } from '../themes/light.js'; +import { dark } from '../themes/dark.js'; import type { ColorScheme, Token } from '../types/index.js'; +type StyleGroup = { + selectors: string[]; + colorScheme: ColorScheme; + tokens: Token[]; +}; + type Theme = { name: string; - tokens: Token[]; - selector: string; - colorScheme: ColorScheme; + groups: StyleGroup[]; }; function main(): void { const themes: Theme[] = [ { name: 'light', - tokens: light, - selector: ':root', - colorScheme: 'light', + groups: [ + { + tokens: [...light, ...shared], + selectors: [':root'], + colorScheme: 'light', + }, + ], + }, + { + name: 'dark', + groups: [ + { + tokens: [...dark, ...shared], + selectors: [':root'], + colorScheme: 'dark', + }, + ], + }, + { + name: 'light-scoped', + groups: [ + { + tokens: light, + selectors: ['[data-color-scheme="light"]'], + colorScheme: 'light', + }, + ], + }, + { + name: 'dark-scoped', + groups: [ + { + tokens: dark, + selectors: ['[data-color-scheme="dark"]'], + colorScheme: 'dark', + }, + ], + }, + { + name: 'dynamic', + groups: [ + { + tokens: [...light, ...shared], + selectors: [':root'], + colorScheme: 'light', + }, + { + tokens: dark, + selectors: ['@media (prefers-color-scheme: dark)', ':root'], + colorScheme: 'dark', + }, + { + tokens: light, + selectors: ['[data-color-scheme="light"]'], + colorScheme: 'light', + }, + { + tokens: dark, + selectors: ['[data-color-scheme="dark"]'], + colorScheme: 'dark', + }, + ], }, ]; const targets = browserslistToTargets(browserslist()); themes.forEach((theme) => { - validateTokens(theme.tokens); + validateTheme(theme); const filename = `${theme.name}.css`; const filepath = path.join(__dirname, '../', filename); - const styles = createStyles(theme); + const styles = theme.groups.map(createStyles).join('\n'); const { code } = transform({ filename, code: Buffer.from(styles), @@ -65,28 +130,60 @@ function main(): void { * Validates that the theme includes all expected tokens * and that the token values match the expected type. */ -export function validateTokens(tokens: Token[]): void { - schema.forEach(({ name, type }) => { - const token = tokens.find((t) => t.name === name); - - if (!token) { - throw new Error(`The theme is missing the required "${name}" token.`); - } - - if (token.type !== type) { - throw new Error( - [ - `The "${name}" token does not match the expected type.`, - `Expected "${type as string}". Received "${token.type as string}."`, - ].join(' '), - ); - } +export function validateTheme(theme: Theme): void { + // Validate the token types + theme.groups.forEach(({ tokens }) => { + tokens.forEach(({ name, type }) => { + const token = schema.find((t) => t.name === name); + + if (!token) { + return; + // throw new Error(`The theme is missing the required "${name}" token.`); + } + + if (token.type !== type) { + throw new Error( + [ + `The "${name}" token does not match the expected type.`, + `Expected "${token.type as string}". Received "${type as string}."`, + ].join(' '), + ); + } + }); }); + + // Validate that the tokens at the root are complete + const rootGroup = theme.groups.find( + (group) => group.selectors.length === 1 && group.selectors[0] === ':root', + ); + + if (!rootGroup) { + return; + } + + if (rootGroup.tokens.length !== schema.length) { + schema.forEach(({ name }) => { + const token = rootGroup.tokens.find((t) => t.name === name); + + if (!token) { + throw new Error( + `The "${theme.name}" theme does not globally define the required "${name}" token. Add it to the ":root" selector.`, + ); + } + }); + } } -export function createStyles(theme: Theme) { - const customProperties = createCSSCustomProperties(theme.tokens); - return `${theme.selector} { color-scheme: ${theme.colorScheme}; ${customProperties} }`; +export function createStyles(group: StyleGroup) { + const selectorStart = group.selectors + .map((selector) => `${selector} {`) + .join(''); + const selectorEnd = group.selectors.map(() => `}`).join(''); + const customProperties = createCSSCustomProperties(group.tokens); + return `${selectorStart} + color-scheme: ${group.colorScheme}; + ${customProperties} + ${selectorEnd}`; } /** diff --git a/packages/design-tokens/themes/dark.ts b/packages/design-tokens/themes/dark.ts new file mode 100644 index 0000000000..339ab6f006 --- /dev/null +++ b/packages/design-tokens/themes/dark.ts @@ -0,0 +1,713 @@ +/** + * Copyright 2023, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Token } from '../types/index.js'; + +export const dark = [ + /* Neutral backgrounds */ + { + name: '--cui-bg-normal', + value: '#171d24', + type: 'color', + }, + { + name: '--cui-bg-normal-hovered', + value: '#212831', + type: 'color', + }, + { + name: '--cui-bg-normal-pressed', + value: '#28313c', + type: 'color', + }, + { + name: '--cui-bg-normal-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-subtle', + value: '#0c0f12', + type: 'color', + }, + { + name: '--cui-bg-subtle-hovered', + value: '#080b0d', + type: 'color', + }, + { + name: '--cui-bg-subtle-pressed', + value: '#040607', + type: 'color', + }, + { + name: '--cui-bg-subtle-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-highlight', + value: '#363c41', + type: 'color', + }, + { + name: '--cui-bg-highlight-hovered', + value: '#3d4249', + type: 'color', + }, + { + name: '--cui-bg-highlight-pressed', + value: '#424950', + type: 'color', + }, + { + name: '--cui-bg-highlight-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-strong', + value: '#ffffff', + type: 'color', + }, + { + name: '--cui-bg-strong-hovered', + value: '#f6f8f9', + type: 'color', + }, + { + name: '--cui-bg-strong-pressed', + value: '#e3e7eb', + type: 'color', + }, + { + name: '--cui-bg-strong-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + /* Accent backgrounds */ + { + name: '--cui-bg-accent', + value: '#0C0F12', + type: 'color', + }, + { + name: '--cui-bg-accent-hovered', + value: '#080B0D', + type: 'color', + }, + { + name: '--cui-bg-accent-pressed', + value: '#040607', + type: 'color', + }, + { + name: '--cui-bg-accent-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-accent-strong', + value: '#ffffff', + type: 'color', + }, + { + name: '--cui-bg-accent-strong-hovered', + value: '#f6f8f9', + type: 'color', + }, + { + name: '--cui-bg-accent-strong-pressed', + value: '#e3e7eb', + type: 'color', + }, + { + name: '--cui-bg-accent-strong-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + /* Success backgrounds */ + { + name: '--cui-bg-success', + value: 'rgba(12, 211, 104, 0.2000)', + type: 'color', + }, + { + name: '--cui-bg-success-hovered', + value: 'rgba(12, 211, 104, 0.2500)', + type: 'color', + }, + { + name: '--cui-bg-success-pressed', + value: 'rgba(12, 211, 104, 0.3000)', + type: 'color', + }, + { + name: '--cui-bg-success-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-success-strong', + value: '#0cd368', + type: 'color', + }, + { + name: '--cui-bg-success-strong-hovered', + value: '#13e072', + type: 'color', + }, + { + name: '--cui-bg-success-strong-pressed', + value: '#25e980', + type: 'color', + }, + { + name: '--cui-bg-success-strong-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + /* Warning backgrounds */ + { + name: '--cui-bg-warning', + value: 'rgba(245, 158, 28, 0.2000)', + type: 'color', + }, + { + name: '--cui-bg-warning-hovered', + value: 'rgba(245, 158, 28, 0.2500)', + type: 'color', + }, + { + name: '--cui-bg-warning-pressed', + value: 'rgba(245, 158, 28, 0.3000)', + type: 'color', + }, + { + name: '--cui-bg-warning-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-warning-strong', + value: '#f5b81c', + type: 'color', + }, + { + name: '--cui-bg-warning-strong-hovered', + value: '#f7c440', + type: 'color', + }, + { + name: '--cui-bg-warning-strong-pressed', + value: '#f7cb59', + type: 'color', + }, + { + name: '--cui-bg-warning-strong-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + /* Danger backgrounds */ + { + name: '--cui-bg-danger', + value: 'rgba(255, 76, 53, 0.2000)', + type: 'color', + }, + { + name: '--cui-bg-danger-hovered', + value: 'rgba(255, 76, 53, 0.2500)', + type: 'color', + }, + { + name: '--cui-bg-danger-pressed', + value: 'rgba(255, 76, 53, 0.3000)', + type: 'color', + }, + { + name: '--cui-bg-danger-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-danger-strong', + value: '#ff4e37', + type: 'color', + }, + { + name: '--cui-bg-danger-strong-hovered', + value: '#ff5c47', + type: 'color', + }, + { + name: '--cui-bg-danger-strong-pressed', + value: '#ff6a57', + type: 'color', + }, + { + name: '--cui-bg-danger-strong-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + /* Promo backgrounds */ + { + name: '--cui-bg-promo', + value: 'rgba(195, 83, 247, 0.2000)', + type: 'color', + }, + { + name: '--cui-bg-promo-hovered', + value: 'rgba(195, 83, 247, 0.2500)', + type: 'color', + }, + { + name: '--cui-bg-promo-pressed', + value: 'rgba(195, 83, 247, 0.3000)', + type: 'color', + }, + { + name: '--cui-bg-promo-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + { + name: '--cui-bg-promo-strong', + value: '#c353f7', + type: 'color', + }, + { + name: '--cui-bg-promo-strong-hovered', + value: '#c768f3', + type: 'color', + }, + { + name: '--cui-bg-promo-strong-pressed', + value: '#ce72f8', + type: 'color', + }, + { + name: '--cui-bg-promo-strong-disabled', + value: 'rgba(216, 232, 248, 0.0800)', + type: 'color', + }, + /* Neutral foregrounds */ + { + name: '--cui-fg-normal', + value: '#ffffff', + type: 'color', + }, + { + name: '--cui-fg-normal-hovered', + value: '#f6f8f9', + type: 'color', + }, + { + name: '--cui-fg-normal-pressed', + value: '#e3e7eb', + type: 'color', + }, + { + name: '--cui-fg-normal-disabled', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + { + name: '--cui-fg-subtle', + value: 'rgba(223, 232, 241, 0.6000)', + type: 'color', + }, + { + name: '--cui-fg-subtle-hovered', + value: 'rgba(223, 232, 241, 0.7000)', + type: 'color', + }, + { + name: '--cui-fg-subtle-pressed', + value: 'rgba(223, 232, 241, 0.8000)', + type: 'color', + }, + { + name: '--cui-fg-subtle-disabled', + value: 'rgba(216, 232, 248, 0.2000)', + type: 'color', + }, + { + name: '--cui-fg-placeholder', + value: 'rgba(223, 232, 241, 0.4000)', + type: 'color', + }, + { + name: '--cui-fg-placeholder-hovered', + value: 'rgba(223, 232, 241, 0.4000)', + type: 'color', + }, + { + name: '--cui-fg-placeholder-pressed', + value: 'rgba(223, 232, 241, 0.4000)', + type: 'color', + }, + { + name: '--cui-fg-placeholder-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + { + name: '--cui-fg-on-strong', + value: '#0f131a', + type: 'color', + }, + { + name: '--cui-fg-on-strong-hovered', + value: '#0f131a', + type: 'color', + }, + { + name: '--cui-fg-on-strong-pressed', + value: '#0f131a', + type: 'color', + }, + { + name: '--cui-fg-on-strong-disabled', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + { + name: '--cui-fg-on-strong-subtle', + value: 'rgba(15, 19, 26, 0.7000)', + type: 'color', + }, + { + name: '--cui-fg-on-strong-subtle-hovered', + value: 'rgba(15, 19, 26, 0.7000)', + type: 'color', + }, + { + name: '--cui-fg-on-strong-subtle-pressed', + value: 'rgba(15, 19, 26, 0.7000)', + type: 'color', + }, + { + name: '--cui-fg-on-strong-subtle-disabled', + value: 'rgba(216, 232, 248, 0.2000)', + type: 'color', + }, + /* Accent foregrounds */ + { + name: '--cui-fg-accent', + value: '#ffffff', + type: 'color', + }, + { + name: '--cui-fg-accent-hovered', + value: '#f6f8f9', + type: 'color', + }, + { + name: '--cui-fg-accent-pressed', + value: '#e3e7eb', + type: 'color', + }, + { + name: '--cui-fg-accent-disabled', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + /* Success foregrounds */ + { + name: '--cui-fg-success', + value: '#17db72', + type: 'color', + }, + { + name: '--cui-fg-success-hovered', + value: '#13e072', + type: 'color', + }, + { + name: '--cui-fg-success-pressed', + value: '#25e980', + type: 'color', + }, + { + name: '--cui-fg-success-disabled', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + /* Warning foregrounds */ + { + name: '--cui-fg-warning', + value: '#f5b81c', + type: 'color', + }, + { + name: '--cui-fg-warning-hovered', + value: '#f7c440', + type: 'color', + }, + { + name: '--cui-fg-warning-pressed', + value: '#f7cb59', + type: 'color', + }, + { + name: '--cui-fg-warning-disabled', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + /* Danger foregrounds */ + { + name: '--cui-fg-danger', + value: '#ff634e', + type: 'color', + }, + { + name: '--cui-fg-danger-hovered', + value: '#ff5c47', + type: 'color', + }, + { + name: '--cui-fg-danger-pressed', + value: '#ff6a57', + type: 'color', + }, + { + name: '--cui-fg-danger-disabled', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + /* Promo foregrounds */ + { + name: '--cui-fg-promo', + value: '#cf7bf6', + type: 'color', + }, + { + name: '--cui-fg-promo-hovered', + value: '#c768f3', + type: 'color', + }, + { + name: '--cui-fg-promo-pressed', + value: '#ce72f8', + type: 'color', + }, + { + name: '--cui-fg-promo-disabled', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + /* Neutral borders */ + { + name: '--cui-border-normal', + value: 'rgba(223, 232, 241, 0.3000)', + type: 'color', + }, + { + name: '--cui-border-normal-hovered', + value: 'rgba(223, 232, 241, 0.3500)', + type: 'color', + }, + { + name: '--cui-border-normal-pressed', + value: 'rgba(223, 232, 241, 0.4500)', + type: 'color', + }, + { + name: '--cui-border-normal-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + { + name: '--cui-border-subtle', + value: 'rgba(223, 232, 241, 0.1500)', + type: 'color', + }, + { + name: '--cui-border-subtle-hovered', + value: 'rgba(223, 232, 241, 0.2000)', + type: 'color', + }, + { + name: '--cui-border-subtle-pressed', + value: 'rgba(223, 232, 241, 0.3000)', + type: 'color', + }, + { + name: '--cui-border-subtle-disabled', + value: 'rgba(216, 232, 248, 0.1000)', + type: 'color', + }, + { + name: '--cui-border-divider', + value: 'rgba(216, 232, 248, 0.3000)', + type: 'color', + }, + { + name: '--cui-border-divider-hovered', + value: 'rgba(223, 232, 241, 0.3500)', + type: 'color', + }, + { + name: '--cui-border-divider-pressed', + value: 'rgba(223, 232, 241, 0.4500)', + type: 'color', + }, + { + name: '--cui-border-divider-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + { + name: '--cui-border-strong', + value: '#ffffff', + type: 'color', + }, + { + name: '--cui-border-strong-hovered', + value: '#f6f8f9', + type: 'color', + }, + { + name: '--cui-border-strong-pressed', + value: '#e3e7eb', + type: 'color', + }, + { + name: '--cui-border-strong-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + /* Accent borders */ + { + name: '--cui-border-accent', + value: '#ffffff', + type: 'color', + }, + { + name: '--cui-border-accent-hovered', + value: '#f6f8f9', + type: 'color', + }, + { + name: '--cui-border-accent-pressed', + value: '#e3e7eb', + type: 'color', + }, + { + name: '--cui-border-accent-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + /* Success borders */ + { + name: '--cui-border-success', + value: '#0cd368', + type: 'color', + }, + { + name: '--cui-border-success-hovered', + value: '#13e072', + type: 'color', + }, + { + name: '--cui-border-success-pressed', + value: '#25e980', + type: 'color', + }, + { + name: '--cui-border-success-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + /* Warning borders */ + { + name: '--cui-border-warning', + value: '#f5b81c', + type: 'color', + }, + { + name: '--cui-border-warning-hovered', + value: '#f7c440', + type: 'color', + }, + { + name: '--cui-border-warning-pressed', + value: '#f7cb59', + type: 'color', + }, + { + name: '--cui-border-warning-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + /* Danger borders */ + { + name: '--cui-border-danger', + value: '#ff4e37', + type: 'color', + }, + { + name: '--cui-border-danger-hovered', + value: '#ff5c47', + type: 'color', + }, + { + name: '--cui-border-danger-pressed', + value: '#ff6a57', + type: 'color', + }, + { + name: '--cui-border-danger-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + /* Promo borders */ + { + name: '--cui-border-promo', + value: '#c353f7', + type: 'color', + }, + { + name: '--cui-border-promo-hovered', + value: '#c768f3', + type: 'color', + }, + { + name: '--cui-border-promo-pressed', + value: '#ce72f8', + type: 'color', + }, + { + name: '--cui-border-promo-disabled', + value: 'rgba(216, 232, 248, 0.1500)', + type: 'color', + }, + /* Special colors */ + { + name: '--cui-bg-overlay', + value: 'rgba(0, 0, 0, 0.7000)', + type: 'color', + }, + { + name: '--cui-bg-elevated', + value: '#2f3438', + type: 'color', + }, + { + name: '--cui-border-focus', + value: '#ffffff', + type: 'color', + }, +] satisfies Token[]; diff --git a/packages/design-tokens/themes/light.ts b/packages/design-tokens/themes/light.ts index b8dd56a906..3f47c5bb2f 100644 --- a/packages/design-tokens/themes/light.ts +++ b/packages/design-tokens/themes/light.ts @@ -707,323 +707,7 @@ export const light = [ }, { name: '--cui-border-focus', - value: '#3064e3', + value: '#0f131a', type: 'color', }, - /* Border radii */ - { - name: '--cui-border-radius-bit', - value: '4px', - type: 'dimension', - }, - { - name: '--cui-border-radius-byte', - value: '8px', - type: 'dimension', - }, - { - name: '--cui-border-radius-kilo', - value: '12px', - type: 'dimension', - }, - { - name: '--cui-border-radius-mega', - value: '16px', - type: 'dimension', - }, - { - name: '--cui-border-radius-circle', - value: '100%', - type: 'dimension', - }, - { - name: '--cui-border-radius-pill', - value: '999999px', - type: 'dimension', - }, - /* Border widths */ - { - name: '--cui-border-width-kilo', - value: '1px', - type: 'dimension', - }, - { - name: '--cui-border-width-mega', - value: '2px', - type: 'dimension', - }, - /* Font families */ - { - name: '--cui-font-stack-default', - value: - 'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', - type: 'fontFamily', - }, - { - name: '--cui-font-stack-mono', - value: - 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace', - type: 'fontFamily', - }, - /* Font weights */ - { - name: '--cui-font-weight-regular', - value: '400', - type: 'fontWeight', - }, - { - name: '--cui-font-weight-bold', - value: '700', - type: 'fontWeight', - }, - /* Icon sizes */ - { - name: '--cui-icon-sizes-kilo', - value: '16px', - type: 'dimension', - }, - { - name: '--cui-icon-sizes-mega', - value: '24px', - type: 'dimension', - }, - { - name: '--cui-icon-sizes-giga', - value: '32px', - type: 'dimension', - }, - { - name: '--cui-icon-sizes-tera', - value: '48px', - type: 'dimension', - }, - /* Spacings */ - { - name: '--cui-spacings-bit', - value: '4px', - type: 'dimension', - }, - { - name: '--cui-spacings-byte', - value: '8px', - type: 'dimension', - }, - { - name: '--cui-spacings-kilo', - value: '12px', - type: 'dimension', - }, - { - name: '--cui-spacings-mega', - value: '16px', - type: 'dimension', - }, - { - name: '--cui-spacings-giga', - value: '24px', - type: 'dimension', - }, - { - name: '--cui-spacings-tera', - value: '32px', - type: 'dimension', - }, - { - name: '--cui-spacings-peta', - value: '40px', - type: 'dimension', - }, - { - name: '--cui-spacings-exa', - value: '48px', - type: 'dimension', - }, - { - name: '--cui-spacings-zetta', - value: '56px', - type: 'dimension', - }, - /* Transitions */ - { - name: '--cui-transitions-default', - value: '120ms ease-in-out', - type: 'duration', - }, - { - name: '--cui-transitions-slow', - value: '300ms ease-in-out', - type: 'duration', - }, - /* Typography */ - { - name: '--cui-typography-headline-one-font-size', - value: '2rem', - type: 'dimension', - }, - { - name: '--cui-typography-headline-one-line-height', - value: '2.25rem', - type: 'dimension', - }, - { - name: '--cui-typography-headline-two-font-size', - value: '1.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-headline-two-line-height', - value: '1.75rem', - type: 'dimension', - }, - { - name: '--cui-typography-headline-three-font-size', - value: '1.25rem', - type: 'dimension', - }, - { - name: '--cui-typography-headline-three-line-height', - value: '1.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-headline-four-font-size', - value: '1.125rem', - type: 'dimension', - }, - { - name: '--cui-typography-headline-four-line-height', - value: '1.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-one-font-size', - value: '7.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-one-line-height', - value: '7.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-two-font-size', - value: '6rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-two-line-height', - value: '6rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-three-font-size', - value: '4rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-three-line-height', - value: '4rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-four-font-size', - value: '3.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-title-four-line-height', - value: '3.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-sub-headline-font-size', - value: '0.875rem', - type: 'dimension', - }, - { - name: '--cui-typography-sub-headline-line-height', - value: '1.25rem', - type: 'dimension', - }, - { - name: '--cui-typography-body-one-font-size', - value: '1rem', - type: 'dimension', - }, - { - name: '--cui-typography-body-one-line-height', - value: '1.5rem', - type: 'dimension', - }, - { - name: '--cui-typography-body-two-font-size', - value: '0.875rem', - type: 'dimension', - }, - { - name: '--cui-typography-body-two-line-height', - value: '1.25rem', - type: 'dimension', - }, - { - name: '--cui-typography-body-large-font-size', - value: '1.25rem', - type: 'dimension', - }, - { - name: '--cui-typography-body-large-line-height', - value: '1.75rem', - type: 'dimension', - }, - /* Z-indices */ - { - name: '--cui-z-index-default', - value: 0, - type: 'number', - }, - { - name: '--cui-z-index-absolute', - value: 1, - type: 'number', - }, - { - name: '--cui-z-index-input', - value: 20, - type: 'number', - }, - { - name: '--cui-z-index-popover', - value: 30, - type: 'number', - }, - { - name: '--cui-z-index-tooltip', - value: 40, - type: 'number', - }, - { - name: '--cui-z-index-header', - value: 600, - type: 'number', - }, - { - name: '--cui-z-index-backdrop', - value: 700, - type: 'number', - }, - { - name: '--cui-z-index-navigation', - value: 800, - type: 'number', - }, - { - name: '--cui-z-index-modal', - value: 1000, - type: 'number', - }, - { - name: '--cui-z-index-toast', - value: 1100, - type: 'number', - }, ] satisfies Token[]; diff --git a/packages/design-tokens/themes/shared.ts b/packages/design-tokens/themes/shared.ts new file mode 100644 index 0000000000..cb524c3dc6 --- /dev/null +++ b/packages/design-tokens/themes/shared.ts @@ -0,0 +1,335 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type { Token } from '../types/index.js'; + +export const shared = [ + /* Border radii */ + { + name: '--cui-border-radius-bit', + value: '4px', + type: 'dimension', + }, + { + name: '--cui-border-radius-byte', + value: '8px', + type: 'dimension', + }, + { + name: '--cui-border-radius-kilo', + value: '12px', + type: 'dimension', + }, + { + name: '--cui-border-radius-mega', + value: '16px', + type: 'dimension', + }, + { + name: '--cui-border-radius-circle', + value: '100%', + type: 'dimension', + }, + { + name: '--cui-border-radius-pill', + value: '999999px', + type: 'dimension', + }, + /* Border widths */ + { + name: '--cui-border-width-kilo', + value: '1px', + type: 'dimension', + }, + { + name: '--cui-border-width-mega', + value: '2px', + type: 'dimension', + }, + /* Font families */ + { + name: '--cui-font-stack-default', + value: + 'aktiv-grotesk, Helvetica, Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"', + type: 'fontFamily', + }, + { + name: '--cui-font-stack-mono', + value: + 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace', + type: 'fontFamily', + }, + /* Font weights */ + { + name: '--cui-font-weight-regular', + value: '400', + type: 'fontWeight', + }, + { + name: '--cui-font-weight-bold', + value: '700', + type: 'fontWeight', + }, + /* Icon sizes */ + { + name: '--cui-icon-sizes-kilo', + value: '16px', + type: 'dimension', + }, + { + name: '--cui-icon-sizes-mega', + value: '24px', + type: 'dimension', + }, + { + name: '--cui-icon-sizes-giga', + value: '32px', + type: 'dimension', + }, + { + name: '--cui-icon-sizes-tera', + value: '48px', + type: 'dimension', + }, + /* Spacings */ + { + name: '--cui-spacings-bit', + value: '4px', + type: 'dimension', + }, + { + name: '--cui-spacings-byte', + value: '8px', + type: 'dimension', + }, + { + name: '--cui-spacings-kilo', + value: '12px', + type: 'dimension', + }, + { + name: '--cui-spacings-mega', + value: '16px', + type: 'dimension', + }, + { + name: '--cui-spacings-giga', + value: '24px', + type: 'dimension', + }, + { + name: '--cui-spacings-tera', + value: '32px', + type: 'dimension', + }, + { + name: '--cui-spacings-peta', + value: '40px', + type: 'dimension', + }, + { + name: '--cui-spacings-exa', + value: '48px', + type: 'dimension', + }, + { + name: '--cui-spacings-zetta', + value: '56px', + type: 'dimension', + }, + /* Transitions */ + { + name: '--cui-transitions-default', + value: '120ms ease-in-out', + type: 'duration', + }, + { + name: '--cui-transitions-slow', + value: '300ms ease-in-out', + type: 'duration', + }, + /* Typography */ + { + name: '--cui-typography-headline-one-font-size', + value: '2rem', + type: 'dimension', + }, + { + name: '--cui-typography-headline-one-line-height', + value: '2.25rem', + type: 'dimension', + }, + { + name: '--cui-typography-headline-two-font-size', + value: '1.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-headline-two-line-height', + value: '1.75rem', + type: 'dimension', + }, + { + name: '--cui-typography-headline-three-font-size', + value: '1.25rem', + type: 'dimension', + }, + { + name: '--cui-typography-headline-three-line-height', + value: '1.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-headline-four-font-size', + value: '1.125rem', + type: 'dimension', + }, + { + name: '--cui-typography-headline-four-line-height', + value: '1.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-one-font-size', + value: '7.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-one-line-height', + value: '7.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-two-font-size', + value: '6rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-two-line-height', + value: '6rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-three-font-size', + value: '4rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-three-line-height', + value: '4rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-four-font-size', + value: '3.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-title-four-line-height', + value: '3.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-sub-headline-font-size', + value: '0.875rem', + type: 'dimension', + }, + { + name: '--cui-typography-sub-headline-line-height', + value: '1.25rem', + type: 'dimension', + }, + { + name: '--cui-typography-body-one-font-size', + value: '1rem', + type: 'dimension', + }, + { + name: '--cui-typography-body-one-line-height', + value: '1.5rem', + type: 'dimension', + }, + { + name: '--cui-typography-body-two-font-size', + value: '0.875rem', + type: 'dimension', + }, + { + name: '--cui-typography-body-two-line-height', + value: '1.25rem', + type: 'dimension', + }, + { + name: '--cui-typography-body-large-font-size', + value: '1.25rem', + type: 'dimension', + }, + { + name: '--cui-typography-body-large-line-height', + value: '1.75rem', + type: 'dimension', + }, + /* Z-indices */ + { + name: '--cui-z-index-default', + value: 0, + type: 'number', + }, + { + name: '--cui-z-index-absolute', + value: 1, + type: 'number', + }, + { + name: '--cui-z-index-input', + value: 20, + type: 'number', + }, + { + name: '--cui-z-index-popover', + value: 30, + type: 'number', + }, + { + name: '--cui-z-index-tooltip', + value: 40, + type: 'number', + }, + { + name: '--cui-z-index-header', + value: 600, + type: 'number', + }, + { + name: '--cui-z-index-backdrop', + value: 700, + type: 'number', + }, + { + name: '--cui-z-index-navigation', + value: 800, + type: 'number', + }, + { + name: '--cui-z-index-modal', + value: 1000, + type: 'number', + }, + { + name: '--cui-z-index-toast', + value: 1100, + type: 'number', + }, +] satisfies Token[]; diff --git a/packages/design-tokens/types/index.ts b/packages/design-tokens/types/index.ts index 7ac6fa7818..2a94c39d67 100644 --- a/packages/design-tokens/types/index.ts +++ b/packages/design-tokens/types/index.ts @@ -185,8 +185,34 @@ interface BaseToken { value: unknown; } +type ColorUsage = 'fg' | 'bg' | 'border'; +type ColorSentiment = + | 'accent' + | 'promo' + | 'success' + | 'warning' + | 'danger' + | 'on-strong'; +type ColorVariant = + | 'normal' + | 'subtle' + | 'highlight' + | 'strong' + | 'placeholder' + | 'elevated' + | 'overlay' + | 'divider' + | 'focus'; +type ColorInteraction = 'hovered' | 'pressed' | 'disabled'; + interface ColorToken extends BaseToken { type: 'color'; + // usage - sentiment - variant - interaction, with sentiment, variant and interaction being optional + name: + | `--cui-${ColorUsage}-${ColorSentiment | ColorVariant}` + | `--cui-${ColorUsage}-${ColorVariant}-${ColorInteraction}` + | `--cui-${ColorUsage}-${ColorSentiment}-${ColorVariant | ColorInteraction}` + | `--cui-${ColorUsage}-${ColorSentiment}-${ColorVariant}-${ColorInteraction}`; value: Color; } From d16f08c65f839fe78aced2f67d053ed6a8115549 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 29 Feb 2024 21:53:13 +0100 Subject: [PATCH 38/55] Version Packages (#2452) --- .changeset/fuzzy-actors-marry.md | 5 ----- .changeset/lazy-dingos-look.md | 5 ----- .changeset/nasty-owls-collect.md | 5 ----- .changeset/pre.json | 21 --------------------- .changeset/shaggy-points-think.md | 5 ----- .changeset/swift-readers-retire.md | 5 ----- packages/circuit-ui/CHANGELOG.md | 8 ++++++++ packages/circuit-ui/package.json | 2 +- packages/design-tokens/CHANGELOG.md | 12 ++++++++++++ packages/design-tokens/package.json | 2 +- 10 files changed, 22 insertions(+), 48 deletions(-) delete mode 100644 .changeset/fuzzy-actors-marry.md delete mode 100644 .changeset/lazy-dingos-look.md delete mode 100644 .changeset/nasty-owls-collect.md delete mode 100644 .changeset/pre.json delete mode 100644 .changeset/shaggy-points-think.md delete mode 100644 .changeset/swift-readers-retire.md diff --git a/.changeset/fuzzy-actors-marry.md b/.changeset/fuzzy-actors-marry.md deleted file mode 100644 index 0124b822a8..0000000000 --- a/.changeset/fuzzy-actors-marry.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': minor ---- - -Changed the CloseButton to use the _tertiary_ instead of the _secondary_ Button variant. diff --git a/.changeset/lazy-dingos-look.md b/.changeset/lazy-dingos-look.md deleted file mode 100644 index 0be44522e0..0000000000 --- a/.changeset/lazy-dingos-look.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/design-tokens': minor ---- - -Added a dark theme. Import `@sumup/design-tokens/dark.css` for the standalone dark theme. Import `@sumup/design-tokens/dynamic.css` to switch between the light and dark themes automatically based on the system settings or explicitly using the `data-color-scheme` attribute. diff --git a/.changeset/nasty-owls-collect.md b/.changeset/nasty-owls-collect.md deleted file mode 100644 index c238bad218..0000000000 --- a/.changeset/nasty-owls-collect.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/design-tokens': minor ---- - -Added scoped light and dark themes. Import `@sumup/design-tokens/light-scoped.css` or `@sumup/design-tokens/dark-scoped.css` to theme a subset of an application marked up with the `data-color-scheme` attribute. diff --git a/.changeset/pre.json b/.changeset/pre.json deleted file mode 100644 index 50a8e76cf7..0000000000 --- a/.changeset/pre.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "mode": "exit", - "tag": "next", - "initialVersions": { - "@sumup/astro-template-circuit-ui": "2.0.0", - "@sumup/circuit-ui": "8.3.0", - "@sumup/cna-template": "5.1.0", - "@sumup/design-tokens": "7.1.0", - "@sumup/eslint-plugin-circuit-ui": "4.1.0", - "@sumup/icons": "3.4.0", - "@sumup/remix-template-circuit-ui": "3.0.0", - "@sumup/stylelint-plugin-circuit-ui": "1.0.0" - }, - "changesets": [ - "clever-laws-wait", - "fuzzy-actors-marry", - "lazy-dingos-look", - "nasty-owls-collect", - "swift-readers-retire" - ] -} diff --git a/.changeset/shaggy-points-think.md b/.changeset/shaggy-points-think.md deleted file mode 100644 index a7ea370f6d..0000000000 --- a/.changeset/shaggy-points-think.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/design-tokens': patch ---- - -Fixed the `border-focus` color token value. diff --git a/.changeset/swift-readers-retire.md b/.changeset/swift-readers-retire.md deleted file mode 100644 index 2ba4efe6a6..0000000000 --- a/.changeset/swift-readers-retire.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/circuit-ui': minor ---- - -Changed the background color of the active Toggle to green to better distinguish its states. diff --git a/packages/circuit-ui/CHANGELOG.md b/packages/circuit-ui/CHANGELOG.md index c570560c7a..c02a269620 100644 --- a/packages/circuit-ui/CHANGELOG.md +++ b/packages/circuit-ui/CHANGELOG.md @@ -1,5 +1,13 @@ # @sumup/circuit-ui +## 8.5.0 + +### Minor Changes + +- [`779a911`](https://github.com/sumup-oss/circuit-ui/commit/779a911bb080dfc129f471ab08a22cf7675adc33) Thanks [@connor-baer](https://github.com/connor-baer)! - Changed the CloseButton to use the _tertiary_ instead of the _secondary_ Button variant. + +- [`779a911`](https://github.com/sumup-oss/circuit-ui/commit/779a911bb080dfc129f471ab08a22cf7675adc33) Thanks [@connor-baer](https://github.com/connor-baer)! - Changed the background color of the active Toggle to green to better distinguish its states. + ## 8.4.1 ### Patch Changes diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 42a84a7ff4..5d727f994f 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/circuit-ui", - "version": "8.4.1", + "version": "8.5.0", "description": "SumUp's React UI component library", "type": "module", "main": "./dist/index.js", diff --git a/packages/design-tokens/CHANGELOG.md b/packages/design-tokens/CHANGELOG.md index 37c0b479d0..15a9184341 100644 --- a/packages/design-tokens/CHANGELOG.md +++ b/packages/design-tokens/CHANGELOG.md @@ -1,5 +1,17 @@ # @sumup/design-tokens +## 7.2.0 + +### Minor Changes + +- [`779a911`](https://github.com/sumup-oss/circuit-ui/commit/779a911bb080dfc129f471ab08a22cf7675adc33) Thanks [@connor-baer](https://github.com/connor-baer)! - Added a dark theme. Import `@sumup/design-tokens/dark.css` for the standalone dark theme. Import `@sumup/design-tokens/dynamic.css` to switch between the light and dark themes automatically based on the system settings or explicitly using the `data-color-scheme` attribute. + +- [`779a911`](https://github.com/sumup-oss/circuit-ui/commit/779a911bb080dfc129f471ab08a22cf7675adc33) Thanks [@connor-baer](https://github.com/connor-baer)! - Added scoped light and dark themes. Import `@sumup/design-tokens/light-scoped.css` or `@sumup/design-tokens/dark-scoped.css` to theme a subset of an application marked up with the `data-color-scheme` attribute. + +### Patch Changes + +- [`779a911`](https://github.com/sumup-oss/circuit-ui/commit/779a911bb080dfc129f471ab08a22cf7675adc33) Thanks [@connor-baer](https://github.com/connor-baer)! - Fixed the `border-focus` color token value. + ## 7.1.0 ### Minor Changes diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index b05b7755c2..ce15a56184 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/design-tokens", - "version": "7.1.0", + "version": "7.2.0", "description": "Visual primitives such as typography, color, and spacing that are shared across platforms.", "main": "dist/cjs/index.js", "module": "dist/es/index.js", From c78a6c3187a68713e50fe351cf4a735cdb7bfabd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Thu, 29 Feb 2024 22:33:22 +0100 Subject: [PATCH 39/55] Fix slugs on icons page --- .storybook/slugify.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/.storybook/slugify.ts b/.storybook/slugify.ts index 6dddd8df4f..94d07905fe 100644 --- a/.storybook/slugify.ts +++ b/.storybook/slugify.ts @@ -1,7 +1,5 @@ -import GithubSlugger from 'github-slugger'; - -const slugger = new GithubSlugger(); +import { slug } from 'github-slugger'; export function slugify(value: string): string { - return slugger.slug(value); + return slug(value); } From 7c6973fb7962ad0792a9b3461200699379eec160 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 1 Mar 2024 07:04:05 +0000 Subject: [PATCH 40/55] chore(deps): bump browserslist from 4.22.2 to 4.23.0 (#2454) Bumps [browserslist](https://github.com/browserslist/browserslist) from 4.22.2 to 4.23.0. - [Release notes](https://github.com/browserslist/browserslist/releases) - [Changelog](https://github.com/browserslist/browserslist/blob/main/CHANGELOG.md) - [Commits](https://github.com/browserslist/browserslist/compare/4.22.2...4.23.0) --- updated-dependencies: - dependency-name: browserslist dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 52 ++++++++++++++--------------- packages/design-tokens/package.json | 2 +- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index fe4d5fc7eb..897d28c98d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15147,9 +15147,9 @@ } }, "node_modules/browserslist": { - "version": "4.22.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz", - "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", "funding": [ { "type": "opencollective", @@ -15165,8 +15165,8 @@ } ], "dependencies": { - "caniuse-lite": "^1.0.30001565", - "electron-to-chromium": "^1.4.601", + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", "node-releases": "^2.0.14", "update-browserslist-db": "^1.0.13" }, @@ -15462,9 +15462,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001565", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz", - "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==", + "version": "1.0.30001591", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz", + "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==", "funding": [ { "type": "opencollective", @@ -17406,9 +17406,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.616", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz", - "integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==" + "version": "1.4.689", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.689.tgz", + "integrity": "sha512-GatzRKnGPS1go29ep25reM94xxd1Wj8ritU0yRhCJ/tr1Bg8gKnm6R9O/yPOhGQBoLMZ9ezfrpghNaTw97C/PQ==" }, "node_modules/elegant-spinner": { "version": "1.0.1", @@ -37488,7 +37488,7 @@ }, "packages/circuit-ui": { "name": "@sumup/circuit-ui", - "version": "8.4.1", + "version": "8.5.0", "license": "Apache-2.0", "dependencies": { "@floating-ui/react-dom": "^2.0.5", @@ -37603,10 +37603,10 @@ }, "packages/design-tokens": { "name": "@sumup/design-tokens", - "version": "7.1.0", + "version": "7.2.0", "license": "Apache-2.0", "dependencies": { - "browserslist": "^4.22.2", + "browserslist": "^4.23.0", "lightningcss": "^1.22.1", "prop-types": "^15.8.1" }, @@ -45875,7 +45875,7 @@ "requires": { "@types/node": "^18.16.19", "@types/prop-types": "^15.7.11", - "browserslist": "^4.22.2", + "browserslist": "^4.23.0", "lightningcss": "^1.22.1", "prop-types": "^15.8.1", "tsx": "^4.7.0", @@ -49322,12 +49322,12 @@ } }, "browserslist": { - "version": "4.22.2", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.2.tgz", - "integrity": "sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==", + "version": "4.23.0", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz", + "integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==", "requires": { - "caniuse-lite": "^1.0.30001565", - "electron-to-chromium": "^1.4.601", + "caniuse-lite": "^1.0.30001587", + "electron-to-chromium": "^1.4.668", "node-releases": "^2.0.14", "update-browserslist-db": "^1.0.13" } @@ -49539,9 +49539,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001565", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001565.tgz", - "integrity": "sha512-xrE//a3O7TP0vaJ8ikzkD2c2NgcVUvsEe2IvFTntV4Yd1Z9FVzh+gW+enX96L0psrbaFMcVcH2l90xNuGDWc8w==" + "version": "1.0.30001591", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz", + "integrity": "sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==" }, "ccount": { "version": "2.0.1", @@ -51013,9 +51013,9 @@ } }, "electron-to-chromium": { - "version": "1.4.616", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.616.tgz", - "integrity": "sha512-1n7zWYh8eS0L9Uy+GskE0lkBUNK83cXTVJI0pU3mGprFsbfSdAc15VTFbo+A+Bq4pwstmL30AVcEU3Fo463lNg==" + "version": "1.4.689", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.689.tgz", + "integrity": "sha512-GatzRKnGPS1go29ep25reM94xxd1Wj8ritU0yRhCJ/tr1Bg8gKnm6R9O/yPOhGQBoLMZ9ezfrpghNaTw97C/PQ==" }, "elegant-spinner": { "version": "1.0.1", diff --git a/packages/design-tokens/package.json b/packages/design-tokens/package.json index ce15a56184..a882ca01fe 100644 --- a/packages/design-tokens/package.json +++ b/packages/design-tokens/package.json @@ -31,7 +31,7 @@ "test": "vitest" }, "dependencies": { - "browserslist": "^4.22.2", + "browserslist": "^4.23.0", "lightningcss": "^1.22.1", "prop-types": "^15.8.1" }, From 72274dd0894d340867071b60994d1234008ce3e5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 1 Mar 2024 07:05:11 +0000 Subject: [PATCH 41/55] chore(deps-dev): bump @testing-library/react from 14.2.0 to 14.2.1 (#2457) Bumps [@testing-library/react](https://github.com/testing-library/react-testing-library) from 14.2.0 to 14.2.1. - [Release notes](https://github.com/testing-library/react-testing-library/releases) - [Changelog](https://github.com/testing-library/react-testing-library/blob/main/CHANGELOG.md) - [Commits](https://github.com/testing-library/react-testing-library/compare/v14.2.0...v14.2.1) --- updated-dependencies: - dependency-name: "@testing-library/react" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 16 ++++++++-------- packages/circuit-ui/package.json | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 897d28c98d..12428526a1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11188,9 +11188,9 @@ "license": "MIT" }, "node_modules/@testing-library/react": { - "version": "14.2.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.0.tgz", - "integrity": "sha512-7uBnPHyOG6nDGCzv8SLeJbSa33ZoYw7swYpSLIgJvBALdq7l9zPNk33om4USrxy1lKTxXaVfufzLmq83WNfWIw==", + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.1.tgz", + "integrity": "sha512-sGdjws32ai5TLerhvzThYFbpnF9XtL65Cjf+gB0Dhr29BGqK+mAeN7SURSdu+eqgET4ANcWoC7FQpkaiGvBr+A==", "dev": true, "dependencies": { "@babel/runtime": "^7.12.5", @@ -37505,7 +37505,7 @@ "@sumup/intl": "^1.5.0", "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "6.0.0", - "@testing-library/react": "^14.2.0", + "@testing-library/react": "^14.2.1", "@testing-library/user-event": "^14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "^18.16.19", @@ -45817,7 +45817,7 @@ "@sumup/intl": "^1.5.0", "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "6.0.0", - "@testing-library/react": "^14.2.0", + "@testing-library/react": "^14.2.1", "@testing-library/user-event": "^14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "^18.16.19", @@ -46501,9 +46501,9 @@ } }, "@testing-library/react": { - "version": "14.2.0", - "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.0.tgz", - "integrity": "sha512-7uBnPHyOG6nDGCzv8SLeJbSa33ZoYw7swYpSLIgJvBALdq7l9zPNk33om4USrxy1lKTxXaVfufzLmq83WNfWIw==", + "version": "14.2.1", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.1.tgz", + "integrity": "sha512-sGdjws32ai5TLerhvzThYFbpnF9XtL65Cjf+gB0Dhr29BGqK+mAeN7SURSdu+eqgET4ANcWoC7FQpkaiGvBr+A==", "dev": true, "requires": { "@babel/runtime": "^7.12.5", diff --git a/packages/circuit-ui/package.json b/packages/circuit-ui/package.json index 5d727f994f..7137898344 100644 --- a/packages/circuit-ui/package.json +++ b/packages/circuit-ui/package.json @@ -60,7 +60,7 @@ "@sumup/intl": "^1.5.0", "@testing-library/dom": "^9.3.3", "@testing-library/jest-dom": "6.0.0", - "@testing-library/react": "^14.2.0", + "@testing-library/react": "^14.2.1", "@testing-library/user-event": "^14.5.2", "@types/jest-axe": "^3.5.9", "@types/node": "^18.16.19", From b39abff719d8150f29977da13243eaa2be1ccc43 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 1 Mar 2024 07:06:12 +0000 Subject: [PATCH 42/55] chore(deps-dev): bump vitest-github-actions-reporter from 0.10.0 to 0.11.1 (#2456) Bumps [vitest-github-actions-reporter](https://github.com/sapphi-red/vitest-github-actions-reporter) from 0.10.0 to 0.11.1. - [Commits](https://github.com/sapphi-red/vitest-github-actions-reporter/compare/v0.10.0...v0.11.1) --- updated-dependencies: - dependency-name: vitest-github-actions-reporter dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 12428526a1..f7a4e5f795 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,7 @@ "vite": "^4.5.2", "vite-plugin-turbosnap": "^1.0.2", "vitest": "^0.34.6", - "vitest-github-actions-reporter": "^0.10.0" + "vitest-github-actions-reporter": "^0.11.1" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -36769,9 +36769,9 @@ } }, "node_modules/vitest-github-actions-reporter": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/vitest-github-actions-reporter/-/vitest-github-actions-reporter-0.10.0.tgz", - "integrity": "sha512-ctFM1xlOVsXCNp5+LkaBZBhN1Iq5y9vVMZ9+Czls2CimOUKt0lH24MV1S0EzKysNUT7efs2OOSdmc6lgR8hqXg==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/vitest-github-actions-reporter/-/vitest-github-actions-reporter-0.11.1.tgz", + "integrity": "sha512-ZHHB0wBgOPhMYCB17WKVlJZa+5SdudBZFoVoebwfq3ioIUTeLQGYHwh85vpdJAxRghLP8d0qI/6eCTueGyDVXA==", "dev": true, "dependencies": { "@actions/core": "^1.10.0" @@ -65302,9 +65302,9 @@ } }, "vitest-github-actions-reporter": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/vitest-github-actions-reporter/-/vitest-github-actions-reporter-0.10.0.tgz", - "integrity": "sha512-ctFM1xlOVsXCNp5+LkaBZBhN1Iq5y9vVMZ9+Czls2CimOUKt0lH24MV1S0EzKysNUT7efs2OOSdmc6lgR8hqXg==", + "version": "0.11.1", + "resolved": "https://registry.npmjs.org/vitest-github-actions-reporter/-/vitest-github-actions-reporter-0.11.1.tgz", + "integrity": "sha512-ZHHB0wBgOPhMYCB17WKVlJZa+5SdudBZFoVoebwfq3ioIUTeLQGYHwh85vpdJAxRghLP8d0qI/6eCTueGyDVXA==", "dev": true, "requires": { "@actions/core": "^1.10.0" diff --git a/package.json b/package.json index cbfdbae86f..cbc3fc511a 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "vite": "^4.5.2", "vite-plugin-turbosnap": "^1.0.2", "vitest": "^0.34.6", - "vitest-github-actions-reporter": "^0.10.0" + "vitest-github-actions-reporter": "^0.11.1" }, "resolutions": { "prettier": "^2.6.2" From 913d9592a6957a82eacc06ddafc76055e7d002d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Fri, 1 Mar 2024 13:34:15 +0100 Subject: [PATCH 43/55] Fix inconsistent icons and add tests (#2458) --- .changeset/happy-needles-doubt.md | 5 + .changeset/nine-crews-wave.md | 5 + .eslintignore | 3 +- package-lock.json | 45 ++++++++ packages/design-tokens/scripts/build.ts | 5 +- packages/icons/constants.ts | 41 +++++++ packages/icons/manifest.json | 37 +++++-- packages/icons/package.json | 6 +- packages/icons/scripts/{web.ts => build.ts} | 31 +++--- packages/icons/tests/index.spec.ts | 115 ++++++++++++++++++++ packages/icons/tsconfig.json | 2 +- packages/icons/vitest.config.ts | 23 ++++ packages/icons/web/v2/post_finance_24.svg | 2 +- packages/icons/web/v2/sparkles_16.svg | 4 +- packages/icons/web/v2/sum_up_logo_24.svg | 29 ++--- packages/icons/web/v2/vr_32.svg | 2 +- scripts/.eslintrc.js | 18 +-- 17 files changed, 306 insertions(+), 67 deletions(-) create mode 100644 .changeset/happy-needles-doubt.md create mode 100644 .changeset/nine-crews-wave.md create mode 100644 packages/icons/constants.ts rename packages/icons/scripts/{web.ts => build.ts} (90%) create mode 100644 packages/icons/tests/index.spec.ts create mode 100644 packages/icons/vitest.config.ts diff --git a/.changeset/happy-needles-doubt.md b/.changeset/happy-needles-doubt.md new file mode 100644 index 0000000000..5975556484 --- /dev/null +++ b/.changeset/happy-needles-doubt.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': patch +--- + +Added missing exports for the `Manage`, `WhatsApp` and `WireTransfer` icons. diff --git a/.changeset/nine-crews-wave.md b/.changeset/nine-crews-wave.md new file mode 100644 index 0000000000..4c25960216 --- /dev/null +++ b/.changeset/nine-crews-wave.md @@ -0,0 +1,5 @@ +--- +'@sumup/icons': patch +--- + +Added missing `width`, `height`, and `viewBox` attributes to the `PostFinance` `Sparkles`, `SumUpLogo`, and `Vr` icons. diff --git a/.eslintignore b/.eslintignore index 6838cc0f29..b0a1dc85a6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -2,14 +2,13 @@ node_modules/ build/ dist/ public/ -scripts/ .next/ .out/ __coverage__/ __reports__/ *.config.* *rc.* -scripts/ +/scripts/ # disable linting for templates because it will have its own rules when used in a new app packages/cna-template/template packages/astro-template/src/env.d.ts diff --git a/package-lock.json b/package-lock.json index f7a4e5f795..59568b8c89 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19367,6 +19367,28 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==" }, + "node_modules/fast-xml-parser": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.5.tgz", + "integrity": "sha512-sWvP1Pl8H03B8oFJpFR3HE31HUfwtX7Rlf9BNsvdpujD4n7WMhfmu8h9wOV2u+c1k0ZilTADhPqypzx2J690ZQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/NaturalIntelligence" + }, + { + "type": "paypal", + "url": "https://paypal.me/naturalintelligence" + } + ], + "dependencies": { + "strnum": "^1.0.5" + }, + "bin": { + "fxparser": "src/cli/cli.js" + } + }, "node_modules/fastest-levenshtein": { "version": "1.0.16", "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", @@ -34029,6 +34051,12 @@ "url": "https://github.com/sponsors/antfu" } }, + "node_modules/strnum": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz", + "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==", + "dev": true + }, "node_modules/strong-log-transformer": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz", @@ -37646,6 +37674,7 @@ "@types/babel__core": "^7.20.5", "@types/prettier": "^2.7.3", "babel-plugin-inline-react-svg": "^2.0.2", + "fast-xml-parser": "^4.3.5", "prettier": "^2.8.8", "tsx": "^4.7.0", "typescript": "^5.3.3" @@ -45983,6 +46012,7 @@ "@types/babel__core": "^7.20.5", "@types/prettier": "^2.7.3", "babel-plugin-inline-react-svg": "^2.0.2", + "fast-xml-parser": "^4.3.5", "prettier": "^2.8.8", "tsx": "^4.7.0", "typescript": "^5.3.3" @@ -52512,6 +52542,15 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==" }, + "fast-xml-parser": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.5.tgz", + "integrity": "sha512-sWvP1Pl8H03B8oFJpFR3HE31HUfwtX7Rlf9BNsvdpujD4n7WMhfmu8h9wOV2u+c1k0ZilTADhPqypzx2J690ZQ==", + "dev": true, + "requires": { + "strnum": "^1.0.5" + } + }, "fastest-levenshtein": { "version": "1.0.16", "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz", @@ -63452,6 +63491,12 @@ "acorn": "^8.8.2" } }, + "strnum": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz", + "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==", + "dev": true + }, "strong-log-transformer": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/strong-log-transformer/-/strong-log-transformer-2.1.0.tgz", diff --git a/packages/design-tokens/scripts/build.ts b/packages/design-tokens/scripts/build.ts index 010ac2f87e..e8ffef4e2f 100755 --- a/packages/design-tokens/scripts/build.ts +++ b/packages/design-tokens/scripts/build.ts @@ -25,7 +25,6 @@ import { schema } from '../themes/schema.js'; import { shared } from '../themes/shared.js'; import { light } from '../themes/light.js'; import { dark } from '../themes/dark.js'; - import type { ColorScheme, Token } from '../types/index.js'; type StyleGroup = { @@ -178,7 +177,7 @@ export function createStyles(group: StyleGroup) { const selectorStart = group.selectors .map((selector) => `${selector} {`) .join(''); - const selectorEnd = group.selectors.map(() => `}`).join(''); + const selectorEnd = group.selectors.map(() => '}').join(''); const customProperties = createCSSCustomProperties(group.tokens); return `${selectorStart} color-scheme: ${group.colorScheme}; @@ -199,7 +198,7 @@ export function createCSSCustomProperties(tokens: Token[]): string { lines.push(`/* ${description} */`); } - lines.push(`${name}: ${value};`); + lines.push(`${name}: ${value.toString()};`); return lines; }) diff --git a/packages/icons/constants.ts b/packages/icons/constants.ts new file mode 100644 index 0000000000..42273c5f54 --- /dev/null +++ b/packages/icons/constants.ts @@ -0,0 +1,41 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore `import.meta` is fine +export const BASE_DIR = path.dirname(fileURLToPath(import.meta.url)); +export const ICON_DIR = path.join(BASE_DIR, './web/v2'); +export const DIST_DIR = path.join(BASE_DIR, 'dist'); + +export const SIZES = ['16', '24', '32'] as const; +export const CATEGORIES = [ + 'Action', + 'Communication', + 'Payment method', + 'Card scheme', + 'Country flag', + 'Device', + 'File', + 'Finance', + 'Miscellaneous', + 'Navigation', + 'Notification', + 'Product and feature', + 'Social media', + 'Brand', +] as const; diff --git a/packages/icons/manifest.json b/packages/icons/manifest.json index f54a56f0d4..e6a1036f2d 100644 --- a/packages/icons/manifest.json +++ b/packages/icons/manifest.json @@ -186,6 +186,11 @@ "category": "Action", "size": "24" }, + { + "name": "manage", + "category": "Action", + "size": "24" + }, { "name": "minus", "category": "Action", @@ -608,6 +613,12 @@ "category": "Card scheme", "size": "32" }, + { + "name": "apm", + "category": "Card scheme", + "size": "32", + "deprecation": "Use the `AlternativePaymentMethod` icon instead." + }, { "name": "alternative_payment_method", "category": "Card scheme", @@ -633,6 +644,11 @@ "category": "Card scheme", "size": "32" }, + { + "name": "card_unknown", + "category": "Card scheme", + "size": "32" + }, { "name": "conecs", "category": "Card scheme", @@ -1153,12 +1169,6 @@ "category": "Finance", "size": "24" }, - { - "name": "apm", - "category": "Finance", - "size": "32", - "deprecation": "Use the `AlternativePaymentMethod` icon instead." - }, { "name": "atm", "category": "Finance", @@ -1169,11 +1179,6 @@ "category": "Finance", "size": "24" }, - { - "name": "card_unknown", - "category": "Finance", - "size": "32" - }, { "name": "card_unknown", "category": "Finance", @@ -1234,6 +1239,11 @@ "category": "Finance", "size": "24" }, + { + "name": "wire_transfer", + "category": "Finance", + "size": "24" + }, { "name": "alarm", "category": "Miscellaneous", @@ -1939,6 +1949,11 @@ "category": "Social media", "size": "24" }, + { + "name": "whats_app", + "category": "Social media", + "size": "24" + }, { "name": "youtube", "category": "Social media", diff --git a/packages/icons/package.json b/packages/icons/package.json index 1b39b0567d..5c67e6cc1a 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -27,8 +27,9 @@ }, "homepage": "https://github.com/sumup-oss/circuit-ui/tree/main/packages/icons/README.md", "scripts": { - "start": "tsx watch ./scripts/web.ts", - "build": "tsx ./scripts/web.ts", + "start": "tsx watch ./scripts/build.ts", + "build": "tsx ./scripts/build.ts", + "test": "vitest", "lint": "foundry run eslint . --ext .ts,.tsx,.js,.jsx", "lint:fix": "npm run lint -- --fix", "prepublish": "npm run build" @@ -40,6 +41,7 @@ "@types/babel__core": "^7.20.5", "@types/prettier": "^2.7.3", "babel-plugin-inline-react-svg": "^2.0.2", + "fast-xml-parser": "^4.3.5", "prettier": "^2.8.8", "tsx": "^4.7.0", "typescript": "^5.3.3" diff --git a/packages/icons/scripts/web.ts b/packages/icons/scripts/build.ts similarity index 90% rename from packages/icons/scripts/web.ts rename to packages/icons/scripts/build.ts index 5ec9c06d97..90ec80f2be 100644 --- a/packages/icons/scripts/web.ts +++ b/packages/icons/scripts/build.ts @@ -15,26 +15,26 @@ import fs from 'node:fs'; import path from 'node:path'; -import { fileURLToPath } from 'node:url'; import prettier from 'prettier'; import { transformSync } from '@babel/core'; +import { + BASE_DIR, + DIST_DIR, + ICON_DIR, + CATEGORIES, + SIZES, +} from '../constants.js'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore Import assertions are fine import manifest from '../manifest.json' assert { type: 'json' }; -// @ts-ignore `import` is fine -const __dirname = path.dirname(fileURLToPath(import.meta.url)); - -const BASE_DIR = path.join(__dirname, '..'); -const ICON_DIR = path.join(BASE_DIR, './web/v2'); -const DIST_DIR = path.join(BASE_DIR, 'dist'); - type Icon = { name: string; - category: string; + category: (typeof CATEGORIES)[number]; keywords?: string[]; - size: '16' | '24' | '32'; + size: (typeof SIZES)[number]; deprecation?: string; }; @@ -79,7 +79,7 @@ function buildComponentFile(component: Component): string { (icon) => `import { ReactComponent as ${icon.name} } from '${icon.filePath}';`, ); - const sizes = icons.map((icon) => parseInt(icon.size)).sort(); + const sizes = icons.map((icon) => parseInt(icon.size, 10)).sort(); const defaultSize = sizes.includes(24) ? '24' : Math.min(...sizes).toString(); const sizeMap = icons.map((icon) => `'${icon.size}': ${icon.name},`); const invalidSizeWarning = `The '\${size}' size is not supported by the '${ @@ -175,16 +175,11 @@ function writeFile(dir: string, fileName: string, fileContent: string): void { if (directory && directory !== '.') { fs.mkdirSync(directory, { recursive: true }); } - return fs.writeFile(filePath, formattedContent, { flag: 'w' }, (err) => { - if (err) { - throw err; - } - }); + return fs.writeFileSync(filePath, formattedContent, { flag: 'w' }); } function main(): void { - const icons = manifest.icons as Icon[]; - const iconsByName = icons.reduce((acc, icon) => { + const iconsByName = (manifest.icons as Icon[]).reduce((acc, icon) => { acc[icon.name] = acc[icon.name] || []; acc[icon.name].push(icon); return acc; diff --git a/packages/icons/tests/index.spec.ts b/packages/icons/tests/index.spec.ts new file mode 100644 index 0000000000..34d6e4be7b --- /dev/null +++ b/packages/icons/tests/index.spec.ts @@ -0,0 +1,115 @@ +/** + * Copyright 2024, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import fs from 'node:fs'; +import path from 'node:path'; + +import { describe, expect, it } from 'vitest'; +import { XMLParser, XMLValidator } from 'fast-xml-parser'; + +import { CATEGORIES, ICON_DIR, SIZES } from '../constants.js'; +import { icons } from '../manifest.json' assert { type: 'json' }; + +describe('Icons', () => { + const files = fs + .readdirSync(ICON_DIR) + .filter((fileName) => fileName.endsWith('.svg')) + .map((fileName) => { + const { name, size } = parseFileName(fileName); + const file = fs.readFileSync(path.join(ICON_DIR, fileName)).toString(); + return { name, size, file } as { + name?: string; + size?: string; + file: string; + }; + }); + + describe.each(files)('$name ($size)', ({ name, size, file }) => { + it('should be valid XML', () => { + const isValidXML = XMLValidator.validate(file); + + expect(isValidXML).toBeTruthy(); + }); + + it('should have a valid manifest', () => { + const manifest = getIconManifest(name, size); + + expect(manifest.name).toBeTypeOf('string'); + expect(SIZES).toContain(manifest.size); + expect(CATEGORIES).toContain(manifest.category); + }); + + it('should match the size in the file name', () => { + const manifest = getIconManifest(name, size); + + expect(manifest.size).toBe(size); + + const attributes = parseSVGAttributes(file); + + if (manifest.category === 'Card scheme') { + expect(attributes.width).toBe(size); + } else { + expect(attributes.height).toBe(size); + } + }); + + it("should have valid 'width', 'height' and 'viewBox' attributes", () => { + const attributes = parseSVGAttributes(file); + + expect(attributes.width).toMatch(/^\d+$/); + expect(attributes.height).toMatch(/^\d+$/); + expect(attributes.viewBox).toBe( + `0 0 ${attributes.width} ${attributes.height}`, + ); + }); + }); +}); + +function parseFileName(fileName: string) { + try { + const [, name, size] = fileName.match(/(.+)_(\d+)\.svg$/); + return { name, size }; + } catch (error) { + throw new Error(`Failed to parse the '${fileName}' file name.`); + } +} + +const parser = new XMLParser({ + ignoreAttributes: false, + attributeNamePrefix: '', + attributesGroupName: 'attributes', +}); + +function parseSVGAttributes(file: string) { + const ast = parser.parse(file) as { + svg: { + attributes: { + width: string; + height: string; + viewBox: `${number} ${number} ${number} ${number}`; + }; + }; + }; + + return ast.svg.attributes; +} + +function getIconManifest(name?: string, size?: string) { + if (!name || !size) { + return null; + } + + return icons.find((icon) => icon.name === name && icon.size === size); +} diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json index ca834a944c..af4b5130aa 100644 --- a/packages/icons/tsconfig.json +++ b/packages/icons/tsconfig.json @@ -5,5 +5,5 @@ "module": "NodeNext", "moduleResolution": "NodeNext" }, - "include": ["scripts/*"] + "include": ["scripts/*", "tests/*", "constants.ts"] } diff --git a/packages/icons/vitest.config.ts b/packages/icons/vitest.config.ts new file mode 100644 index 0000000000..910d768cd8 --- /dev/null +++ b/packages/icons/vitest.config.ts @@ -0,0 +1,23 @@ +/** + * Copyright 2023, SumUp Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + test: { + globals: false, + environment: 'node', + }, +}); diff --git a/packages/icons/web/v2/post_finance_24.svg b/packages/icons/web/v2/post_finance_24.svg index 0bc19486a1..f4ca3c2f56 100644 --- a/packages/icons/web/v2/post_finance_24.svg +++ b/packages/icons/web/v2/post_finance_24.svg @@ -1,4 +1,4 @@ - + diff --git a/packages/icons/web/v2/sparkles_16.svg b/packages/icons/web/v2/sparkles_16.svg index dbc47824e4..a83531a696 100644 --- a/packages/icons/web/v2/sparkles_16.svg +++ b/packages/icons/web/v2/sparkles_16.svg @@ -1,3 +1,3 @@ - + - \ No newline at end of file + diff --git a/packages/icons/web/v2/sum_up_logo_24.svg b/packages/icons/web/v2/sum_up_logo_24.svg index d965dc827c..80593fbb50 100644 --- a/packages/icons/web/v2/sum_up_logo_24.svg +++ b/packages/icons/web/v2/sum_up_logo_24.svg @@ -1,14 +1,17 @@ - - - - - - - - - - - - - + + + + + + + + + diff --git a/packages/icons/web/v2/vr_32.svg b/packages/icons/web/v2/vr_32.svg index 8e80f120c7..751d1c68fa 100644 --- a/packages/icons/web/v2/vr_32.svg +++ b/packages/icons/web/v2/vr_32.svg @@ -1,4 +1,4 @@ - + diff --git a/scripts/.eslintrc.js b/scripts/.eslintrc.js index 8a80abfa2c..3c5e6a703a 100644 --- a/scripts/.eslintrc.js +++ b/scripts/.eslintrc.js @@ -14,17 +14,9 @@ */ // eslint-disable-next-line import/no-extraneous-dependencies -module.exports = require('@sumup/foundry/eslint')( - { - language: 'JavaScript', - environments: ['Node'], - frameworks: ['React', 'Emotion', 'Jest'], - openSource: true, +module.exports = require('@sumup/foundry/eslint')({ + rules: { + 'arrow-parens': 'off', + 'no-console': 'off', }, - { - rules: { - 'arrow-parens': 'off', - 'no-console': 'off', - }, - }, -); +}); From 4d99508ea99c80a92d53151822367307d0f6e342 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Fri, 1 Mar 2024 13:46:28 +0100 Subject: [PATCH 44/55] Version Packages (#2459) Co-authored-by: github-actions[bot] --- .changeset/happy-needles-doubt.md | 5 ----- .changeset/nine-crews-wave.md | 5 ----- packages/icons/CHANGELOG.md | 8 ++++++++ packages/icons/package.json | 2 +- 4 files changed, 9 insertions(+), 11 deletions(-) delete mode 100644 .changeset/happy-needles-doubt.md delete mode 100644 .changeset/nine-crews-wave.md diff --git a/.changeset/happy-needles-doubt.md b/.changeset/happy-needles-doubt.md deleted file mode 100644 index 5975556484..0000000000 --- a/.changeset/happy-needles-doubt.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': patch ---- - -Added missing exports for the `Manage`, `WhatsApp` and `WireTransfer` icons. diff --git a/.changeset/nine-crews-wave.md b/.changeset/nine-crews-wave.md deleted file mode 100644 index 4c25960216..0000000000 --- a/.changeset/nine-crews-wave.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -'@sumup/icons': patch ---- - -Added missing `width`, `height`, and `viewBox` attributes to the `PostFinance` `Sparkles`, `SumUpLogo`, and `Vr` icons. diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 1988123ee6..ac44bd08e6 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -1,5 +1,13 @@ # @sumup/icons +## 3.6.1 + +### Patch Changes + +- [#2458](https://github.com/sumup-oss/circuit-ui/pull/2458) [`913d959`](https://github.com/sumup-oss/circuit-ui/commit/913d9592a6957a82eacc06ddafc76055e7d002d7) Thanks [@connor-baer](https://github.com/connor-baer)! - Added missing exports for the `Manage`, `WhatsApp` and `WireTransfer` icons. + +- [#2458](https://github.com/sumup-oss/circuit-ui/pull/2458) [`913d959`](https://github.com/sumup-oss/circuit-ui/commit/913d9592a6957a82eacc06ddafc76055e7d002d7) Thanks [@connor-baer](https://github.com/connor-baer)! - Added missing `width`, `height`, and `viewBox` attributes to the `PostFinance` `Sparkles`, `SumUpLogo`, and `Vr` icons. + ## 3.6.0 ### Minor Changes diff --git a/packages/icons/package.json b/packages/icons/package.json index 5c67e6cc1a..27678ece3d 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@sumup/icons", - "version": "3.6.0", + "version": "3.6.1", "description": "A collection of icons by SumUp", "type": "module", "main": "./dist/index.js", From 455e5edf1ae951bbac04c2e523720a6544deb95e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Mon, 4 Mar 2024 22:22:38 +0100 Subject: [PATCH 45/55] Upgrade to Foundry v7 (#2406) --- .changeset/empty-camels-explode.md | 5 + .eslintignore | 2 + .eslintrc.js | 14 + package-lock.json | 3081 +++++---- package.json | 19 +- packages/astro-template/package.json | 4 +- .../components/Avatar/Avatar.spec.tsx | 8 +- .../components/Button/IconButton.spec.tsx | 1 + .../components/Button/IconButton.stories.tsx | 20 +- .../Card/components/Header/Header.spec.tsx | 10 +- .../components/Carousel/Carousel.spec.tsx | 6 +- .../components/Status/Status.spec.tsx | 6 +- .../components/Link/Link.spec.tsx | 6 +- .../CurrencyInput/CurrencyInput.spec.tsx | 30 +- .../components/Hamburger/Hamburger.spec.tsx | 4 +- .../components/ImageInput/ImageInput.spec.tsx | 72 +- .../components/Input/Input.spec.tsx | 32 +- .../components/ListItem/ListItem.spec.tsx | 4 +- .../ModalContext/ModalContext.spec.tsx | 29 +- .../NotificationBanner.module.css | 2 +- .../NotificationBanner.spec.tsx | 14 +- .../NotificationFullscreen.spec.tsx | 12 +- .../NotificationInline.module.css | 2 +- .../NotificationInline.spec.tsx | 32 +- .../NotificationModal.module.css | 2 +- .../NotificationModal.spec.tsx | 12 +- .../NotificationToast.spec.tsx | 37 +- .../PercentageInput/PercentageInput.spec.tsx | 40 +- .../components/Popover/Popover.spec.tsx | 9 +- .../components/Portal/Portal.spec.tsx | 10 +- .../RadioButtonGroup.spec.tsx | 18 +- .../SearchInput/SearchInput.spec.tsx | 6 +- .../SideNavigation/SideNavigation.spec.tsx | 17 +- .../DesktopNavigation.spec.tsx | 10 +- .../MobileNavigation.spec.tsx | 22 +- .../PrimaryLink/PrimaryLink.spec.tsx | 19 +- .../SecondaryLinks/SecondaryLinks.spec.tsx | 7 +- .../components/SidePanel/SidePanel.spec.tsx | 75 +- .../SidePanel/SidePanelContext.spec.tsx | 114 +- .../DesktopSidePanel.spec.tsx | 10 +- .../components/Header/Header.spec.tsx | 18 +- .../MobileSidePanel/MobileSidePanel.spec.tsx | 10 +- .../components/Table/Table.spec.tsx | 36 +- .../components/SortArrow/SortArrow.spec.tsx | 8 +- .../components/TableBody/TableBody.spec.tsx | 18 +- .../components/TableHead/TableHead.spec.tsx | 38 +- .../circuit-ui/components/Tabs/Tabs.spec.tsx | 31 +- .../ToastContext/ToastContext.spec.tsx | 21 +- .../ProfileMenu/ProfileMenu.spec.tsx | 4 +- .../UtilityLinks/UtilityLinks.spec.tsx | 6 +- .../CalendarWrapper/CalendarWrapper.spec.tsx | 6 +- .../CalendarWrapper/CalendarWrapper.tsx | 3 +- .../useClickOutside/useClickOutside.spec.tsx | 14 +- .../hooks/useFocusList/useFocusList.spec.tsx | 18 +- .../circuit-ui/styles/style-mixins.spec.tsx | 6 +- packages/circuit-ui/styles/style-mixins.ts | 6 +- .../cna-template/template/package-lock.json | 5924 +++++++++++------ packages/cna-template/template/package.json | 2 +- .../eslint-plugin-circuit-ui/package.json | 4 +- packages/icons/package.json | 4 +- packages/icons/scripts/build.ts | 49 +- packages/remix-template/package.json | 3 +- packages/stylelint-plugin-circuit-ui/index.ts | 2 +- .../index.spec.ts | 2 +- .../stylelint-plugin-circuit-ui/package.json | 9 +- 65 files changed, 6204 insertions(+), 3861 deletions(-) create mode 100644 .changeset/empty-camels-explode.md diff --git a/.changeset/empty-camels-explode.md b/.changeset/empty-camels-explode.md new file mode 100644 index 0000000000..791dcbf038 --- /dev/null +++ b/.changeset/empty-camels-explode.md @@ -0,0 +1,5 @@ +--- +'@sumup/stylelint-plugin-circuit-ui': major +--- + +Upgraded to [Stylelint 16](https://stylelint.io/migration-guide/to-16/#removed-support-for-nodejs-less-than-18120) and migrated to ECMAScript modules (ESM). The minimum required Node.js version is 18.12.0. diff --git a/.eslintignore b/.eslintignore index b0a1dc85a6..a9d4b7c2e4 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,6 +7,8 @@ public/ __coverage__/ __reports__/ *.config.* +package.json +package-lock.json *rc.* /scripts/ # disable linting for templates because it will have its own rules when used in a new app diff --git a/.eslintrc.js b/.eslintrc.js index 854f095f77..52822d071a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -25,6 +25,20 @@ module.exports = require('@sumup/foundry/eslint')({ tsconfigRootDir: __dirname, }, overrides: [ + { + files: [ + '**/*.spec.*', + '**/jest*', + '**/setupTests.*', + '**/test-utils.*', + '**/*Fixtures.*', + '**/__fixtures__/**/*', + '**/__mocks__/**/*', + ], + rules: { + 'testing-library/no-container': 'warn', + }, + }, { files: ['**/*.stories.*'], rules: { diff --git a/package-lock.json b/package-lock.json index 59568b8c89..ff77e072ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "devDependencies": { "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.1", + "@emotion/eslint-plugin": "^11.11.0", "@storybook/addon-a11y": "^7.6.7", "@storybook/addon-actions": "^7.6.7", "@storybook/addon-controls": "^7.6.7", @@ -28,7 +29,7 @@ "@storybook/testing-library": "^0.2.2", "@storybook/theming": "^7.6.7", "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/foundry": "^6.2.0", + "@sumup/foundry": "^7.0.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", "@types/node": "^18.16.19", "@vitest/coverage-c8": "^0.33.0", @@ -36,22 +37,23 @@ "audit-ci": "^6.6.1", "chromatic": "^10.3.1", "eslint-import-resolver-typescript": "^3.6.1", - "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react-server-components": "^1.1.2", "eslint-plugin-storybook": "^0.6.15", + "eslint-plugin-testing-library": "^6.2.0", "github-slugger": "^2.0.0", "jsdom": "^23.2.0", "lerna": "^8.0.2", "license-checker": "^25.0.1", - "prettier-plugin-astro": "0.10.0", + "prettier-plugin-astro": "^0.13.0", "react": "^18.2.0", "react-dom": "^18.2.0", "remark-gfm": "^3.0.1", "storybook": "^7.6.7", - "stylelint": "^15.10.2", - "stylelint-config-recess-order": "^4.4.0", - "stylelint-config-standard": "^34.0.0", - "stylelint-no-unsupported-browser-features": "^7.0.0", + "stylelint": "^16.0.0", + "stylelint-config-recess-order": "^5.0.0", + "stylelint-config-standard": "^36.0.0", + "stylelint-no-unsupported-browser-features": "^8.0.0", "svgo": "^3.2.0", "typescript": "^5.3.3", "vite": "^4.5.2", @@ -1273,20 +1275,20 @@ } }, "node_modules/@babel/core": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz", - "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz", + "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==", "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.9", - "@babel/parser": "^7.23.9", - "@babel/template": "^7.23.9", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/helpers": "^7.24.0", + "@babel/parser": "^7.24.0", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -1315,9 +1317,9 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.23.3.tgz", - "integrity": "sha512-9bTuNlyx7oSstodm1cR1bECj4fkiknsDa1YniISkJemMY3DGhJNYBECbe6QD/q54mp2J8VO66jW3/7uP//iFCw==", + "version": "7.23.10", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.23.10.tgz", + "integrity": "sha512-3wSYDPZVnhseRnxRJH6ZVTNknBz76AEnyC+AYYhasjP3Yy23qz0ERR7Fcd2SHmYuSFJ2kY9gaaDd3vyqU09eSw==", "dev": true, "dependencies": { "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1", @@ -1698,13 +1700,13 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz", - "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz", + "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==", "dependencies": { - "@babel/template": "^7.23.9", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9" + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0" }, "engines": { "node": ">=6.9.0" @@ -1780,9 +1782,9 @@ } }, "node_modules/@babel/parser": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz", - "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", + "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==", "bin": { "parser": "bin/babel-parser.js" }, @@ -3355,22 +3357,22 @@ } }, "node_modules/@babel/template": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz", - "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", + "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", "dependencies": { "@babel/code-frame": "^7.23.5", - "@babel/parser": "^7.23.9", - "@babel/types": "^7.23.9" + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz", - "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz", + "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==", "dependencies": { "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", @@ -3378,8 +3380,8 @@ "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0", "debug": "^4.3.1", "globals": "^11.1.0" }, @@ -3388,9 +3390,9 @@ } }, "node_modules/@babel/types": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz", - "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", + "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", "dependencies": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -3457,6 +3459,21 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/@changesets/apply-release-plan/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@changesets/apply-release-plan/node_modules/universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -4190,6 +4207,21 @@ "graceful-fs": "^4.1.6" } }, + "node_modules/@changesets/write/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@changesets/write/node_modules/universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -4210,9 +4242,9 @@ } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz", - "integrity": "sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.0.tgz", + "integrity": "sha512-YfEHq0eRH98ffb5/EsrrDspVWAuph6gDggAE74ZtjecsmyyWpW768hOyiONa8zwWGbIWYfa2Xp4tRTrpQQ00CQ==", "funding": [ { "type": "github", @@ -4227,13 +4259,13 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^2.2.1" + "@csstools/css-tokenizer": "^2.2.3" } }, "node_modules/@csstools/css-tokenizer": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz", - "integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz", + "integrity": "sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==", "funding": [ { "type": "github", @@ -4249,9 +4281,9 @@ } }, "node_modules/@csstools/media-query-list-parser": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz", - "integrity": "sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==", + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.8.tgz", + "integrity": "sha512-DiD3vG5ciNzeuTEoh74S+JMjQDs50R3zlxHnBnfd04YYfA/kh2KiBCGhzqLxlJcNq+7yNQ3stuZZYLX6wK/U2g==", "funding": [ { "type": "github", @@ -4266,14 +4298,14 @@ "node": "^14 || ^16 || >=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^2.3.2", - "@csstools/css-tokenizer": "^2.2.1" + "@csstools/css-parser-algorithms": "^2.6.0", + "@csstools/css-tokenizer": "^2.2.3" } }, "node_modules/@csstools/selector-specificity": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", - "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz", + "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==", "funding": [ { "type": "github", @@ -6675,35 +6707,6 @@ "tar-fs": "^2.1.1" } }, - "node_modules/@next/eslint-plugin-next": { - "version": "13.5.6", - "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz", - "integrity": "sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==", - "dev": true, - "dependencies": { - "glob": "7.1.7" - } - }, - "node_modules/@next/eslint-plugin-next/node_modules/glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", - "dev": true, - "dependencies": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - }, - "engines": { - "node": "*" - }, - "funding": { - "url": "https://github.com/sponsors/isaacs" - } - }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -7556,6 +7559,18 @@ "node": ">=14" } }, + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/@radix-ui/number": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", @@ -8314,6 +8329,22 @@ } } }, + "node_modules/@remix-run/eslint-config/node_modules/eslint-plugin-testing-library": { + "version": "5.11.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz", + "integrity": "sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==", + "dev": true, + "dependencies": { + "@typescript-eslint/utils": "^5.58.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0", + "npm": ">=6" + }, + "peerDependencies": { + "eslint": "^7.5.0 || ^8.0.0" + } + }, "node_modules/@remix-run/express": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/@remix-run/express/-/express-2.4.1.tgz", @@ -9879,6 +9910,21 @@ "node": ">= 6" } }, + "node_modules/@storybook/cli/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@storybook/client-logger": { "version": "7.6.7", "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.6.7.tgz", @@ -9918,6 +9964,21 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/codemod/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@storybook/components": { "version": "7.6.7", "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.6.7.tgz", @@ -10921,6 +10982,21 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/@storybook/source-loader/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "node_modules/@storybook/telemetry": { "version": "7.6.7", "resolved": "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-7.6.7.tgz", @@ -11009,57 +11085,218 @@ "link": true }, "node_modules/@sumup/foundry": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/@sumup/foundry/-/foundry-6.2.0.tgz", - "integrity": "sha512-sKZsAJQwtuY1gN/ZaY1KpdrhVV6k8ltiswKbB6kEl4I4cPGbWfccdlpnZ/D1P7OTvjmSvHQw2P/X3btq4ipxnw==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@sumup/foundry/-/foundry-7.0.0.tgz", + "integrity": "sha512-fVT2vPn5BI0qWYbyvQFbdaO9aljWUs+37C/6Er/sqKOviCq2lULRrR3lfHEXPNwq6RBpPSCadabtPJb/KwXcwQ==", "dev": true, "dependencies": { - "@babel/core": "^7.23.0", - "@babel/eslint-parser": "^7.22.15", - "@emotion/eslint-plugin": "^11.11.0", - "@typescript-eslint/eslint-plugin": "^5.58.0", - "@typescript-eslint/parser": "^5.62.0", - "chalk": "^4.0.0", + "@babel/core": "^7.24.0", + "@babel/eslint-parser": "^7.23.10", + "@typescript-eslint/eslint-plugin": "^6.19.1", + "@typescript-eslint/parser": "^6.19.1", + "chalk": "^4.1.2", "cross-spawn": "^7.0.3", "dedent": "^0.7.0", - "eslint": "^8.44.0", + "eslint": "^8.56.0", "eslint-config-airbnb-base": "^15.0.0", - "eslint-config-airbnb-typescript": "^17.0.0", - "eslint-config-next": "^13.4.12", - "eslint-config-prettier": "^8.9.0", + "eslint-config-airbnb-typescript": "^17.1.0", + "eslint-config-prettier": "^9.1.0", "eslint-plugin-compat": "^4.2.0", - "eslint-plugin-cypress": "^2.15.1", - "eslint-plugin-import": "^2.28.0", - "eslint-plugin-jest": "^27.6.0", + "eslint-plugin-import": "^2.29.1", "eslint-plugin-json": "^3.1.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-node": "^11.1.0", "eslint-plugin-notice": "^0.9.10", - "eslint-plugin-playwright": "^0.12.0", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-testing-library": "^5.11.0", - "husky": "^4.0.0", - "inquirer": "^8.2.4", + "eslint-plugin-security": "^1.7.1", + "husky": "^4.3.8", + "inquirer": "^8.2.6", "is-ci": "^3.0.1", - "lint-staged": "13.1.2", + "lint-staged": "15.2.0", "listr": "^0.14.3", "listr-inquirer": "^0.1.0", "lodash": "^4.17.21", - "prettier": "^2.8.7", + "prettier": "^3.2.4", "read-pkg-up": "^7.0.1", - "stylelint": "^15.11.0", - "stylelint-config-recess-order": "^4.4.0", - "stylelint-config-standard": "^34.0.0", - "stylelint-no-unsupported-browser-features": "^7.0.0", + "semver": "^7.5.4", + "stylelint": "^16.2.0", + "stylelint-config-recess-order": "^5.0.0", + "stylelint-config-standard": "^36.0.0", + "stylelint-no-unsupported-browser-features": "^8.0.0", "yargs": "^17.7.2" }, "bin": { "foundry": "dist/cli/index.js" }, "engines": { - "node": "^14.17 || >=16" + "node": "^18.12 || >=20" + } + }, + "node_modules/@sumup/foundry/node_modules/@typescript-eslint/eslint-plugin": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz", + "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==", + "dev": true, + "dependencies": { + "@eslint-community/regexpp": "^4.5.1", + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/type-utils": "6.21.0", + "@typescript-eslint/utils": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4", + "graphemer": "^1.4.0", + "ignore": "^5.2.4", + "natural-compare": "^1.4.0", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "@typescript-eslint/parser": "^6.0.0 || ^6.0.0-alpha", + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@sumup/foundry/node_modules/@typescript-eslint/parser": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz", + "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@sumup/foundry/node_modules/@typescript-eslint/scope-manager": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz", + "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@sumup/foundry/node_modules/@typescript-eslint/type-utils": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz", + "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==", + "dev": true, + "dependencies": { + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/utils": "6.21.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependencies": { + "eslint": "^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@sumup/foundry/node_modules/@typescript-eslint/types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==", + "dev": true, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + } + }, + "node_modules/@sumup/foundry/node_modules/@typescript-eslint/typescript-estree": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "minimatch": "9.0.3", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@sumup/foundry/node_modules/@typescript-eslint/visitor-keys": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", + "dev": true, + "dependencies": { + "@typescript-eslint/types": "6.21.0", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^16.0.0 || >=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/typescript-eslint" } }, "node_modules/@sumup/foundry/node_modules/cliui": { @@ -11076,6 +11313,21 @@ "node": ">=12" } }, + "node_modules/@sumup/foundry/node_modules/minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "dependencies": { + "brace-expansion": "^2.0.1" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/@sumup/foundry/node_modules/yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", @@ -11612,6 +11864,7 @@ "version": "1.2.2", "resolved": "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz", "integrity": "sha1-7nceK6Sz3Fs3KTXVSf2WF780W4w= sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==", + "dev": true, "license": "MIT" }, "node_modules/@types/ms": { @@ -11648,6 +11901,7 @@ "version": "2.4.1", "resolved": "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", "integrity": "sha1-0zV0eaD9/dWQf+Z+F+CoXJBuEwE= sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", + "dev": true, "license": "MIT" }, "node_modules/@types/parse-json": { @@ -11679,7 +11933,8 @@ "version": "2.7.3", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==", - "dev": true + "dev": true, + "peer": true }, "node_modules/@types/pretty-hrtime": { "version": "1.0.3", @@ -11913,13 +12168,13 @@ } }, "node_modules/@typescript-eslint/rule-tester": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/rule-tester/-/rule-tester-6.18.0.tgz", - "integrity": "sha512-xR9qYDAx4S3IU9QQHpC78iY0kAHeTvZgVZxWBkN9hgumwBpGp0/YhNbHSyWXiK1sL3xOGsCO9Ay2um3sz8LMhA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/rule-tester/-/rule-tester-6.21.0.tgz", + "integrity": "sha512-twxQo4He8+AQ/YG70Xt7Fl/ImBLpi7qElxHN6/aK+U4z97JsITCG7DdIIUw5M+qKtDMCYkZCEE2If8dnHI7jWA==", "dev": true, "dependencies": { - "@typescript-eslint/typescript-estree": "6.18.0", - "@typescript-eslint/utils": "6.18.0", + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/utils": "6.21.0", "ajv": "^6.10.0", "lodash.merge": "4.6.2", "semver": "^7.5.4" @@ -11937,9 +12192,9 @@ } }, "node_modules/@typescript-eslint/rule-tester/node_modules/@typescript-eslint/types": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.0.tgz", - "integrity": "sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==", "dev": true, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -11950,13 +12205,13 @@ } }, "node_modules/@typescript-eslint/rule-tester/node_modules/@typescript-eslint/typescript-estree": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.0.tgz", - "integrity": "sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/visitor-keys": "6.18.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -11978,12 +12233,12 @@ } }, "node_modules/@typescript-eslint/rule-tester/node_modules/@typescript-eslint/visitor-keys": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.0.tgz", - "integrity": "sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", "dev": true, "dependencies": { - "@typescript-eslint/types": "6.18.0", + "@typescript-eslint/types": "6.21.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -12120,16 +12375,16 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.0.tgz", - "integrity": "sha512-wiKKCbUeDPGaYEYQh1S580dGxJ/V9HI7K5sbGAVklyf+o5g3O+adnS4UNJajplF4e7z2q0uVBaTdT/yLb4XAVA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz", + "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==", "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "6.18.0", - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/typescript-estree": "6.18.0", + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/typescript-estree": "6.21.0", "semver": "^7.5.4" }, "engines": { @@ -12144,12 +12399,12 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/scope-manager": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.0.tgz", - "integrity": "sha512-o/UoDT2NgOJ2VfHpfr+KBY2ErWvCySNUIX/X7O9g8Zzt/tXdpfEU43qbNk8LVuWUT2E0ptzTWXh79i74PP0twA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz", + "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==", "dependencies": { - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/visitor-keys": "6.18.0" + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -12160,9 +12415,9 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/types": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.0.tgz", - "integrity": "sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==", "engines": { "node": "^16.0.0 || >=18.0.0" }, @@ -12172,12 +12427,12 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/typescript-estree": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.0.tgz", - "integrity": "sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", "dependencies": { - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/visitor-keys": "6.18.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -12199,11 +12454,11 @@ } }, "node_modules/@typescript-eslint/utils/node_modules/@typescript-eslint/visitor-keys": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.0.tgz", - "integrity": "sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", "dependencies": { - "@typescript-eslint/types": "6.18.0", + "@typescript-eslint/types": "6.21.0", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -13472,6 +13727,7 @@ "version": "1.0.1", "resolved": "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz", "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -13786,21 +14042,6 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, - "node_modules/astro/node_modules/fast-glob": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", - "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, "node_modules/astro/node_modules/get-stream": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", @@ -15692,16 +15933,16 @@ } }, "node_modules/cli-truncate": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz", - "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz", + "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==", "dev": true, "dependencies": { "slice-ansi": "^5.0.0", - "string-width": "^5.0.0" + "string-width": "^7.0.0" }, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" @@ -15719,27 +15960,33 @@ "url": "https://github.com/chalk/ansi-regex?sponsor=1" } }, + "node_modules/cli-truncate/node_modules/emoji-regex": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", + "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==", + "dev": true + }, "node_modules/cli-truncate/node_modules/string-width": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", - "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz", + "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==", "dev": true, "dependencies": { - "eastasianwidth": "^0.2.0", - "emoji-regex": "^9.2.2", - "strip-ansi": "^7.0.1" + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" }, "engines": { - "node": ">=12" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/cli-truncate/node_modules/strip-ansi": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz", - "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", "dev": true, "dependencies": { "ansi-regex": "^6.0.1" @@ -16065,10 +16312,9 @@ }, "node_modules/confusing-browser-globals": { "version": "1.0.11", - "resolved": "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz", - "integrity": "sha1-rkDptXzdORVAiigF69OlWFYI3IE= sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", - "dev": true, - "license": "MIT" + "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz", + "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", + "dev": true }, "node_modules/consola": { "version": "3.2.3", @@ -16733,6 +16979,7 @@ "version": "1.2.0", "resolved": "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz", "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -16742,6 +16989,7 @@ "version": "1.1.0", "resolved": "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz", "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk= sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==", + "dev": true, "license": "MIT", "dependencies": { "decamelize": "^1.1.0", @@ -17515,7 +17763,6 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", - "dev": true, "engines": { "node": ">=6" } @@ -17890,10 +18137,9 @@ }, "node_modules/eslint-config-airbnb-base": { "version": "15.0.0", - "resolved": "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz", - "integrity": "sha1-awmt2QrHnC+NcjolgOB/OSWv0jY= sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz", + "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==", "dev": true, - "license": "MIT", "dependencies": { "confusing-browser-globals": "^1.0.10", "object.assign": "^4.1.2", @@ -17902,6 +18148,10 @@ }, "engines": { "node": "^10.12.0 || >=12.0.0" + }, + "peerDependencies": { + "eslint": "^7.32.0 || ^8.2.0", + "eslint-plugin-import": "^2.25.2" } }, "node_modules/eslint-config-airbnb-base/node_modules/semver": { @@ -17914,45 +18164,24 @@ } }, "node_modules/eslint-config-airbnb-typescript": { - "version": "17.0.0", - "resolved": "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.0.0.tgz", - "integrity": "sha1-Ng28+BCya7zy/3FhmEZXdfHEmgc= sha512-elNiuzD0kPAPTXjFWg+lE24nMdHMtuxgYoD30OyMD6yrW1AhFZPAg27VX7d3tzOErw+dgJTNWfRSDqEcXb4V0g==", + "version": "17.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.1.0.tgz", + "integrity": "sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==", "dev": true, - "license": "MIT", "dependencies": { "eslint-config-airbnb-base": "^15.0.0" - } - }, - "node_modules/eslint-config-next": { - "version": "13.5.6", - "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.5.6.tgz", - "integrity": "sha512-o8pQsUHTo9aHqJ2YiZDym5gQAMRf7O2HndHo/JZeY7TDD+W4hk6Ma8Vw54RHiBeb7OWWO5dPirQB+Is/aVQ7Kg==", - "dev": true, - "dependencies": { - "@next/eslint-plugin-next": "13.5.6", - "@rushstack/eslint-patch": "^1.3.3", - "@typescript-eslint/parser": "^5.4.2 || ^6.0.0", - "eslint-import-resolver-node": "^0.3.6", - "eslint-import-resolver-typescript": "^3.5.2", - "eslint-plugin-import": "^2.28.1", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-react": "^7.33.2", - "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705" }, "peerDependencies": { - "eslint": "^7.23.0 || ^8.0.0", - "typescript": ">=3.3.1" - }, - "peerDependenciesMeta": { - "typescript": { - "optional": true - } + "@typescript-eslint/eslint-plugin": "^5.13.0 || ^6.0.0", + "@typescript-eslint/parser": "^5.0.0 || ^6.0.0", + "eslint": "^7.32.0 || ^8.2.0", + "eslint-plugin-import": "^2.25.3" } }, "node_modules/eslint-config-prettier": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz", - "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", "dev": true, "bin": { "eslint-config-prettier": "bin/cli.js" @@ -18006,22 +18235,6 @@ "eslint-plugin-import": "*" } }, - "node_modules/eslint-import-resolver-typescript/node_modules/fast-glob": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", - "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", - "dev": true, - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, "node_modules/eslint-module-utils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz", @@ -18069,45 +18282,6 @@ "eslint": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, - "node_modules/eslint-plugin-cypress": { - "version": "2.15.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.15.1.tgz", - "integrity": "sha512-eLHLWP5Q+I4j2AWepYq0PgFEei9/s5LvjuSqWrxurkg1YZ8ltxdvMNmdSf0drnsNo57CTgYY/NIHHLRSWejR7w==", - "dev": true, - "dependencies": { - "globals": "^13.20.0" - }, - "peerDependencies": { - "eslint": ">= 3.2.1" - } - }, - "node_modules/eslint-plugin-cypress/node_modules/globals": { - "version": "13.23.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", - "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", - "dev": true, - "dependencies": { - "type-fest": "^0.20.2" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/eslint-plugin-cypress/node_modules/type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/eslint-plugin-es": { "version": "3.0.1", "resolved": "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz", @@ -18146,9 +18320,9 @@ } }, "node_modules/eslint-plugin-import": { - "version": "2.29.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz", - "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==", + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", + "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "dev": true, "dependencies": { "array-includes": "^3.1.7", @@ -18167,7 +18341,7 @@ "object.groupby": "^1.0.1", "object.values": "^1.1.7", "semver": "^6.3.1", - "tsconfig-paths": "^3.14.2" + "tsconfig-paths": "^3.15.0" }, "engines": { "node": ">=4" @@ -18217,31 +18391,6 @@ "semver": "bin/semver.js" } }, - "node_modules/eslint-plugin-jest": { - "version": "27.6.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.6.0.tgz", - "integrity": "sha512-MTlusnnDMChbElsszJvrwD1dN3x6nZl//s4JD23BxB6MgR66TZlL064su24xEIS3VACfAoHV1vgyMgPw8nkdng==", - "dev": true, - "dependencies": { - "@typescript-eslint/utils": "^5.10.0" - }, - "engines": { - "node": "^14.15.0 || ^16.10.0 || >=18.0.0" - }, - "peerDependencies": { - "@typescript-eslint/eslint-plugin": "^5.0.0 || ^6.0.0", - "eslint": "^7.0.0 || ^8.0.0", - "jest": "*" - }, - "peerDependenciesMeta": { - "@typescript-eslint/eslint-plugin": { - "optional": true - }, - "jest": { - "optional": true - } - } - }, "node_modules/eslint-plugin-jest-dom": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-4.0.3.tgz", @@ -18321,32 +18470,6 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true }, - "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/utils": { - "version": "5.62.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz", - "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==", - "dev": true, - "dependencies": { - "@eslint-community/eslint-utils": "^4.2.0", - "@types/json-schema": "^7.0.9", - "@types/semver": "^7.3.12", - "@typescript-eslint/scope-manager": "5.62.0", - "@typescript-eslint/types": "5.62.0", - "@typescript-eslint/typescript-estree": "5.62.0", - "eslint-scope": "^5.1.1", - "semver": "^7.3.7" - }, - "engines": { - "node": "^12.22.0 || ^14.17.0 || >=16.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/typescript-eslint" - }, - "peerDependencies": { - "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0" - } - }, "node_modules/eslint-plugin-json": { "version": "3.1.0", "resolved": "https://registry.yarnpkg.com/eslint-plugin-json/-/eslint-plugin-json-3.1.0.tgz", @@ -18471,34 +18594,36 @@ "metric-lcs": "^0.1.2" } }, - "node_modules/eslint-plugin-playwright": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-0.12.0.tgz", - "integrity": "sha512-KXuzQjVzca5irMT/7rvzJKsVDGbQr43oQPc8i+SLEBqmfrTxlwMwRqfv9vtZqh4hpU0jmrnA/EOfwtls+5QC1w==", + "node_modules/eslint-plugin-prettier": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", + "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", "dev": true, + "dependencies": { + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.8.6" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-plugin-prettier" + }, "peerDependencies": { - "eslint": ">=7", - "eslint-plugin-jest": ">=24" + "@types/eslint": ">=8.0.0", + "eslint": ">=8.0.0", + "eslint-config-prettier": "*", + "prettier": ">=3.0.0" }, "peerDependenciesMeta": { - "eslint-plugin-jest": { + "@types/eslint": { + "optional": true + }, + "eslint-config-prettier": { "optional": true } } }, - "node_modules/eslint-plugin-prettier": { - "version": "4.2.1", - "resolved": "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz", - "integrity": "sha1-ZRy7iLHauYv9QvAXoS+mstmT+Us= sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "prettier-linter-helpers": "^1.0.0" - }, - "engines": { - "node": ">=12.0.0" - } - }, "node_modules/eslint-plugin-react": { "version": "7.33.2", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz", @@ -18616,6 +18741,15 @@ "semver": "bin/semver.js" } }, + "node_modules/eslint-plugin-security": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-security/-/eslint-plugin-security-1.7.1.tgz", + "integrity": "sha512-sMStceig8AFglhhT2LqlU5r+/fn9OwsA72O5bBuQVTssPCdQAOQzL+oMn/ZcpeUY6KcNfLJArgcrsSULNjYYdQ==", + "dev": true, + "dependencies": { + "safe-regex": "^2.1.1" + } + }, "node_modules/eslint-plugin-storybook": { "version": "0.6.15", "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.15.tgz", @@ -18670,9 +18804,9 @@ } }, "node_modules/eslint-plugin-testing-library": { - "version": "5.11.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz", - "integrity": "sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.2.0.tgz", + "integrity": "sha512-+LCYJU81WF2yQ+Xu4A135CgK8IszcFcyMF4sWkbiu6Oj+Nel0TrkZq/HvDw0/1WuO3dhDQsZA/OpEMGd0NfcUw==", "dev": true, "dependencies": { "@typescript-eslint/utils": "^5.58.0" @@ -19356,6 +19490,21 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + }, + "engines": { + "node": ">=8.6.0" + } + }, "node_modules/fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -20231,22 +20380,6 @@ "node": ">=10" } }, - "node_modules/globby/node_modules/fast-glob": { - "version": "3.2.11", - "resolved": "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz", - "integrity": "sha1-oRcq2VzrihbiDKpcXlZIDlEpwdk= sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", - "license": "MIT", - "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - }, - "engines": { - "node": ">=8.6.0" - } - }, "node_modules/globjoin": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz", @@ -20336,6 +20469,7 @@ "version": "2.1.0", "resolved": "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz", "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM= sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==", + "dev": true, "license": "MIT", "engines": { "node": ">=6" @@ -21203,6 +21337,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==", + "dev": true, "dependencies": { "lru-cache": "^6.0.0" }, @@ -21400,9 +21535,9 @@ "license": "BSD-3-Clause" }, "node_modules/ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==", + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==", "engines": { "node": ">= 4" } @@ -21472,14 +21607,6 @@ "node": ">=4" } }, - "node_modules/import-lazy": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", - "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==", - "engines": { - "node": ">=8" - } - }, "node_modules/import-local": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz", @@ -21609,11 +21736,10 @@ "dev": true }, "node_modules/inquirer": { - "version": "8.2.4", - "resolved": "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.4.tgz", - "integrity": "sha1-3b/obKL2dkmmfapvEFHBKPaE8LQ= sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==", + "version": "8.2.6", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz", + "integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==", "dev": true, - "license": "MIT", "dependencies": { "ansi-escapes": "^4.2.1", "chalk": "^4.1.1", @@ -21629,7 +21755,7 @@ "string-width": "^4.1.0", "strip-ansi": "^6.0.0", "through": "^2.3.6", - "wrap-ansi": "^7.0.0" + "wrap-ansi": "^6.0.1" }, "engines": { "node": ">=12.0.0" @@ -21648,6 +21774,20 @@ "node": ">=8" } }, + "node_modules/inquirer/node_modules/wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/internal-slot": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.5.tgz", @@ -22081,6 +22221,7 @@ "version": "1.1.0", "resolved": "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz", "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4= sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -24514,74 +24655,95 @@ "license": "MIT" }, "node_modules/lint-staged": { - "version": "13.1.2", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.1.2.tgz", - "integrity": "sha512-K9b4FPbWkpnupvK3WXZLbgu9pchUJ6N7TtVZjbaPsoizkqFUDkUReUL25xdrCljJs7uLUF3tZ7nVPeo/6lp+6w==", - "dev": true, - "dependencies": { - "cli-truncate": "^3.1.0", - "colorette": "^2.0.19", - "commander": "^9.4.1", - "debug": "^4.3.4", - "execa": "^6.1.0", - "lilconfig": "2.0.6", - "listr2": "^5.0.5", - "micromatch": "^4.0.5", - "normalize-path": "^3.0.0", - "object-inspect": "^1.12.2", - "pidtree": "^0.6.0", - "string-argv": "^0.3.1", - "yaml": "^2.1.3" + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.0.tgz", + "integrity": "sha512-TFZzUEV00f+2YLaVPWBWGAMq7So6yQx+GG8YRMDeOEIf95Zn5RyiLMsEiX4KTNl9vq/w+NqRJkLA1kPIo15ufQ==", + "dev": true, + "dependencies": { + "chalk": "5.3.0", + "commander": "11.1.0", + "debug": "4.3.4", + "execa": "8.0.1", + "lilconfig": "3.0.0", + "listr2": "8.0.0", + "micromatch": "4.0.5", + "pidtree": "0.6.0", + "string-argv": "0.3.2", + "yaml": "2.3.4" }, "bin": { "lint-staged": "bin/lint-staged.js" }, "engines": { - "node": "^14.13.1 || >=16.0.0" + "node": ">=18.12.0" }, "funding": { "url": "https://opencollective.com/lint-staged" } }, + "node_modules/lint-staged/node_modules/chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "dev": true, + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, "node_modules/lint-staged/node_modules/commander": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", - "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==", "dev": true, "engines": { - "node": "^12.20.0 || >=14" + "node": ">=16" } }, "node_modules/lint-staged/node_modules/execa": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-6.1.0.tgz", - "integrity": "sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz", + "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==", "dev": true, "dependencies": { "cross-spawn": "^7.0.3", - "get-stream": "^6.0.1", - "human-signals": "^3.0.1", + "get-stream": "^8.0.1", + "human-signals": "^5.0.0", "is-stream": "^3.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^5.1.0", "onetime": "^6.0.0", - "signal-exit": "^3.0.7", + "signal-exit": "^4.1.0", "strip-final-newline": "^3.0.0" }, "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + "node": ">=16.17" }, "funding": { "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/lint-staged/node_modules/get-stream": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", + "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==", + "dev": true, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/lint-staged/node_modules/human-signals": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz", - "integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz", + "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==", "dev": true, "engines": { - "node": ">=12.20.0" + "node": ">=16.17.0" } }, "node_modules/lint-staged/node_modules/is-stream": { @@ -24596,6 +24758,15 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lint-staged/node_modules/lilconfig": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz", + "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==", + "dev": true, + "engines": { + "node": ">=14" + } + }, "node_modules/lint-staged/node_modules/mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -24609,9 +24780,9 @@ } }, "node_modules/lint-staged/node_modules/npm-run-path": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", - "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", + "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==", "dev": true, "dependencies": { "path-key": "^4.0.0" @@ -24638,6 +24809,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lint-staged/node_modules/signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, "node_modules/lint-staged/node_modules/strip-final-newline": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz", @@ -24651,9 +24834,9 @@ } }, "node_modules/lint-staged/node_modules/yaml": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz", - "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", "dev": true, "engines": { "node": ">= 14" @@ -25285,109 +25468,213 @@ "license": "0BSD" }, "node_modules/listr2": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/listr2/-/listr2-5.0.8.tgz", - "integrity": "sha512-mC73LitKHj9w6v30nLNGPetZIlfpUniNSsxxrbaPcWOjDb92SHPzJPi/t+v1YC/lxKz/AJ9egOjww0qUuFxBpA==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.0.0.tgz", + "integrity": "sha512-u8cusxAcyqAiQ2RhYvV7kRKNLgUvtObIbhOX2NCXqvp1UU32xIg5CT22ykS2TPKJXZWJwtK3IKLiqAGlGNE+Zg==", "dev": true, "dependencies": { - "cli-truncate": "^2.1.0", - "colorette": "^2.0.19", - "log-update": "^4.0.0", - "p-map": "^4.0.0", + "cli-truncate": "^4.0.0", + "colorette": "^2.0.20", + "eventemitter3": "^5.0.1", + "log-update": "^6.0.0", "rfdc": "^1.3.0", - "rxjs": "^7.8.0", - "through": "^2.3.8", - "wrap-ansi": "^7.0.0" + "wrap-ansi": "^9.0.0" }, "engines": { - "node": "^14.13.1 || >=16.0.0" + "node": ">=18.0.0" + } + }, + "node_modules/listr2/node_modules/ansi-escapes": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz", + "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==", + "dev": true, + "dependencies": { + "type-fest": "^3.0.0" }, - "peerDependencies": { - "enquirer": ">= 2.3.0 < 3" + "engines": { + "node": ">=14.16" }, - "peerDependenciesMeta": { - "enquirer": { - "optional": true - } + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/listr2/node_modules/cli-truncate": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz", - "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==", + "node_modules/listr2/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/listr2/node_modules/ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/listr2/node_modules/cli-cursor": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz", + "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==", "dev": true, "dependencies": { - "slice-ansi": "^3.0.0", - "string-width": "^4.2.0" + "restore-cursor": "^4.0.0" }, "engines": { - "node": ">=8" + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/listr2/node_modules/emoji-regex": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", + "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==", + "dev": true + }, + "node_modules/listr2/node_modules/eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "dev": true + }, + "node_modules/listr2/node_modules/is-fullwidth-code-point": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz", + "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==", + "dev": true, + "dependencies": { + "get-east-asian-width": "^1.0.0" + }, + "engines": { + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/listr2/node_modules/log-update": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz", - "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.0.0.tgz", + "integrity": "sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==", "dev": true, "dependencies": { - "ansi-escapes": "^4.3.0", - "cli-cursor": "^3.1.0", - "slice-ansi": "^4.0.0", - "wrap-ansi": "^6.2.0" + "ansi-escapes": "^6.2.0", + "cli-cursor": "^4.0.0", + "slice-ansi": "^7.0.0", + "strip-ansi": "^7.1.0", + "wrap-ansi": "^9.0.0" }, "engines": { - "node": ">=10" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/listr2/node_modules/log-update/node_modules/slice-ansi": { + "node_modules/listr2/node_modules/restore-cursor": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", - "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz", + "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==", "dev": true, "dependencies": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" + "onetime": "^5.1.0", + "signal-exit": "^3.0.2" }, "engines": { - "node": ">=10" + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/listr2/node_modules/slice-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz", + "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==", + "dev": true, + "dependencies": { + "ansi-styles": "^6.2.1", + "is-fullwidth-code-point": "^5.0.0" + }, + "engines": { + "node": ">=18" }, "funding": { "url": "https://github.com/chalk/slice-ansi?sponsor=1" } }, - "node_modules/listr2/node_modules/log-update/node_modules/wrap-ansi": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", - "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "node_modules/listr2/node_modules/string-width": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz", + "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==", "dev": true, "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" }, "engines": { - "node": ">=8" + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/listr2/node_modules/slice-ansi": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz", - "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==", + "node_modules/listr2/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", "dev": true, "dependencies": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" + "ansi-regex": "^6.0.1" }, "engines": { - "node": ">=8" + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/listr2/node_modules/type-fest": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", + "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==", + "dev": true, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/listr2/node_modules/wrap-ansi": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz", + "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==", + "dev": true, + "dependencies": { + "ansi-styles": "^6.2.1", + "string-width": "^7.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, "node_modules/load-json-file": { @@ -25739,9 +26026,9 @@ } }, "node_modules/magic-string": { - "version": "0.30.7", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz", - "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==", + "version": "0.30.8", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz", + "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==", "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15" }, @@ -25848,6 +26135,7 @@ "version": "1.0.1", "resolved": "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz", "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0= sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -27076,6 +27364,7 @@ "version": "1.0.1", "resolved": "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz", "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk= sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -27114,6 +27403,7 @@ "version": "4.1.0", "resolved": "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz", "integrity": "sha1-wGVXE8U6ii69d/+iR9NCxA8BBhk= sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==", + "dev": true, "license": "MIT", "dependencies": { "arrify": "^1.0.1", @@ -29986,24 +30276,34 @@ "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==" }, "node_modules/postcss-safe-parser": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", - "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", + "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "engines": { - "node": ">=12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" + "node": ">=18.0" }, "peerDependencies": { - "postcss": "^8.3.3" + "postcss": "^8.4.31" } }, "node_modules/postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.0.15", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz", + "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -30049,15 +30349,15 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -30077,18 +30377,17 @@ } }, "node_modules/prettier-plugin-astro": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.10.0.tgz", - "integrity": "sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==", + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.13.0.tgz", + "integrity": "sha512-5HrJNnPmZqTUNoA97zn4gNQv9BgVhv+et03314WpQ9H9N8m2L9OSV798olwmG2YLXPl1iSstlJCR1zB3x5xG4g==", "dev": true, "dependencies": { - "@astrojs/compiler": "^1.5.0", - "prettier": "^2.8.8", + "@astrojs/compiler": "^1.5.5", + "prettier": "^3.0.0", "sass-formatter": "^0.7.6" }, "engines": { - "node": "^14.15.0 || >=16.0.0", - "pnpm": ">=7.14.0" + "node": "^14.15.0 || >=16.0.0" } }, "node_modules/prettier-plugin-astro/node_modules/@astrojs/compiler": { @@ -31512,6 +31811,15 @@ "@babel/runtime": "^7.8.4" } }, + "node_modules/regexp-tree": { + "version": "0.1.27", + "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz", + "integrity": "sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==", + "dev": true, + "bin": { + "regexp-tree": "bin/regexp-tree" + } + }, "node_modules/regexp.prototype.flags": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", @@ -32619,9 +32927,9 @@ } }, "node_modules/rfdc": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz", - "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz", + "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==", "dev": true }, "node_modules/rimraf": { @@ -32761,6 +33069,15 @@ "integrity": "sha1-Hq+fqb2x/dTsdfWPnNtOa3gn7sY= sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==", "license": "MIT" }, + "node_modules/safe-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-2.1.1.tgz", + "integrity": "sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==", + "dev": true, + "dependencies": { + "regexp-tree": "~0.1.1" + } + }, "node_modules/safe-regex-test": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz", @@ -33500,6 +33817,7 @@ "version": "3.1.1", "resolved": "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz", "integrity": "sha1-3s6BrJweZxPl99G28X1Gj6U9iak= sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", + "dev": true, "license": "Apache-2.0", "dependencies": { "spdx-expression-parse": "^3.0.0", @@ -33510,12 +33828,14 @@ "version": "2.3.0", "resolved": "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz", "integrity": "sha1-PyjOGnegA3JoPq3kpDMYNSeiFj0= sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==", + "dev": true, "license": "CC-BY-3.0" }, "node_modules/spdx-expression-parse": { "version": "3.0.1", "resolved": "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", "integrity": "sha1-z3D1BILu/cmOPOCmgz5KU87rpnk= sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", + "dev": true, "license": "MIT", "dependencies": { "spdx-exceptions": "^2.1.0", @@ -33526,6 +33846,7 @@ "version": "3.0.11", "resolved": "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz", "integrity": "sha1-UMDYxAoU7Bv0Sbrmmg6kaFqdn5U= sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==", + "dev": true, "license": "CC0-1.0" }, "node_modules/spdx-ranges": { @@ -33792,9 +34113,9 @@ } }, "node_modules/string-argv": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", - "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", + "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==", "dev": true, "engines": { "node": ">=0.6.19" @@ -34074,11 +34395,6 @@ "node": ">=4" } }, - "node_modules/style-search": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", - "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==" - }, "node_modules/style-to-object": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz", @@ -34089,46 +34405,44 @@ } }, "node_modules/stylelint": { - "version": "15.11.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz", - "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==", - "dependencies": { - "@csstools/css-parser-algorithms": "^2.3.1", - "@csstools/css-tokenizer": "^2.2.0", - "@csstools/media-query-list-parser": "^2.1.4", - "@csstools/selector-specificity": "^3.0.0", + "version": "16.2.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz", + "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==", + "dependencies": { + "@csstools/css-parser-algorithms": "^2.5.0", + "@csstools/css-tokenizer": "^2.2.3", + "@csstools/media-query-list-parser": "^2.1.7", + "@csstools/selector-specificity": "^3.0.1", "balanced-match": "^2.0.0", "colord": "^2.9.3", - "cosmiconfig": "^8.2.0", + "cosmiconfig": "^9.0.0", "css-functions-list": "^3.2.1", "css-tree": "^2.3.1", "debug": "^4.3.4", - "fast-glob": "^3.3.1", + "fast-glob": "^3.3.2", "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^7.0.0", + "file-entry-cache": "^8.0.0", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^5.2.4", - "import-lazy": "^4.0.0", + "ignore": "^5.3.0", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", "known-css-properties": "^0.29.0", "mathml-tag-names": "^2.1.3", - "meow": "^10.1.5", + "meow": "^13.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.28", + "postcss": "^8.4.33", "postcss-resolve-nested-selector": "^0.1.1", - "postcss-safe-parser": "^6.0.0", - "postcss-selector-parser": "^6.0.13", + "postcss-safe-parser": "^7.0.0", + "postcss-selector-parser": "^6.0.15", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", - "strip-ansi": "^6.0.1", - "style-search": "^0.1.0", + "strip-ansi": "^7.1.0", "supports-hyperlinks": "^3.0.0", "svg-tags": "^1.0.0", "table": "^6.8.1", @@ -34138,7 +34452,7 @@ "stylelint": "bin/stylelint.mjs" }, "engines": { - "node": "^14.13.1 || >=16.0.0" + "node": ">=18.12.0" }, "funding": { "type": "opencollective", @@ -34146,122 +34460,112 @@ } }, "node_modules/stylelint-config-recess-order": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-4.4.0.tgz", - "integrity": "sha512-Q99kvZyIM/aoPEV4dRDkzD3fZLzH0LXi+pawCf1r700uUeF/PHQ5PZXjwFUuGrWhOzd1N+cuVm+OUGsY2fRN5A==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-5.0.0.tgz", + "integrity": "sha512-D+/Got844O96No2mj/H2NhLjj555iKAy/Mea+JCerfKB9TBKQW3/IudSVkTCxE4QiRDLldfH15x6FH1D1Anjhw==", "dev": true, "dependencies": { - "stylelint-order": "6.x" + "stylelint-order": "^6.0.4" }, "peerDependencies": { - "stylelint": ">=15" + "stylelint": ">=16" } }, "node_modules/stylelint-config-recommended": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz", - "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz", + "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==", "dev": true, "engines": { - "node": "^14.13.1 || >=16.0.0" + "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^15.10.0" + "stylelint": "^16.0.0" } }, "node_modules/stylelint-config-standard": { - "version": "34.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz", - "integrity": "sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==", + "version": "36.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz", + "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==", "dev": true, "dependencies": { - "stylelint-config-recommended": "^13.0.0" + "stylelint-config-recommended": "^14.0.0" }, "engines": { - "node": "^14.13.1 || >=16.0.0" + "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^15.10.0" + "stylelint": "^16.1.0" } }, "node_modules/stylelint-no-unsupported-browser-features": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-7.0.0.tgz", - "integrity": "sha512-O5VYlBhr+lpJ6jeTJSy+SMbHJhW5h5EJxsoicYcTi/07m45V/CF1mQidwRQLjv8y9BFQMpioWz60O89IkmbaNw==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-8.0.1.tgz", + "integrity": "sha512-tc8Xn5DaqJhxTmbA4H8gZbYdAz027NfuSZv5+cVieQb7BtBrF/1/iKYdpcGwXPl3GtqkQrisiXuGqKkKnzWcLw==", "dev": true, "dependencies": { - "doiuse": "^6.0.1", - "lodash": "^4.17.15", - "postcss": "^8.4.16" + "doiuse": "^6.0.2", + "postcss": "^8.4.32" }, "engines": { - "node": ">=16" + "node": ">=18.12.0" }, "peerDependencies": { - "stylelint": "^14.0.0||^15.0.0" + "stylelint": "^16.0.2" } }, "node_modules/stylelint-order": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.3.tgz", - "integrity": "sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", "dev": true, "dependencies": { - "postcss": "^8.4.21", + "postcss": "^8.4.32", "postcss-sorting": "^8.0.2" }, "peerDependencies": { - "stylelint": "^14.0.0 || ^15.0.0" - } - }, - "node_modules/stylelint/node_modules/balanced-match": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", - "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==" - }, - "node_modules/stylelint/node_modules/camelcase": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", - "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1" } }, - "node_modules/stylelint/node_modules/camelcase-keys": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz", - "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==", - "dependencies": { - "camelcase": "^6.3.0", - "map-obj": "^4.1.0", - "quick-lru": "^5.1.1", - "type-fest": "^1.2.1" - }, + "node_modules/stylelint/node_modules/ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", "engines": { "node": ">=12" }, "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "url": "https://github.com/chalk/ansi-regex?sponsor=1" } }, + "node_modules/stylelint/node_modules/balanced-match": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", + "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==" + }, "node_modules/stylelint/node_modules/cosmiconfig": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz", - "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", "dependencies": { - "import-fresh": "^3.2.1", + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", - "parse-json": "^5.0.0", - "path-type": "^4.0.0" + "parse-json": "^5.2.0" }, "engines": { "node": ">=14" }, "funding": { "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } } }, "node_modules/stylelint/node_modules/css-tree": { @@ -34276,52 +34580,27 @@ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" } }, - "node_modules/stylelint/node_modules/decamelize": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz", - "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/fast-glob": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", - "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "node_modules/stylelint/node_modules/file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", "dependencies": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" + "flat-cache": "^4.0.0" }, "engines": { - "node": ">=8.6.0" + "node": ">=16.0.0" } }, - "node_modules/stylelint/node_modules/file-entry-cache": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz", - "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==", + "node_modules/stylelint/node_modules/flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", "dependencies": { - "flat-cache": "^3.2.0" + "flatted": "^3.2.9", + "keyv": "^4.5.4" }, "engines": { - "node": ">=12.0.0" - } - }, - "node_modules/stylelint/node_modules/indent-string": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", - "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node": ">=16" } }, "node_modules/stylelint/node_modules/js-yaml": { @@ -34335,124 +34614,26 @@ "js-yaml": "bin/js-yaml.js" } }, - "node_modules/stylelint/node_modules/map-obj": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", - "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==", - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/stylelint/node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" }, "node_modules/stylelint/node_modules/meow": { - "version": "10.1.5", - "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz", - "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==", - "dependencies": { - "@types/minimist": "^1.2.2", - "camelcase-keys": "^7.0.0", - "decamelize": "^5.0.0", - "decamelize-keys": "^1.1.0", - "hard-rejection": "^2.1.0", - "minimist-options": "4.1.0", - "normalize-package-data": "^3.0.2", - "read-pkg-up": "^8.0.0", - "redent": "^4.0.0", - "trim-newlines": "^4.0.2", - "type-fest": "^1.2.2", - "yargs-parser": "^20.2.9" - }, + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==", "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/normalize-package-data": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz", - "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==", - "dependencies": { - "hosted-git-info": "^4.0.1", - "is-core-module": "^2.5.0", - "semver": "^7.3.4", - "validate-npm-package-license": "^3.0.1" - }, - "engines": { - "node": ">=10" - } - }, - "node_modules/stylelint/node_modules/quick-lru": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", - "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/read-pkg": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz", - "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==", - "dependencies": { - "@types/normalize-package-data": "^2.4.0", - "normalize-package-data": "^3.0.2", - "parse-json": "^5.2.0", - "type-fest": "^1.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/read-pkg-up": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz", - "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==", - "dependencies": { - "find-up": "^5.0.0", - "read-pkg": "^6.0.0", - "type-fest": "^1.0.1" - }, - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/redent": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz", - "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==", - "dependencies": { - "indent-string": "^5.0.0", - "strip-indent": "^4.0.0" - }, - "engines": { - "node": ">=12" + "node": ">=18" }, "funding": { "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/stylelint/node_modules/signal-exit": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz", - "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==", + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", "engines": { "node": ">=14" }, @@ -34460,40 +34641,18 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/stylelint/node_modules/strip-indent": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz", - "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==", + "node_modules/stylelint/node_modules/strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", "dependencies": { - "min-indent": "^1.0.1" - }, - "engines": { - "node": ">=12" + "ansi-regex": "^6.0.1" }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/trim-newlines": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz", - "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==", "engines": { "node": ">=12" }, "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/stylelint/node_modules/type-fest": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz", - "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, "node_modules/stylelint/node_modules/write-file-atomic": { @@ -34740,6 +34899,22 @@ "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==", "dev": true }, + "node_modules/synckit": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", + "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "dev": true, + "dependencies": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/table": { "version": "6.8.1", "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", @@ -35260,9 +35435,9 @@ } }, "node_modules/tsconfig-paths": { - "version": "3.14.2", - "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", - "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==", + "version": "3.15.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", + "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==", "dev": true, "dependencies": { "@types/json5": "^0.0.29", @@ -35284,11 +35459,10 @@ } }, "node_modules/tslib": { - "version": "2.5.0", - "resolved": "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha1-Qr/thvV4eutB0DGGbI9AJCng/d8= sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", - "devOptional": true, - "license": "0BSD" + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", + "devOptional": true }, "node_modules/tsutils": { "version": "3.21.0", @@ -36143,6 +36317,7 @@ "version": "3.0.4", "resolved": "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", "integrity": "sha1-/JH2uce6FchX9MssXe/uw51PQQo= sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", + "dev": true, "license": "Apache-2.0", "dependencies": { "spdx-correct": "^3.0.0", @@ -37454,6 +37629,7 @@ "version": "20.2.9", "resolved": "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha1-LrfcOwKJcY/ClfNidThFxBoMlO4= sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "dev": true, "license": "ISC", "engines": { "node": ">=10" @@ -37509,9 +37685,9 @@ }, "devDependencies": { "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/foundry": "^6.2.0", + "@sumup/foundry": "^7.0.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", - "prettier-plugin-astro": "0.10.0" + "prettier-plugin-astro": "^0.13.0" } }, "packages/circuit-ui": { @@ -37650,12 +37826,12 @@ "version": "4.1.0", "license": "Apache-2.0", "dependencies": { - "@typescript-eslint/utils": "^6.18.0" + "@typescript-eslint/utils": "^6.19.1" }, "devDependencies": { "@sumup/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.2", - "@typescript-eslint/rule-tester": "^6.18.0", + "@typescript-eslint/rule-tester": "^6.19.1", "typescript": "^5.3.3" }, "peerDependencies": { @@ -37665,17 +37841,17 @@ }, "packages/icons": { "name": "@sumup/icons", - "version": "3.6.0", + "version": "3.6.1", "license": "Apache-2.0", "devDependencies": { "@babel/core": "^7.23.9", "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", - "@types/prettier": "^2.7.3", + "@types/prettier": "^3.0.0", "babel-plugin-inline-react-svg": "^2.0.2", "fast-xml-parser": "^4.3.5", - "prettier": "^2.8.8", + "prettier": "^3.0.0", "tsx": "^4.7.0", "typescript": "^5.3.3" }, @@ -37686,6 +37862,16 @@ "react": ">=16.0.0 <19.0.0" } }, + "packages/icons/node_modules/@types/prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-mFMBfMOz8QxhYVbuINtswBp9VL2b4Y0QqYHwqLz3YbgtfAcat2Dl6Y1o4e22S/OVE6Ebl9m7wWiMT2lSbAs1wA==", + "deprecated": "This is a stub types definition. prettier provides its own type definitions, so you do not need this installed.", + "dev": true, + "dependencies": { + "prettier": "*" + } + }, "packages/remix-template": { "name": "@sumup/remix-template-circuit-ui", "version": "3.0.0", @@ -37706,11 +37892,10 @@ "@remix-run/dev": "^2.4.1", "@remix-run/eslint-config": "^2.4.1", "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/foundry": "^6.2.0", + "@sumup/foundry": "^7.0.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", "@types/react": "^18.2.47", "@types/react-dom": "^18.2.18", - "eslint": "^8.56.0", "typescript": "^5.3.3", "typescript-plugin-css-modules": "^5.0.2" }, @@ -38372,6 +38557,21 @@ } } }, + "packages/remix-template/node_modules/prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, "packages/remix-template/node_modules/rollup": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.4.tgz", @@ -38527,7 +38727,7 @@ }, "peerDependencies": { "@sumup/design-tokens": ">=5.3.0", - "stylelint": "^15.10.2" + "stylelint": "^16.2.0" } } }, @@ -39347,20 +39547,20 @@ "integrity": "sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==" }, "@babel/core": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.9.tgz", - "integrity": "sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.0.tgz", + "integrity": "sha512-fQfkg0Gjkza3nf0c7/w6Xf34BW4YvzNfACRLmmb7XRLa6XHdR+K9AlJlxneFfWYf6uhOzuzZVTjF/8KfndZANw==", "requires": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", "@babel/helper-compilation-targets": "^7.23.6", "@babel/helper-module-transforms": "^7.23.3", - "@babel/helpers": "^7.23.9", - "@babel/parser": "^7.23.9", - "@babel/template": "^7.23.9", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/helpers": "^7.24.0", + "@babel/parser": "^7.24.0", + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -39381,9 +39581,9 @@ } }, "@babel/eslint-parser": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.23.3.tgz", - "integrity": "sha512-9bTuNlyx7oSstodm1cR1bECj4fkiknsDa1YniISkJemMY3DGhJNYBECbe6QD/q54mp2J8VO66jW3/7uP//iFCw==", + "version": "7.23.10", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.23.10.tgz", + "integrity": "sha512-3wSYDPZVnhseRnxRJH6ZVTNknBz76AEnyC+AYYhasjP3Yy23qz0ERR7Fcd2SHmYuSFJ2kY9gaaDd3vyqU09eSw==", "dev": true, "requires": { "@nicolo-ribaudo/eslint-scope-5-internals": "5.1.1-v1", @@ -39661,13 +39861,13 @@ } }, "@babel/helpers": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.9.tgz", - "integrity": "sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.0.tgz", + "integrity": "sha512-ulDZdc0Aj5uLc5nETsa7EPx2L7rM0YJM8r7ck7U73AXi7qOV44IHHRAYZHY6iU1rr3C5N4NtTmMRUJP6kwCWeA==", "requires": { - "@babel/template": "^7.23.9", - "@babel/traverse": "^7.23.9", - "@babel/types": "^7.23.9" + "@babel/template": "^7.24.0", + "@babel/traverse": "^7.24.0", + "@babel/types": "^7.24.0" } }, "@babel/highlight": { @@ -39727,9 +39927,9 @@ } }, "@babel/parser": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.9.tgz", - "integrity": "sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==" + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz", + "integrity": "sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==" }, "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { "version": "7.23.3", @@ -40793,19 +40993,19 @@ } }, "@babel/template": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.23.9.tgz", - "integrity": "sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.0.tgz", + "integrity": "sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==", "requires": { "@babel/code-frame": "^7.23.5", - "@babel/parser": "^7.23.9", - "@babel/types": "^7.23.9" + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0" } }, "@babel/traverse": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.23.9.tgz", - "integrity": "sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.0.tgz", + "integrity": "sha512-HfuJlI8qq3dEDmNU5ChzzpZRWq+oxCZQyMzIMEqLho+AQnhMnKQUzH6ydo3RBl/YjPCuk68Y6s0Gx0AeyULiWw==", "requires": { "@babel/code-frame": "^7.23.5", "@babel/generator": "^7.23.6", @@ -40813,16 +41013,16 @@ "@babel/helper-function-name": "^7.23.0", "@babel/helper-hoist-variables": "^7.22.5", "@babel/helper-split-export-declaration": "^7.22.6", - "@babel/parser": "^7.23.9", - "@babel/types": "^7.23.9", + "@babel/parser": "^7.24.0", + "@babel/types": "^7.24.0", "debug": "^4.3.1", "globals": "^11.1.0" } }, "@babel/types": { - "version": "7.23.9", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.9.tgz", - "integrity": "sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==", + "version": "7.24.0", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.0.tgz", + "integrity": "sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==", "requires": { "@babel/helper-string-parser": "^7.23.4", "@babel/helper-validator-identifier": "^7.22.20", @@ -40882,6 +41082,12 @@ "graceful-fs": "^4.1.6" } }, + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + }, "universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -41517,6 +41723,12 @@ "graceful-fs": "^4.1.6" } }, + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + }, "universalify": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz", @@ -41533,26 +41745,26 @@ "optional": true }, "@csstools/css-parser-algorithms": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.3.2.tgz", - "integrity": "sha512-sLYGdAdEY2x7TSw9FtmdaTrh2wFtRJO5VMbBrA8tEqEod7GEggFmxTSK9XqExib3yMuYNcvcTdCZIP6ukdjAIA==", + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.0.tgz", + "integrity": "sha512-YfEHq0eRH98ffb5/EsrrDspVWAuph6gDggAE74ZtjecsmyyWpW768hOyiONa8zwWGbIWYfa2Xp4tRTrpQQ00CQ==", "requires": {} }, "@csstools/css-tokenizer": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.1.tgz", - "integrity": "sha512-Zmsf2f/CaEPWEVgw29odOj+WEVoiJy9s9NOv5GgNY9mZ1CZ7394By6wONrONrTsnNDv6F9hR02nvFihrGVGHBg==" + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.3.tgz", + "integrity": "sha512-pp//EvZ9dUmGuGtG1p+n17gTHEOqu9jO+FiCUjNN3BDmyhdA2Jq9QsVeR7K8/2QCK17HSsioPlTW9ZkzoWb3Lg==" }, "@csstools/media-query-list-parser": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.5.tgz", - "integrity": "sha512-IxVBdYzR8pYe89JiyXQuYk4aVVoCPhMJkz6ElRwlVysjwURTsTk/bmY/z4FfeRE+CRBMlykPwXEVUg8lThv7AQ==", + "version": "2.1.8", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.1.8.tgz", + "integrity": "sha512-DiD3vG5ciNzeuTEoh74S+JMjQDs50R3zlxHnBnfd04YYfA/kh2KiBCGhzqLxlJcNq+7yNQ3stuZZYLX6wK/U2g==", "requires": {} }, "@csstools/selector-specificity": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.0.tgz", - "integrity": "sha512-hBI9tfBtuPIi885ZsZ32IMEU/5nlZH/KOVYJCOh7gyMxaVLGmLedYqFN6Ui1LXkI8JlC8IsuC0rF0btcRZKd5g==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-3.0.2.tgz", + "integrity": "sha512-RpHaZ1h9LE7aALeQXmXrJkRG84ZxIsctEN2biEUmFyKpzFM3zZ35eUMcIzZFsw/2olQE6v69+esEqU2f1MKycg==", "requires": {} }, "@discoveryjs/json-ext": { @@ -43070,31 +43282,6 @@ "tar-fs": "^2.1.1" } }, - "@next/eslint-plugin-next": { - "version": "13.5.6", - "resolved": "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.5.6.tgz", - "integrity": "sha512-ng7pU/DDsxPgT6ZPvuprxrkeew3XaRf4LAT4FabaEO/hAbvVx4P7wqnqdbTdDn1kgTvsI4tpIgT4Awn/m0bGbg==", - "dev": true, - "requires": { - "glob": "7.1.7" - }, - "dependencies": { - "glob": { - "version": "7.1.7", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", - "integrity": "sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==", - "dev": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - } - } - }, "@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -43691,6 +43878,12 @@ "dev": true, "optional": true }, + "@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true + }, "@radix-ui/number": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", @@ -44094,6 +44287,15 @@ "requires": { "@typescript-eslint/utils": "^5.10.0" } + }, + "eslint-plugin-testing-library": { + "version": "5.11.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz", + "integrity": "sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==", + "dev": true, + "requires": { + "@typescript-eslint/utils": "^5.58.0" + } } } }, @@ -45098,6 +45300,12 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz", "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==", "dev": true + }, + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true } } }, @@ -45130,6 +45338,14 @@ "lodash": "^4.17.21", "prettier": "^2.8.0", "recast": "^0.23.1" + }, + "dependencies": { + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + } } }, "@storybook/components": { @@ -45761,6 +45977,14 @@ "estraverse": "^5.2.0", "lodash": "^4.17.21", "prettier": "^2.8.0" + }, + "dependencies": { + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + } } }, "@storybook/telemetry": { @@ -45821,14 +46045,14 @@ "@sumup/circuit-ui": "^8.0.0", "@sumup/design-tokens": "^7.0.0", "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/foundry": "^6.2.0", + "@sumup/foundry": "^7.0.0", "@sumup/icons": "^3.3.0", "@sumup/intl": "^1.6.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", "@types/react": "^18.2.47", "@types/react-dom": "^18.2.18", "astro": "^4.1.1", - "prettier-plugin-astro": "0.10.0", + "prettier-plugin-astro": "^0.13.0", "react": "^18.2.0", "react-dom": "^18.2.0" } @@ -45916,59 +46140,141 @@ "requires": { "@sumup/design-tokens": "^7.0.0", "@tsconfig/node18": "^18.2.2", - "@typescript-eslint/rule-tester": "^6.18.0", - "@typescript-eslint/utils": "^6.18.0", + "@typescript-eslint/rule-tester": "^6.19.1", + "@typescript-eslint/utils": "^6.19.1", "typescript": "^5.3.3" } }, "@sumup/foundry": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/@sumup/foundry/-/foundry-6.2.0.tgz", - "integrity": "sha512-sKZsAJQwtuY1gN/ZaY1KpdrhVV6k8ltiswKbB6kEl4I4cPGbWfccdlpnZ/D1P7OTvjmSvHQw2P/X3btq4ipxnw==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@sumup/foundry/-/foundry-7.0.0.tgz", + "integrity": "sha512-fVT2vPn5BI0qWYbyvQFbdaO9aljWUs+37C/6Er/sqKOviCq2lULRrR3lfHEXPNwq6RBpPSCadabtPJb/KwXcwQ==", "dev": true, "requires": { - "@babel/core": "^7.23.0", - "@babel/eslint-parser": "^7.22.15", - "@emotion/eslint-plugin": "^11.11.0", - "@typescript-eslint/eslint-plugin": "^5.58.0", - "@typescript-eslint/parser": "^5.62.0", - "chalk": "^4.0.0", + "@babel/core": "^7.24.0", + "@babel/eslint-parser": "^7.23.10", + "@typescript-eslint/eslint-plugin": "^6.19.1", + "@typescript-eslint/parser": "^6.19.1", + "chalk": "^4.1.2", "cross-spawn": "^7.0.3", "dedent": "^0.7.0", - "eslint": "^8.44.0", + "eslint": "^8.56.0", "eslint-config-airbnb-base": "^15.0.0", - "eslint-config-airbnb-typescript": "^17.0.0", - "eslint-config-next": "^13.4.12", - "eslint-config-prettier": "^8.9.0", + "eslint-config-airbnb-typescript": "^17.1.0", + "eslint-config-prettier": "^9.1.0", "eslint-plugin-compat": "^4.2.0", - "eslint-plugin-cypress": "^2.15.1", - "eslint-plugin-import": "^2.28.0", - "eslint-plugin-jest": "^27.6.0", + "eslint-plugin-import": "^2.29.1", "eslint-plugin-json": "^3.1.0", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-node": "^11.1.0", "eslint-plugin-notice": "^0.9.10", - "eslint-plugin-playwright": "^0.12.0", - "eslint-plugin-prettier": "^4.2.1", - "eslint-plugin-react": "^7.32.2", + "eslint-plugin-prettier": "^5.1.3", + "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", - "eslint-plugin-testing-library": "^5.11.0", - "husky": "^4.0.0", - "inquirer": "^8.2.4", + "eslint-plugin-security": "^1.7.1", + "husky": "^4.3.8", + "inquirer": "^8.2.6", "is-ci": "^3.0.1", - "lint-staged": "13.1.2", + "lint-staged": "15.2.0", "listr": "^0.14.3", "listr-inquirer": "^0.1.0", "lodash": "^4.17.21", - "prettier": "^2.8.7", + "prettier": "^3.2.4", "read-pkg-up": "^7.0.1", - "stylelint": "^15.11.0", - "stylelint-config-recess-order": "^4.4.0", - "stylelint-config-standard": "^34.0.0", - "stylelint-no-unsupported-browser-features": "^7.0.0", + "semver": "^7.5.4", + "stylelint": "^16.2.0", + "stylelint-config-recess-order": "^5.0.0", + "stylelint-config-standard": "^36.0.0", + "stylelint-no-unsupported-browser-features": "^8.0.0", "yargs": "^17.7.2" }, "dependencies": { + "@typescript-eslint/eslint-plugin": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-6.21.0.tgz", + "integrity": "sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==", + "dev": true, + "requires": { + "@eslint-community/regexpp": "^4.5.1", + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/type-utils": "6.21.0", + "@typescript-eslint/utils": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4", + "graphemer": "^1.4.0", + "ignore": "^5.2.4", + "natural-compare": "^1.4.0", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + } + }, + "@typescript-eslint/parser": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.21.0.tgz", + "integrity": "sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==", + "dev": true, + "requires": { + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4" + } + }, + "@typescript-eslint/scope-manager": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz", + "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==", + "dev": true, + "requires": { + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0" + } + }, + "@typescript-eslint/type-utils": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-6.21.0.tgz", + "integrity": "sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==", + "dev": true, + "requires": { + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/utils": "6.21.0", + "debug": "^4.3.4", + "ts-api-utils": "^1.0.1" + } + }, + "@typescript-eslint/types": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==", + "dev": true + }, + "@typescript-eslint/typescript-estree": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", + "dev": true, + "requires": { + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", + "debug": "^4.3.4", + "globby": "^11.1.0", + "is-glob": "^4.0.3", + "minimatch": "9.0.3", + "semver": "^7.5.4", + "ts-api-utils": "^1.0.1" + } + }, + "@typescript-eslint/visitor-keys": { + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", + "dev": true, + "requires": { + "@typescript-eslint/types": "6.21.0", + "eslint-visitor-keys": "^3.4.1" + } + }, "cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -45980,6 +46286,15 @@ "wrap-ansi": "^7.0.0" } }, + "minimatch": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz", + "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==", + "dev": true, + "requires": { + "brace-expansion": "^2.0.1" + } + }, "yargs": { "version": "17.7.2", "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz", @@ -46010,12 +46325,23 @@ "@babel/preset-env": "^7.23.9", "@babel/preset-react": "^7.23.3", "@types/babel__core": "^7.20.5", - "@types/prettier": "^2.7.3", + "@types/prettier": "^3.0.0", "babel-plugin-inline-react-svg": "^2.0.2", "fast-xml-parser": "^4.3.5", - "prettier": "^2.8.8", + "prettier": "^3.0.0", "tsx": "^4.7.0", "typescript": "^5.3.3" + }, + "dependencies": { + "@types/prettier": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-mFMBfMOz8QxhYVbuINtswBp9VL2b4Y0QqYHwqLz3YbgtfAcat2Dl6Y1o4e22S/OVE6Ebl9m7wWiMT2lSbAs1wA==", + "dev": true, + "requires": { + "prettier": "*" + } + } } }, "@sumup/intl": { @@ -46038,13 +46364,12 @@ "@sumup/circuit-ui": "^8.0.0", "@sumup/design-tokens": "^7.0.0", "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/foundry": "^6.2.0", + "@sumup/foundry": "^7.0.0", "@sumup/icons": "^3.3.0", "@sumup/intl": "^1.6.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", "@types/react": "^18.2.47", "@types/react-dom": "^18.2.18", - "eslint": "^8.56.0", "isbot": "^4.3.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -46404,6 +46729,12 @@ "yaml": "^2.3.4" } }, + "prettier": { + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "dev": true + }, "rollup": { "version": "4.9.4", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.9.4.tgz", @@ -46910,7 +47241,8 @@ "@types/minimist": { "version": "1.2.2", "resolved": "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz", - "integrity": "sha1-7nceK6Sz3Fs3KTXVSf2WF780W4w= sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==" + "integrity": "sha1-7nceK6Sz3Fs3KTXVSf2WF780W4w= sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==", + "dev": true }, "@types/ms": { "version": "0.7.31", @@ -46944,7 +47276,8 @@ "@types/normalize-package-data": { "version": "2.4.1", "resolved": "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz", - "integrity": "sha1-0zV0eaD9/dWQf+Z+F+CoXJBuEwE= sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==" + "integrity": "sha1-0zV0eaD9/dWQf+Z+F+CoXJBuEwE= sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==", + "dev": true }, "@types/parse-json": { "version": "4.0.0", @@ -46974,7 +47307,8 @@ "version": "2.7.3", "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.3.tgz", "integrity": "sha512-+68kP9yzs4LMp7VNh8gdzMSPZFL44MLGqiHWvttYJe+6qnuVr4Ek9wSBQoveqY/r+LwjCcU29kNVkidwim+kYA==", - "dev": true + "dev": true, + "peer": true }, "@types/pretty-hrtime": { "version": "1.0.3", @@ -47164,32 +47498,32 @@ } }, "@typescript-eslint/rule-tester": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/rule-tester/-/rule-tester-6.18.0.tgz", - "integrity": "sha512-xR9qYDAx4S3IU9QQHpC78iY0kAHeTvZgVZxWBkN9hgumwBpGp0/YhNbHSyWXiK1sL3xOGsCO9Ay2um3sz8LMhA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/rule-tester/-/rule-tester-6.21.0.tgz", + "integrity": "sha512-twxQo4He8+AQ/YG70Xt7Fl/ImBLpi7qElxHN6/aK+U4z97JsITCG7DdIIUw5M+qKtDMCYkZCEE2If8dnHI7jWA==", "dev": true, "requires": { - "@typescript-eslint/typescript-estree": "6.18.0", - "@typescript-eslint/utils": "6.18.0", + "@typescript-eslint/typescript-estree": "6.21.0", + "@typescript-eslint/utils": "6.21.0", "ajv": "^6.10.0", "lodash.merge": "4.6.2", "semver": "^7.5.4" }, "dependencies": { "@typescript-eslint/types": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.0.tgz", - "integrity": "sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.0.tgz", - "integrity": "sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", "dev": true, "requires": { - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/visitor-keys": "6.18.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -47199,12 +47533,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.0.tgz", - "integrity": "sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", "dev": true, "requires": { - "@typescript-eslint/types": "6.18.0", + "@typescript-eslint/types": "6.21.0", "eslint-visitor-keys": "^3.4.1" } }, @@ -47281,40 +47615,40 @@ } }, "@typescript-eslint/utils": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.18.0.tgz", - "integrity": "sha512-wiKKCbUeDPGaYEYQh1S580dGxJ/V9HI7K5sbGAVklyf+o5g3O+adnS4UNJajplF4e7z2q0uVBaTdT/yLb4XAVA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-6.21.0.tgz", + "integrity": "sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==", "requires": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "6.18.0", - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/typescript-estree": "6.18.0", + "@typescript-eslint/scope-manager": "6.21.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/typescript-estree": "6.21.0", "semver": "^7.5.4" }, "dependencies": { "@typescript-eslint/scope-manager": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.18.0.tgz", - "integrity": "sha512-o/UoDT2NgOJ2VfHpfr+KBY2ErWvCySNUIX/X7O9g8Zzt/tXdpfEU43qbNk8LVuWUT2E0ptzTWXh79i74PP0twA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-6.21.0.tgz", + "integrity": "sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==", "requires": { - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/visitor-keys": "6.18.0" + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0" } }, "@typescript-eslint/types": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.18.0.tgz", - "integrity": "sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==" + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-6.21.0.tgz", + "integrity": "sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==" }, "@typescript-eslint/typescript-estree": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.18.0.tgz", - "integrity": "sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-6.21.0.tgz", + "integrity": "sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==", "requires": { - "@typescript-eslint/types": "6.18.0", - "@typescript-eslint/visitor-keys": "6.18.0", + "@typescript-eslint/types": "6.21.0", + "@typescript-eslint/visitor-keys": "6.21.0", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -47324,11 +47658,11 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "6.18.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.18.0.tgz", - "integrity": "sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==", + "version": "6.21.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-6.21.0.tgz", + "integrity": "sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==", "requires": { - "@typescript-eslint/types": "6.18.0", + "@typescript-eslint/types": "6.21.0", "eslint-visitor-keys": "^3.4.1" } }, @@ -48188,7 +48522,8 @@ "arrify": { "version": "1.0.1", "resolved": "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz", - "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==" + "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==", + "dev": true }, "asap": { "version": "2.0.6", @@ -48435,18 +48770,6 @@ "strip-final-newline": "^3.0.0" } }, - "fast-glob": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", - "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", - "requires": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - } - }, "get-stream": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", @@ -49714,13 +50037,13 @@ } }, "cli-truncate": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-3.1.0.tgz", - "integrity": "sha512-wfOBkjXteqSnI59oPcJkcPl/ZmwvMMOj340qUIY1SKZCv0B9Cf4D4fAucRkIKQmsIuYK3x1rrgU7MeGRruiuiA==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz", + "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==", "dev": true, "requires": { "slice-ansi": "^5.0.0", - "string-width": "^5.0.0" + "string-width": "^7.0.0" }, "dependencies": { "ansi-regex": { @@ -49729,21 +50052,27 @@ "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", "dev": true }, + "emoji-regex": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", + "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==", + "dev": true + }, "string-width": { - "version": "5.1.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", - "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz", + "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==", "dev": true, "requires": { - "eastasianwidth": "^0.2.0", - "emoji-regex": "^9.2.2", - "strip-ansi": "^7.0.1" + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" } }, "strip-ansi": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz", - "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", "dev": true, "requires": { "ansi-regex": "^6.0.1" @@ -50001,8 +50330,8 @@ }, "confusing-browser-globals": { "version": "1.0.11", - "resolved": "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz", - "integrity": "sha1-rkDptXzdORVAiigF69OlWFYI3IE= sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", + "resolved": "https://registry.npmjs.org/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz", + "integrity": "sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==", "dev": true }, "consola": { @@ -50516,12 +50845,14 @@ "decamelize": { "version": "1.2.0", "resolved": "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz", - "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==" + "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA= sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==", + "dev": true }, "decamelize-keys": { "version": "1.1.0", "resolved": "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz", "integrity": "sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk= sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==", + "dev": true, "requires": { "decamelize": "^1.1.0", "map-obj": "^1.0.0" @@ -51129,8 +51460,7 @@ "env-paths": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz", - "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==", - "dev": true + "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==" }, "envinfo": { "version": "7.8.1", @@ -51478,8 +51808,8 @@ }, "eslint-config-airbnb-base": { "version": "15.0.0", - "resolved": "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz", - "integrity": "sha1-awmt2QrHnC+NcjolgOB/OSWv0jY= sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-15.0.0.tgz", + "integrity": "sha512-xaX3z4ZZIcFLvh2oUNvcX5oEofXda7giYmuplVxoOg5A7EXJMrUyqRgR+mhDhPK8LZ4PttFOBvCYDbX3sUoUig==", "dev": true, "requires": { "confusing-browser-globals": "^1.0.10", @@ -51497,35 +51827,18 @@ } }, "eslint-config-airbnb-typescript": { - "version": "17.0.0", - "resolved": "https://registry.yarnpkg.com/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.0.0.tgz", - "integrity": "sha1-Ng28+BCya7zy/3FhmEZXdfHEmgc= sha512-elNiuzD0kPAPTXjFWg+lE24nMdHMtuxgYoD30OyMD6yrW1AhFZPAg27VX7d3tzOErw+dgJTNWfRSDqEcXb4V0g==", + "version": "17.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb-typescript/-/eslint-config-airbnb-typescript-17.1.0.tgz", + "integrity": "sha512-GPxI5URre6dDpJ0CtcthSZVBAfI+Uw7un5OYNVxP2EYi3H81Jw701yFP7AU+/vCE7xBtFmjge7kfhhk4+RAiig==", "dev": true, "requires": { "eslint-config-airbnb-base": "^15.0.0" } }, - "eslint-config-next": { - "version": "13.5.6", - "resolved": "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.5.6.tgz", - "integrity": "sha512-o8pQsUHTo9aHqJ2YiZDym5gQAMRf7O2HndHo/JZeY7TDD+W4hk6Ma8Vw54RHiBeb7OWWO5dPirQB+Is/aVQ7Kg==", - "dev": true, - "requires": { - "@next/eslint-plugin-next": "13.5.6", - "@rushstack/eslint-patch": "^1.3.3", - "@typescript-eslint/parser": "^5.4.2 || ^6.0.0", - "eslint-import-resolver-node": "^0.3.6", - "eslint-import-resolver-typescript": "^3.5.2", - "eslint-plugin-import": "^2.28.1", - "eslint-plugin-jsx-a11y": "^6.7.1", - "eslint-plugin-react": "^7.33.2", - "eslint-plugin-react-hooks": "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705" - } - }, "eslint-config-prettier": { - "version": "8.10.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz", - "integrity": "sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==", + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", "dev": true, "requires": {} }, @@ -51564,21 +51877,6 @@ "get-tsconfig": "^4.5.0", "is-core-module": "^2.11.0", "is-glob": "^4.0.3" - }, - "dependencies": { - "fast-glob": { - "version": "3.3.1", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.1.tgz", - "integrity": "sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==", - "dev": true, - "requires": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - } - } } }, "eslint-module-utils": { @@ -51616,32 +51914,6 @@ "semver": "^7.5.4" } }, - "eslint-plugin-cypress": { - "version": "2.15.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.15.1.tgz", - "integrity": "sha512-eLHLWP5Q+I4j2AWepYq0PgFEei9/s5LvjuSqWrxurkg1YZ8ltxdvMNmdSf0drnsNo57CTgYY/NIHHLRSWejR7w==", - "dev": true, - "requires": { - "globals": "^13.20.0" - }, - "dependencies": { - "globals": { - "version": "13.23.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", - "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", - "dev": true, - "requires": { - "type-fest": "^0.20.2" - } - }, - "type-fest": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", - "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", - "dev": true - } - } - }, "eslint-plugin-es": { "version": "3.0.1", "resolved": "https://registry.yarnpkg.com/eslint-plugin-es/-/eslint-plugin-es-3.0.1.tgz", @@ -51670,9 +51942,9 @@ } }, "eslint-plugin-import": { - "version": "2.29.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.0.tgz", - "integrity": "sha512-QPOO5NO6Odv5lpoTkddtutccQjysJuFxoPS7fAHO+9m9udNHvTCPSAMW9zGAYj8lAIdr40I8yPCdUYrncXtrwg==", + "version": "2.29.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz", + "integrity": "sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==", "dev": true, "requires": { "array-includes": "^3.1.7", @@ -51691,7 +51963,7 @@ "object.groupby": "^1.0.1", "object.values": "^1.1.7", "semver": "^6.3.1", - "tsconfig-paths": "^3.14.2" + "tsconfig-paths": "^3.15.0" }, "dependencies": { "debug": { @@ -51731,33 +52003,6 @@ } } }, - "eslint-plugin-jest": { - "version": "27.6.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-27.6.0.tgz", - "integrity": "sha512-MTlusnnDMChbElsszJvrwD1dN3x6nZl//s4JD23BxB6MgR66TZlL064su24xEIS3VACfAoHV1vgyMgPw8nkdng==", - "dev": true, - "requires": { - "@typescript-eslint/utils": "^5.10.0" - }, - "dependencies": { - "@typescript-eslint/utils": { - "version": "5.62.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.62.0.tgz", - "integrity": "sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==", - "dev": true, - "requires": { - "@eslint-community/eslint-utils": "^4.2.0", - "@types/json-schema": "^7.0.9", - "@types/semver": "^7.3.12", - "@typescript-eslint/scope-manager": "5.62.0", - "@typescript-eslint/types": "5.62.0", - "@typescript-eslint/typescript-estree": "5.62.0", - "eslint-scope": "^5.1.1", - "semver": "^7.3.7" - } - } - } - }, "eslint-plugin-jest-dom": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/eslint-plugin-jest-dom/-/eslint-plugin-jest-dom-4.0.3.tgz", @@ -51915,20 +52160,14 @@ "metric-lcs": "^0.1.2" } }, - "eslint-plugin-playwright": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-0.12.0.tgz", - "integrity": "sha512-KXuzQjVzca5irMT/7rvzJKsVDGbQr43oQPc8i+SLEBqmfrTxlwMwRqfv9vtZqh4hpU0jmrnA/EOfwtls+5QC1w==", - "dev": true, - "requires": {} - }, "eslint-plugin-prettier": { - "version": "4.2.1", - "resolved": "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz", - "integrity": "sha1-ZRy7iLHauYv9QvAXoS+mstmT+Us= sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", + "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", "dev": true, "requires": { - "prettier-linter-helpers": "^1.0.0" + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.8.6" } }, "eslint-plugin-react": { @@ -52017,6 +52256,15 @@ } } }, + "eslint-plugin-security": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-security/-/eslint-plugin-security-1.7.1.tgz", + "integrity": "sha512-sMStceig8AFglhhT2LqlU5r+/fn9OwsA72O5bBuQVTssPCdQAOQzL+oMn/ZcpeUY6KcNfLJArgcrsSULNjYYdQ==", + "dev": true, + "requires": { + "safe-regex": "^2.1.1" + } + }, "eslint-plugin-storybook": { "version": "0.6.15", "resolved": "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.15.tgz", @@ -52057,9 +52305,9 @@ } }, "eslint-plugin-testing-library": { - "version": "5.11.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.11.1.tgz", - "integrity": "sha512-5eX9e1Kc2PqVRed3taaLnAAqPZGEX75C+M/rXzUAI3wIg/ZxzUm1OVAwfe/O+vE+6YXOLetSe9g5GKD2ecXipw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-testing-library/-/eslint-plugin-testing-library-6.2.0.tgz", + "integrity": "sha512-+LCYJU81WF2yQ+Xu4A135CgK8IszcFcyMF4sWkbiu6Oj+Nel0TrkZq/HvDw0/1WuO3dhDQsZA/OpEMGd0NfcUw==", "dev": true, "requires": { "@typescript-eslint/utils": "^5.58.0" @@ -52532,6 +52780,18 @@ "integrity": "sha1-c+4RmC2Gyq95WYKNUZz+kn+sXwM= sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==", "dev": true }, + "fast-glob": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", + "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "requires": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.4" + } + }, "fast-json-stable-stringify": { "version": "2.1.0", "resolved": "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", @@ -53170,20 +53430,6 @@ "ignore": "^5.2.0", "merge2": "^1.4.1", "slash": "^3.0.0" - }, - "dependencies": { - "fast-glob": { - "version": "3.2.11", - "resolved": "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz", - "integrity": "sha1-oRcq2VzrihbiDKpcXlZIDlEpwdk= sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", - "requires": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" - } - } } }, "globjoin": { @@ -53256,7 +53502,8 @@ "hard-rejection": { "version": "2.1.0", "resolved": "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz", - "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM= sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==" + "integrity": "sha1-HG7aXBaFxjlCdm15u0Cudzzs2IM= sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==", + "dev": true }, "has": { "version": "1.0.3", @@ -53868,6 +54115,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz", "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==", + "dev": true, "requires": { "lru-cache": "^6.0.0" } @@ -54012,9 +54260,9 @@ "integrity": "sha1-jrehCmP/8l0VpXsAFYbRd9Gw01I= sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" }, "ignore": { - "version": "5.2.4", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz", - "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==" + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz", + "integrity": "sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==" }, "ignore-walk": { "version": "5.0.1", @@ -54065,11 +54313,6 @@ } } }, - "import-lazy": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", - "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==" - }, "import-local": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.1.0.tgz", @@ -54166,9 +54409,9 @@ "dev": true }, "inquirer": { - "version": "8.2.4", - "resolved": "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.4.tgz", - "integrity": "sha1-3b/obKL2dkmmfapvEFHBKPaE8LQ= sha512-nn4F01dxU8VeKfq192IjLsxu0/OmMZ4Lg3xKAns148rCaXP6ntAoEkVYZThWjwON8AlzdZZi6oqnhNbxUG9hVg==", + "version": "8.2.6", + "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-8.2.6.tgz", + "integrity": "sha512-M1WuAmb7pn9zdFRtQYk26ZBoY043Sse0wVDdk4Bppr+JOXyQYybdtvK+l9wUibhtjdjvtoiNy8tk+EgsYIUqKg==", "dev": true, "requires": { "ansi-escapes": "^4.2.1", @@ -54185,7 +54428,7 @@ "string-width": "^4.1.0", "strip-ansi": "^6.0.0", "through": "^2.3.6", - "wrap-ansi": "^7.0.0" + "wrap-ansi": "^6.0.1" }, "dependencies": { "figures": { @@ -54196,6 +54439,17 @@ "requires": { "escape-string-regexp": "^1.0.5" } + }, + "wrap-ansi": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", + "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", + "dev": true, + "requires": { + "ansi-styles": "^4.0.0", + "string-width": "^4.1.0", + "strip-ansi": "^6.0.0" + } } } }, @@ -54493,7 +54747,8 @@ "is-plain-obj": { "version": "1.1.0", "resolved": "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-1.1.0.tgz", - "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4= sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==" + "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4= sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==", + "dev": true }, "is-plain-object": { "version": "5.0.0", @@ -56296,53 +56551,62 @@ "integrity": "sha1-7KKE910pZQeTCdwK2SVauy68FjI= sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==" }, "lint-staged": { - "version": "13.1.2", - "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-13.1.2.tgz", - "integrity": "sha512-K9b4FPbWkpnupvK3WXZLbgu9pchUJ6N7TtVZjbaPsoizkqFUDkUReUL25xdrCljJs7uLUF3tZ7nVPeo/6lp+6w==", + "version": "15.2.0", + "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.0.tgz", + "integrity": "sha512-TFZzUEV00f+2YLaVPWBWGAMq7So6yQx+GG8YRMDeOEIf95Zn5RyiLMsEiX4KTNl9vq/w+NqRJkLA1kPIo15ufQ==", "dev": true, "requires": { - "cli-truncate": "^3.1.0", - "colorette": "^2.0.19", - "commander": "^9.4.1", - "debug": "^4.3.4", - "execa": "^6.1.0", - "lilconfig": "2.0.6", - "listr2": "^5.0.5", - "micromatch": "^4.0.5", - "normalize-path": "^3.0.0", - "object-inspect": "^1.12.2", - "pidtree": "^0.6.0", - "string-argv": "^0.3.1", - "yaml": "^2.1.3" + "chalk": "5.3.0", + "commander": "11.1.0", + "debug": "4.3.4", + "execa": "8.0.1", + "lilconfig": "3.0.0", + "listr2": "8.0.0", + "micromatch": "4.0.5", + "pidtree": "0.6.0", + "string-argv": "0.3.2", + "yaml": "2.3.4" }, "dependencies": { + "chalk": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz", + "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==", + "dev": true + }, "commander": { - "version": "9.5.0", - "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", - "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz", + "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==", "dev": true }, "execa": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/execa/-/execa-6.1.0.tgz", - "integrity": "sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz", + "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==", "dev": true, "requires": { "cross-spawn": "^7.0.3", - "get-stream": "^6.0.1", - "human-signals": "^3.0.1", + "get-stream": "^8.0.1", + "human-signals": "^5.0.0", "is-stream": "^3.0.0", "merge-stream": "^2.0.0", "npm-run-path": "^5.1.0", "onetime": "^6.0.0", - "signal-exit": "^3.0.7", + "signal-exit": "^4.1.0", "strip-final-newline": "^3.0.0" } }, + "get-stream": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz", + "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==", + "dev": true + }, "human-signals": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-3.0.1.tgz", - "integrity": "sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz", + "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==", "dev": true }, "is-stream": { @@ -56351,6 +56615,12 @@ "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==", "dev": true }, + "lilconfig": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz", + "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==", + "dev": true + }, "mimic-fn": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz", @@ -56358,9 +56628,9 @@ "dev": true }, "npm-run-path": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.1.0.tgz", - "integrity": "sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz", + "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==", "dev": true, "requires": { "path-key": "^4.0.0" @@ -56375,6 +56645,12 @@ "mimic-fn": "^4.0.0" } }, + "signal-exit": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true + }, "strip-final-newline": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz", @@ -56382,9 +56658,9 @@ "dev": true }, "yaml": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.2.2.tgz", - "integrity": "sha512-CBKFWExMn46Foo4cldiChEzn7S7SRV+wqiluAb6xmueD/fGyRHIhX8m14vVGgeFWjN540nKCNVj6P21eQjgTuA==", + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", "dev": true } } @@ -56847,76 +57123,138 @@ } }, "listr2": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/listr2/-/listr2-5.0.8.tgz", - "integrity": "sha512-mC73LitKHj9w6v30nLNGPetZIlfpUniNSsxxrbaPcWOjDb92SHPzJPi/t+v1YC/lxKz/AJ9egOjww0qUuFxBpA==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.0.0.tgz", + "integrity": "sha512-u8cusxAcyqAiQ2RhYvV7kRKNLgUvtObIbhOX2NCXqvp1UU32xIg5CT22ykS2TPKJXZWJwtK3IKLiqAGlGNE+Zg==", "dev": true, "requires": { - "cli-truncate": "^2.1.0", - "colorette": "^2.0.19", - "log-update": "^4.0.0", - "p-map": "^4.0.0", + "cli-truncate": "^4.0.0", + "colorette": "^2.0.20", + "eventemitter3": "^5.0.1", + "log-update": "^6.0.0", "rfdc": "^1.3.0", - "rxjs": "^7.8.0", - "through": "^2.3.8", - "wrap-ansi": "^7.0.0" + "wrap-ansi": "^9.0.0" }, "dependencies": { - "cli-truncate": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-2.1.0.tgz", - "integrity": "sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==", + "ansi-escapes": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.0.tgz", + "integrity": "sha512-kzRaCqXnpzWs+3z5ABPQiVke+iq0KXkHo8xiWV4RPTi5Yli0l97BEQuhXV1s7+aSU/fu1kUuxgS4MsQ0fRuygw==", "dev": true, "requires": { - "slice-ansi": "^3.0.0", - "string-width": "^4.2.0" + "type-fest": "^3.0.0" + } + }, + "ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==", + "dev": true + }, + "ansi-styles": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", + "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true + }, + "cli-cursor": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz", + "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==", + "dev": true, + "requires": { + "restore-cursor": "^4.0.0" + } + }, + "emoji-regex": { + "version": "10.3.0", + "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz", + "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==", + "dev": true + }, + "eventemitter3": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz", + "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==", + "dev": true + }, + "is-fullwidth-code-point": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz", + "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==", + "dev": true, + "requires": { + "get-east-asian-width": "^1.0.0" } }, "log-update": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.0.0.tgz", + "integrity": "sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==", + "dev": true, + "requires": { + "ansi-escapes": "^6.2.0", + "cli-cursor": "^4.0.0", + "slice-ansi": "^7.0.0", + "strip-ansi": "^7.1.0", + "wrap-ansi": "^9.0.0" + } + }, + "restore-cursor": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/log-update/-/log-update-4.0.0.tgz", - "integrity": "sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==", + "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz", + "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==", "dev": true, "requires": { - "ansi-escapes": "^4.3.0", - "cli-cursor": "^3.1.0", - "slice-ansi": "^4.0.0", - "wrap-ansi": "^6.2.0" - }, - "dependencies": { - "slice-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", - "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" - } - }, - "wrap-ansi": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", - "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==", - "dev": true, - "requires": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - } - } + "onetime": "^5.1.0", + "signal-exit": "^3.0.2" } }, "slice-ansi": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-3.0.0.tgz", - "integrity": "sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz", + "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==", "dev": true, "requires": { - "ansi-styles": "^4.0.0", - "astral-regex": "^2.0.0", - "is-fullwidth-code-point": "^3.0.0" + "ansi-styles": "^6.2.1", + "is-fullwidth-code-point": "^5.0.0" + } + }, + "string-width": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz", + "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==", + "dev": true, + "requires": { + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" + } + }, + "strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, + "requires": { + "ansi-regex": "^6.0.1" + } + }, + "type-fest": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", + "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==", + "dev": true + }, + "wrap-ansi": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz", + "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==", + "dev": true, + "requires": { + "ansi-styles": "^6.2.1", + "string-width": "^7.0.0", + "strip-ansi": "^7.1.0" } } } @@ -57176,9 +57514,9 @@ "dev": true }, "magic-string": { - "version": "0.30.7", - "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.7.tgz", - "integrity": "sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==", + "version": "0.30.8", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz", + "integrity": "sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==", "requires": { "@jridgewell/sourcemap-codec": "^1.4.15" }, @@ -57265,7 +57603,8 @@ "map-obj": { "version": "1.0.1", "resolved": "https://registry.yarnpkg.com/map-obj/-/map-obj-1.0.1.tgz", - "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0= sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==" + "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0= sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==", + "dev": true }, "map-or-similar": { "version": "1.5.0", @@ -58277,7 +58616,8 @@ "min-indent": { "version": "1.0.1", "resolved": "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz", - "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk= sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==" + "integrity": "sha1-pj9oFnOzBXH76LwlaGrnRu76mGk= sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==", + "dev": true }, "minimatch": { "version": "3.1.2", @@ -58308,6 +58648,7 @@ "version": "4.1.0", "resolved": "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz", "integrity": "sha1-wGVXE8U6ii69d/+iR9NCxA8BBhk= sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==", + "dev": true, "requires": { "arrify": "^1.0.1", "is-plain-obj": "^1.1.0", @@ -60407,15 +60748,15 @@ "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==" }, "postcss-safe-parser": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz", - "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz", + "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==", "requires": {} }, "postcss-selector-parser": { - "version": "6.0.13", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz", - "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==", + "version": "6.0.15", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz", + "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==", "requires": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -60450,9 +60791,9 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==" }, "prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", "dev": true }, "prettier-linter-helpers": { @@ -60465,13 +60806,13 @@ } }, "prettier-plugin-astro": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.10.0.tgz", - "integrity": "sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==", + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/prettier-plugin-astro/-/prettier-plugin-astro-0.13.0.tgz", + "integrity": "sha512-5HrJNnPmZqTUNoA97zn4gNQv9BgVhv+et03314WpQ9H9N8m2L9OSV798olwmG2YLXPl1iSstlJCR1zB3x5xG4g==", "dev": true, "requires": { - "@astrojs/compiler": "^1.5.0", - "prettier": "^2.8.8", + "@astrojs/compiler": "^1.5.5", + "prettier": "^3.0.0", "sass-formatter": "^0.7.6" }, "dependencies": { @@ -61568,6 +61909,12 @@ "@babel/runtime": "^7.8.4" } }, + "regexp-tree": { + "version": "0.1.27", + "resolved": "https://registry.npmjs.org/regexp-tree/-/regexp-tree-0.1.27.tgz", + "integrity": "sha512-iETxpjK6YoRWJG5o6hXLwvjYAoW+FEZn9os0PD/b6AP6xQwsa/Y7lCVgIixBbUPMfhu+i2LtdeAqVTgGlQarfA==", + "dev": true + }, "regexp.prototype.flags": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz", @@ -62366,9 +62713,9 @@ "integrity": "sha1-kNo4Kx4SbvwCFG6QhFqI2xKSXXY= sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==" }, "rfdc": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.0.tgz", - "integrity": "sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz", + "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==", "dev": true }, "rimraf": { @@ -62480,6 +62827,15 @@ "resolved": "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz", "integrity": "sha1-Hq+fqb2x/dTsdfWPnNtOa3gn7sY= sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==" }, + "safe-regex": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-2.1.1.tgz", + "integrity": "sha512-rx+x8AMzKb5Q5lQ95Zoi6ZbJqwCLkqi3XuJXp5P3rT8OEc6sZCJG5AE5dU3lsgRr/F4Bs31jSlVN+j5KrsGu9A==", + "dev": true, + "requires": { + "regexp-tree": "~0.1.1" + } + }, "safe-regex-test": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz", @@ -63062,6 +63418,7 @@ "version": "3.1.1", "resolved": "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz", "integrity": "sha1-3s6BrJweZxPl99G28X1Gj6U9iak= sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", + "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", "spdx-license-ids": "^3.0.0" @@ -63070,12 +63427,14 @@ "spdx-exceptions": { "version": "2.3.0", "resolved": "https://registry.yarnpkg.com/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz", - "integrity": "sha1-PyjOGnegA3JoPq3kpDMYNSeiFj0= sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==" + "integrity": "sha1-PyjOGnegA3JoPq3kpDMYNSeiFj0= sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==", + "dev": true }, "spdx-expression-parse": { "version": "3.0.1", "resolved": "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", "integrity": "sha1-z3D1BILu/cmOPOCmgz5KU87rpnk= sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", + "dev": true, "requires": { "spdx-exceptions": "^2.1.0", "spdx-license-ids": "^3.0.0" @@ -63084,7 +63443,8 @@ "spdx-license-ids": { "version": "3.0.11", "resolved": "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz", - "integrity": "sha1-UMDYxAoU7Bv0Sbrmmg6kaFqdn5U= sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==" + "integrity": "sha1-UMDYxAoU7Bv0Sbrmmg6kaFqdn5U= sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==", + "dev": true }, "spdx-ranges": { "version": "2.1.0", @@ -63297,9 +63657,9 @@ } }, "string-argv": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.1.tgz", - "integrity": "sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==", + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz", + "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==", "dev": true }, "string-hash": { @@ -63508,11 +63868,6 @@ "through": "^2.3.4" } }, - "style-search": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz", - "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==" - }, "style-to-object": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-0.4.4.tgz", @@ -63523,82 +63878,69 @@ } }, "stylelint": { - "version": "15.11.0", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz", - "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==", - "requires": { - "@csstools/css-parser-algorithms": "^2.3.1", - "@csstools/css-tokenizer": "^2.2.0", - "@csstools/media-query-list-parser": "^2.1.4", - "@csstools/selector-specificity": "^3.0.0", + "version": "16.2.1", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.2.1.tgz", + "integrity": "sha512-SfIMGFK+4n7XVAyv50CpVfcGYWG4v41y6xG7PqOgQSY8M/PgdK0SQbjWFblxjJZlN9jNq879mB4BCZHJRIJ1hA==", + "requires": { + "@csstools/css-parser-algorithms": "^2.5.0", + "@csstools/css-tokenizer": "^2.2.3", + "@csstools/media-query-list-parser": "^2.1.7", + "@csstools/selector-specificity": "^3.0.1", "balanced-match": "^2.0.0", "colord": "^2.9.3", - "cosmiconfig": "^8.2.0", + "cosmiconfig": "^9.0.0", "css-functions-list": "^3.2.1", "css-tree": "^2.3.1", "debug": "^4.3.4", - "fast-glob": "^3.3.1", + "fast-glob": "^3.3.2", "fastest-levenshtein": "^1.0.16", - "file-entry-cache": "^7.0.0", + "file-entry-cache": "^8.0.0", "global-modules": "^2.0.0", "globby": "^11.1.0", "globjoin": "^0.1.4", "html-tags": "^3.3.1", - "ignore": "^5.2.4", - "import-lazy": "^4.0.0", + "ignore": "^5.3.0", "imurmurhash": "^0.1.4", "is-plain-object": "^5.0.0", "known-css-properties": "^0.29.0", "mathml-tag-names": "^2.1.3", - "meow": "^10.1.5", + "meow": "^13.1.0", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.28", + "postcss": "^8.4.33", "postcss-resolve-nested-selector": "^0.1.1", - "postcss-safe-parser": "^6.0.0", - "postcss-selector-parser": "^6.0.13", + "postcss-safe-parser": "^7.0.0", + "postcss-selector-parser": "^6.0.15", "postcss-value-parser": "^4.2.0", "resolve-from": "^5.0.0", "string-width": "^4.2.3", - "strip-ansi": "^6.0.1", - "style-search": "^0.1.0", + "strip-ansi": "^7.1.0", "supports-hyperlinks": "^3.0.0", "svg-tags": "^1.0.0", "table": "^6.8.1", "write-file-atomic": "^5.0.1" }, "dependencies": { + "ansi-regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz", + "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==" + }, "balanced-match": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz", "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==" }, - "camelcase": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", - "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==" - }, - "camelcase-keys": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz", - "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==", - "requires": { - "camelcase": "^6.3.0", - "map-obj": "^4.1.0", - "quick-lru": "^5.1.1", - "type-fest": "^1.2.1" - } - }, "cosmiconfig": { - "version": "8.2.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.2.0.tgz", - "integrity": "sha512-3rTMnFJA1tCOPwRxtgF4wd7Ab2qvDbL8jX+3smjIbS4HlZBagTlpERbdN7iAbWlrfxE3M8c27kTwTawQ7st+OQ==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz", + "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", "requires": { - "import-fresh": "^3.2.1", + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", - "parse-json": "^5.0.0", - "path-type": "^4.0.0" + "parse-json": "^5.2.0" } }, "css-tree": { @@ -63610,36 +63952,23 @@ "source-map-js": "^1.0.1" } }, - "decamelize": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz", - "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==" - }, - "fast-glob": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", - "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==", + "file-entry-cache": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", + "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==", "requires": { - "@nodelib/fs.stat": "^2.0.2", - "@nodelib/fs.walk": "^1.2.3", - "glob-parent": "^5.1.2", - "merge2": "^1.3.0", - "micromatch": "^4.0.4" + "flat-cache": "^4.0.0" } }, - "file-entry-cache": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz", - "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==", + "flat-cache": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz", + "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==", "requires": { - "flat-cache": "^3.2.0" + "flatted": "^3.2.9", + "keyv": "^4.5.4" } }, - "indent-string": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz", - "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==" - }, "js-yaml": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", @@ -63648,104 +63977,29 @@ "argparse": "^2.0.1" } }, - "map-obj": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz", - "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==" - }, "mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" }, "meow": { - "version": "10.1.5", - "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz", - "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==", - "requires": { - "@types/minimist": "^1.2.2", - "camelcase-keys": "^7.0.0", - "decamelize": "^5.0.0", - "decamelize-keys": "^1.1.0", - "hard-rejection": "^2.1.0", - "minimist-options": "4.1.0", - "normalize-package-data": "^3.0.2", - "read-pkg-up": "^8.0.0", - "redent": "^4.0.0", - "trim-newlines": "^4.0.2", - "type-fest": "^1.2.2", - "yargs-parser": "^20.2.9" - } - }, - "normalize-package-data": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz", - "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==", - "requires": { - "hosted-git-info": "^4.0.1", - "is-core-module": "^2.5.0", - "semver": "^7.3.4", - "validate-npm-package-license": "^3.0.1" - } - }, - "quick-lru": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", - "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==" - }, - "read-pkg": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz", - "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==", - "requires": { - "@types/normalize-package-data": "^2.4.0", - "normalize-package-data": "^3.0.2", - "parse-json": "^5.2.0", - "type-fest": "^1.0.1" - } - }, - "read-pkg-up": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz", - "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==", - "requires": { - "find-up": "^5.0.0", - "read-pkg": "^6.0.0", - "type-fest": "^1.0.1" - } - }, - "redent": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz", - "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==", - "requires": { - "indent-string": "^5.0.0", - "strip-indent": "^4.0.0" - } + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz", + "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==" }, "signal-exit": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.0.2.tgz", - "integrity": "sha512-MY2/qGx4enyjprQnFaZsHib3Yadh3IXyV2C321GY0pjGfVBu4un0uDJkwgdxqO+Rdx8JMT8IfJIRwbYVz3Ob3Q==" + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", + "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==" }, - "strip-indent": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.0.0.tgz", - "integrity": "sha512-mnVSV2l+Zv6BLpSD/8V87CW/y9EmmbYzGCIavsnsI6/nwn26DwffM/yztm30Z/I2DY9wdS3vXVCMnHDgZaVNoA==", + "strip-ansi": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", + "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", "requires": { - "min-indent": "^1.0.1" + "ansi-regex": "^6.0.1" } }, - "trim-newlines": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz", - "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==" - }, - "type-fest": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz", - "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==" - }, "write-file-atomic": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-5.0.1.tgz", @@ -63758,48 +64012,47 @@ } }, "stylelint-config-recess-order": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-4.4.0.tgz", - "integrity": "sha512-Q99kvZyIM/aoPEV4dRDkzD3fZLzH0LXi+pawCf1r700uUeF/PHQ5PZXjwFUuGrWhOzd1N+cuVm+OUGsY2fRN5A==", + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-5.0.0.tgz", + "integrity": "sha512-D+/Got844O96No2mj/H2NhLjj555iKAy/Mea+JCerfKB9TBKQW3/IudSVkTCxE4QiRDLldfH15x6FH1D1Anjhw==", "dev": true, "requires": { - "stylelint-order": "6.x" + "stylelint-order": "^6.0.4" } }, "stylelint-config-recommended": { - "version": "13.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz", - "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-14.0.0.tgz", + "integrity": "sha512-jSkx290CglS8StmrLp2TxAppIajzIBZKYm3IxT89Kg6fGlxbPiTiyH9PS5YUuVAFwaJLl1ikiXX0QWjI0jmgZQ==", "dev": true, "requires": {} }, "stylelint-config-standard": { - "version": "34.0.0", - "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-34.0.0.tgz", - "integrity": "sha512-u0VSZnVyW9VSryBG2LSO+OQTjN7zF9XJaAJRX/4EwkmU0R2jYwmBSN10acqZisDitS0CLiEiGjX7+Hrq8TAhfQ==", + "version": "36.0.0", + "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-36.0.0.tgz", + "integrity": "sha512-3Kjyq4d62bYFp/Aq8PMKDwlgUyPU4nacXsjDLWJdNPRUgpuxALu1KnlAHIj36cdtxViVhXexZij65yM0uNIHug==", "dev": true, "requires": { - "stylelint-config-recommended": "^13.0.0" + "stylelint-config-recommended": "^14.0.0" } }, "stylelint-no-unsupported-browser-features": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-7.0.0.tgz", - "integrity": "sha512-O5VYlBhr+lpJ6jeTJSy+SMbHJhW5h5EJxsoicYcTi/07m45V/CF1mQidwRQLjv8y9BFQMpioWz60O89IkmbaNw==", + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/stylelint-no-unsupported-browser-features/-/stylelint-no-unsupported-browser-features-8.0.1.tgz", + "integrity": "sha512-tc8Xn5DaqJhxTmbA4H8gZbYdAz027NfuSZv5+cVieQb7BtBrF/1/iKYdpcGwXPl3GtqkQrisiXuGqKkKnzWcLw==", "dev": true, "requires": { - "doiuse": "^6.0.1", - "lodash": "^4.17.15", - "postcss": "^8.4.16" + "doiuse": "^6.0.2", + "postcss": "^8.4.32" } }, "stylelint-order": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.3.tgz", - "integrity": "sha512-1j1lOb4EU/6w49qZeT2SQVJXm0Ht+Qnq9GMfUa3pMwoyojIWfuA+JUDmoR97Bht1RLn4ei0xtLGy87M7d29B1w==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz", + "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==", "dev": true, "requires": { - "postcss": "^8.4.21", + "postcss": "^8.4.32", "postcss-sorting": "^8.0.2" } }, @@ -63979,6 +64232,16 @@ "integrity": "sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==", "dev": true }, + "synckit": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", + "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "dev": true, + "requires": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + } + }, "table": { "version": "6.8.1", "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz", @@ -64377,9 +64640,9 @@ "requires": {} }, "tsconfig-paths": { - "version": "3.14.2", - "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz", - "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==", + "version": "3.15.0", + "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz", + "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==", "dev": true, "requires": { "@types/json5": "^0.0.29", @@ -64400,9 +64663,9 @@ } }, "tslib": { - "version": "2.5.0", - "resolved": "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz", - "integrity": "sha1-Qr/thvV4eutB0DGGbI9AJCng/d8= sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", "devOptional": true }, "tsutils": { @@ -65017,6 +65280,7 @@ "version": "3.0.4", "resolved": "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", "integrity": "sha1-/JH2uce6FchX9MssXe/uw51PQQo= sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==", + "dev": true, "requires": { "spdx-correct": "^3.0.0", "spdx-expression-parse": "^3.0.0" @@ -65826,7 +66090,8 @@ "yargs-parser": { "version": "20.2.9", "resolved": "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.9.tgz", - "integrity": "sha1-LrfcOwKJcY/ClfNidThFxBoMlO4= sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" + "integrity": "sha1-LrfcOwKJcY/ClfNidThFxBoMlO4= sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", + "dev": true }, "yauzl": { "version": "2.10.0", diff --git a/package.json b/package.json index cbc3fc511a..42cb977185 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "devDependencies": { "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.1", + "@emotion/eslint-plugin": "^11.11.0", "@storybook/addon-a11y": "^7.6.7", "@storybook/addon-actions": "^7.6.7", "@storybook/addon-controls": "^7.6.7", @@ -55,7 +56,7 @@ "@storybook/testing-library": "^0.2.2", "@storybook/theming": "^7.6.7", "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/foundry": "^6.2.0", + "@sumup/foundry": "^7.0.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", "@types/node": "^18.16.19", "@vitest/coverage-c8": "^0.33.0", @@ -63,30 +64,28 @@ "audit-ci": "^6.6.1", "chromatic": "^10.3.1", "eslint-import-resolver-typescript": "^3.6.1", - "eslint-plugin-prettier": "^4.2.1", + "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-react-server-components": "^1.1.2", "eslint-plugin-storybook": "^0.6.15", + "eslint-plugin-testing-library": "^6.2.0", "github-slugger": "^2.0.0", "jsdom": "^23.2.0", "lerna": "^8.0.2", "license-checker": "^25.0.1", - "prettier-plugin-astro": "0.10.0", + "prettier-plugin-astro": "^0.13.0", "react": "^18.2.0", "react-dom": "^18.2.0", "remark-gfm": "^3.0.1", "storybook": "^7.6.7", - "stylelint": "^15.10.2", - "stylelint-config-recess-order": "^4.4.0", - "stylelint-config-standard": "^34.0.0", - "stylelint-no-unsupported-browser-features": "^7.0.0", + "stylelint": "^16.0.0", + "stylelint-config-recess-order": "^5.0.0", + "stylelint-config-standard": "^36.0.0", + "stylelint-no-unsupported-browser-features": "^8.0.0", "svgo": "^3.2.0", "typescript": "^5.3.3", "vite": "^4.5.2", "vite-plugin-turbosnap": "^1.0.2", "vitest": "^0.34.6", "vitest-github-actions-reporter": "^0.11.1" - }, - "resolutions": { - "prettier": "^2.6.2" } } diff --git a/packages/astro-template/package.json b/packages/astro-template/package.json index 48d8a6719b..70b353b9b3 100644 --- a/packages/astro-template/package.json +++ b/packages/astro-template/package.json @@ -28,8 +28,8 @@ }, "devDependencies": { "@sumup/eslint-plugin-circuit-ui": "^4.0.0", - "@sumup/foundry": "^6.2.0", + "@sumup/foundry": "^7.0.0", "@sumup/stylelint-plugin-circuit-ui": "^1.0.0", - "prettier-plugin-astro": "0.10.0" + "prettier-plugin-astro": "^0.13.0" } } diff --git a/packages/circuit-ui/components/Avatar/Avatar.spec.tsx b/packages/circuit-ui/components/Avatar/Avatar.spec.tsx index 2550e93092..840c196b34 100644 --- a/packages/circuit-ui/components/Avatar/Avatar.spec.tsx +++ b/packages/circuit-ui/components/Avatar/Avatar.spec.tsx @@ -51,8 +51,8 @@ describe('Avatar', () => { }); it('should have role=img and an accessible name', () => { - const { getByRole } = renderAvatar({ alt: altText }); - const avatarEl = getByRole('img'); + renderAvatar({ alt: altText }); + const avatarEl = screen.getByRole('img'); expect(avatarEl).toHaveAccessibleName(altText); }); }); @@ -65,9 +65,9 @@ describe('Avatar', () => { }); it('should not be in the accessibility tree', () => { - const { queryByRole, container } = renderAvatar(); + const { container } = renderAvatar(); - const avatarWithAlternativeText = queryByRole('img'); + const avatarWithAlternativeText = screen.queryByRole('img'); expect(avatarWithAlternativeText).not.toBeInTheDocument(); const avatarEl = container.querySelector('[aria-hidden=true]'); diff --git a/packages/circuit-ui/components/Button/IconButton.spec.tsx b/packages/circuit-ui/components/Button/IconButton.spec.tsx index 10d3d5a9c0..7b4d1a1d1c 100644 --- a/packages/circuit-ui/components/Button/IconButton.spec.tsx +++ b/packages/circuit-ui/components/Button/IconButton.spec.tsx @@ -36,6 +36,7 @@ describe('IconButton', () => { */ it('should render an icon passed as children', () => { render( + // eslint-disable-next-line @sumup/circuit-ui/no-renamed-props , diff --git a/packages/circuit-ui/components/Button/IconButton.stories.tsx b/packages/circuit-ui/components/Button/IconButton.stories.tsx index 93c4321fe1..03c79e8eab 100644 --- a/packages/circuit-ui/components/Button/IconButton.stories.tsx +++ b/packages/circuit-ui/components/Button/IconButton.stories.tsx @@ -25,7 +25,9 @@ export default { component: IconButton, }; -export const Base = (args: IconButtonProps) => ; +export const Base = (args: IconButtonProps) => ( + +); Base.args = { children: 'Add', @@ -34,9 +36,15 @@ Base.args = { export const Variants = (args: IconButtonProps) => ( - - - + + Primary + + + Secondary + + + Tertiary + ); @@ -46,10 +54,10 @@ Variants.args = { export const Sizes = (args: IconButtonProps) => ( - + Small - + Medium diff --git a/packages/circuit-ui/components/Card/components/Header/Header.spec.tsx b/packages/circuit-ui/components/Card/components/Header/Header.spec.tsx index d78a650be0..5182b45d79 100644 --- a/packages/circuit-ui/components/Card/components/Header/Header.spec.tsx +++ b/packages/circuit-ui/components/Card/components/Header/Header.spec.tsx @@ -15,7 +15,7 @@ import { describe, expect, it, vi } from 'vitest'; -import { render, axe, userEvent } from '../../../../util/test-utils.js'; +import { render, axe, userEvent, screen } from '../../../../util/test-utils.js'; import { CardHeader } from './Header.js'; @@ -23,12 +23,12 @@ describe('CardHeader', () => { const children =

This is a content.

; it('should render a close button when an onClose prop is passed', () => { - const { getByRole } = render( + render( {children} , ); - const closeButton = getByRole('button'); + const closeButton = screen.getByRole('button'); expect(closeButton).toBeVisible(); }); @@ -36,12 +36,12 @@ describe('CardHeader', () => { it('should call the onClose prop when the close button is clicked', async () => { const onClose = vi.fn(); - const { getByRole } = render( + render( {children} , ); - const closeButton = getByRole('button'); + const closeButton = screen.getByRole('button'); await userEvent.click(closeButton); diff --git a/packages/circuit-ui/components/Carousel/Carousel.spec.tsx b/packages/circuit-ui/components/Carousel/Carousel.spec.tsx index 37b92c7799..515d8a6b99 100644 --- a/packages/circuit-ui/components/Carousel/Carousel.spec.tsx +++ b/packages/circuit-ui/components/Carousel/Carousel.spec.tsx @@ -15,7 +15,7 @@ import { describe, expect, it, vi } from 'vitest'; -import { axe, render } from '../../util/test-utils.js'; +import { axe, render, screen } from '../../util/test-utils.js'; import { Carousel } from './Carousel.js'; import { SLIDES } from './__fixtures__/index.js'; @@ -46,13 +46,13 @@ describe('Carousel', () => { }); it('should render with children as a node', () => { - const { getByRole } = render( + render(

Carousel heading

, ); - expect(getByRole('heading')).toHaveTextContent('Carousel heading'); + expect(screen.getByRole('heading')).toHaveTextContent('Carousel heading'); }); it('should have no accessibility violations', async () => { diff --git a/packages/circuit-ui/components/Carousel/components/Status/Status.spec.tsx b/packages/circuit-ui/components/Carousel/components/Status/Status.spec.tsx index 4afba5ce80..6496ae380f 100644 --- a/packages/circuit-ui/components/Carousel/components/Status/Status.spec.tsx +++ b/packages/circuit-ui/components/Carousel/components/Status/Status.spec.tsx @@ -15,15 +15,15 @@ import { describe, expect, it } from 'vitest'; -import { axe, render } from '../../../../util/test-utils.js'; +import { axe, render, screen } from '../../../../util/test-utils.js'; import { Status } from './Status.js'; describe('Status', () => { it('should render the status', () => { - const { getByText } = render(); + render(); - expect(getByText('2 / 3')).toBeVisible(); + expect(screen.getByText('2 / 3')).toBeVisible(); }); it('should have no accessibility violations', async () => { diff --git a/packages/circuit-ui/components/ComponentsContext/components/Link/Link.spec.tsx b/packages/circuit-ui/components/ComponentsContext/components/Link/Link.spec.tsx index 2e3e51b799..a5a93dcb00 100644 --- a/packages/circuit-ui/components/ComponentsContext/components/Link/Link.spec.tsx +++ b/packages/circuit-ui/components/ComponentsContext/components/Link/Link.spec.tsx @@ -16,7 +16,7 @@ import { describe, expect, it } from 'vitest'; import { createRef } from 'react'; -import { render, axe } from '../../../../util/test-utils.js'; +import { render, axe, screen } from '../../../../util/test-utils.js'; import { Link } from './Link.js'; @@ -47,8 +47,8 @@ describe('Link', () => { describe('styles', () => { it('should render with the attributes it receives', () => { - const { getByTestId } = render(); - const linkEl = getByTestId('link'); + render(); + const linkEl = screen.getByTestId('link'); expect(linkEl).toHaveAttribute('href', defaultProps.href); expect(linkEl).toHaveAttribute('target', defaultProps.target); diff --git a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx index e7e7505605..3038a75f7c 100644 --- a/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx +++ b/packages/circuit-ui/components/CurrencyInput/CurrencyInput.spec.tsx @@ -16,7 +16,7 @@ import { describe, expect, it } from 'vitest'; import { ChangeEvent, createRef, useState } from 'react'; -import { render, userEvent, axe } from '../../util/test-utils.js'; +import { render, userEvent, axe, screen } from '../../util/test-utils.js'; import type { InputElement } from '../Input/index.js'; import { CurrencyInput, CurrencyInputProps } from './CurrencyInput.js'; @@ -31,17 +31,15 @@ const defaultProps = { describe('CurrencyInput', () => { it('should forward a ref', () => { const ref = createRef(); - const { getByRole } = render(); - const input = getByRole('textbox'); + render(); + const input: HTMLInputElement = screen.getByRole('textbox'); expect(ref.current).toBe(input); }); it('should format a en-GB amount correctly', async () => { - const { getByRole } = render( - , - ); + render(); - const input = getByRole('textbox') as HTMLInputElement; + const input: HTMLInputElement = screen.getByRole('textbox'); await userEvent.type(input, '1234.56'); @@ -49,11 +47,9 @@ describe('CurrencyInput', () => { }); it('should format a de-DE amount correctly', async () => { - const { getByRole } = render( - , - ); + render(); - const input = getByRole('textbox') as HTMLInputElement; + const input: HTMLInputElement = screen.getByRole('textbox'); await userEvent.type(input, '1234,56'); @@ -73,9 +69,9 @@ describe('CurrencyInput', () => { /> ); }; - const { getByRole } = render(); + render(); - const input = getByRole('textbox') as HTMLInputElement; + const input: HTMLInputElement = screen.getByRole('textbox'); expect(input.value).toBe('1.234,5'); await userEvent.clear(input); @@ -96,8 +92,8 @@ describe('CurrencyInput', () => { * Note: further labeling logic is covered by the underlying `Input` component. */ it('should have the currency symbol as part of its accessible description', () => { - const { getByRole } = render(); - expect(getByRole('textbox')).toHaveAccessibleDescription( + render(); + expect(screen.getByRole('textbox')).toHaveAccessibleDescription( EUR_CURRENCY_SYMBOL, ); }); @@ -105,7 +101,7 @@ describe('CurrencyInput', () => { it('should accept a custom description via aria-describedby', () => { const customDescription = 'Custom description'; const customDescriptionId = 'customDescriptionId'; - const { getByRole } = render( + render( <> {customDescription} { /> , ); - expect(getByRole('textbox')).toHaveAccessibleDescription( + expect(screen.getByRole('textbox')).toHaveAccessibleDescription( `${EUR_CURRENCY_SYMBOL} ${customDescription}`, ); }); diff --git a/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx b/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx index 047884ade7..3ec7af2da5 100644 --- a/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx +++ b/packages/circuit-ui/components/Hamburger/Hamburger.spec.tsx @@ -50,11 +50,11 @@ describe('Hamburger', () => { it('should call the onClick prop when clicked', async () => { const onClick = vi.fn(); - const { getByTestId } = render( + render( , ); - await userEvent.click(getByTestId('hamburger')); + await userEvent.click(screen.getByTestId('hamburger')); expect(onClick).toHaveBeenCalledTimes(1); }); diff --git a/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx b/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx index cabaf3d239..9ab5228829 100644 --- a/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx +++ b/packages/circuit-ui/components/ImageInput/ImageInput.spec.tsx @@ -24,6 +24,7 @@ import { fireEvent, waitFor, createEvent, + screen, } from '../../util/test-utils.js'; import { ImageInput, ImageInputProps } from './ImageInput.js'; @@ -84,24 +85,27 @@ describe('ImageInput', () => { const file = new File(['avatar'], 'avatar.png', { type: 'image/png' }); it('should call the provided upload function', async () => { - const { getByLabelText } = render(); - const inputEl = getByLabelText(defaultProps.label) as HTMLInputElement; + render(); + const inputEl: HTMLInputElement = screen.getByLabelText( + defaultProps.label, + ); await userEvent.upload(inputEl, file); await waitFor(() => { expect(inputEl.files && inputEl.files[0]).toEqual(file); - expect(inputEl.files).toHaveLength(1); - expect(mockUploadFn).toHaveBeenCalledWith(file); }); + + expect(inputEl.files).toHaveLength(1); + expect(mockUploadFn).toHaveBeenCalledWith(file); }); /** * FIXME: this test triggers an act() warning. */ it('should support dragging and dropping an image', async () => { - const { getByText } = render(); - const labelEl = getByText(defaultProps.label); + render(); + const labelEl = screen.getByText(defaultProps.label); fireEvent.drop(labelEl, { dataTransfer: { files: [file] } }); @@ -114,8 +118,8 @@ describe('ImageInput', () => { * FIXME: this test triggers an act() warning. */ it('should support pasting an image', async () => { - const { getByLabelText } = render(); - const inputEl = getByLabelText(defaultProps.label) as HTMLInputElement; + render(); + const inputEl = screen.getByLabelText(defaultProps.label); const paste = createEvent.paste(inputEl, { clipboardData: { files: [file] }, @@ -129,8 +133,8 @@ describe('ImageInput', () => { }); it('should render a successfully uploaded image', async () => { - const { getByLabelText, container } = render(); - const inputEl = getByLabelText(defaultProps.label) as HTMLInputElement; + const { container } = render(); + const inputEl = screen.getByLabelText(defaultProps.label); await userEvent.upload(inputEl, file); @@ -142,10 +146,8 @@ describe('ImageInput', () => { }); it('should clear an uploaded image', async () => { - const { getByLabelText, getByRole, container } = render( - , - ); - const inputEl = getByLabelText(defaultProps.label) as HTMLInputElement; + const { container } = render(); + const inputEl = screen.getByLabelText(defaultProps.label); await userEvent.upload(inputEl, file); @@ -156,7 +158,7 @@ describe('ImageInput', () => { ); await userEvent.click( - getByRole('button', { name: defaultProps.clearButtonLabel }), + screen.getByRole('button', { name: defaultProps.clearButtonLabel }), ); await waitFor(() => { @@ -171,15 +173,15 @@ describe('ImageInput', () => { const errorMessage = 'The uploaded image exceeds the maximum allowed size. Please use an image with a size below 20MB.'; mockUploadFn.mockRejectedValue(new Error(errorMessage)); - const { getByLabelText, getByText } = render(); - const inputEl = getByLabelText(defaultProps.label) as HTMLInputElement; + render(); + const inputEl = screen.getByLabelText(defaultProps.label); await userEvent.upload(inputEl, file); await waitFor(() => { - expect(getByText(errorMessage)).toBeVisible(); - expect(inputEl).toBeInvalid(); + expect(screen.getByText(errorMessage)).toBeVisible(); }); + expect(inputEl).toBeInvalid(); }); }); @@ -192,18 +194,16 @@ describe('ImageInput', () => { describe('Labeling', () => { it('should have an accessible name', () => { - const { getByLabelText } = render(); - const inputEl = getByLabelText(defaultProps.label); // can't getByRole because input type=file is generic in jest-dom + render(); + const inputEl = screen.getByLabelText(defaultProps.label); // can't getByRole because input type=file is generic in jest-dom expect(inputEl).toHaveAccessibleName(defaultProps.label); }); it('should optionally have an accessible description', () => { const description = 'Description'; - const { getByLabelText } = render( - , - ); - const inputEl = getByLabelText(defaultProps.label); + render(); + const inputEl = screen.getByLabelText(defaultProps.label); expect(inputEl).toHaveAccessibleDescription(description); }); @@ -211,7 +211,7 @@ describe('ImageInput', () => { it('should accept a custom description via aria-describedby', () => { const customDescription = 'Custom description'; const customDescriptionId = 'customDescriptionId'; - const { getByLabelText } = render( + render( <> {customDescription} { , , ); - const inputEl = getByLabelText(defaultProps.label); + const inputEl = screen.getByLabelText(defaultProps.label); expect(inputEl).toHaveAttribute( 'aria-describedby', @@ -234,7 +234,7 @@ describe('ImageInput', () => { const customDescription = 'Custom description'; const customDescriptionId = 'customDescriptionId'; const description = 'Description'; - const { getByLabelText } = render( + render( <> {customDescription} { , , ); - const inputEl = getByLabelText(defaultProps.label); + const inputEl = screen.getByLabelText(defaultProps.label); expect(inputEl).toHaveAttribute( 'aria-describedby', @@ -259,32 +259,30 @@ describe('ImageInput', () => { describe('Status messages', () => { it('should render an empty live region on mount', () => { - const { getByRole } = render(); - const liveRegionEl = getByRole('status'); + render(); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toBeEmptyDOMElement(); }); it('should render status messages in a live region', () => { const statusMessage = 'This field is required'; - const { getByRole } = render( + render( , ); - const liveRegionEl = getByRole('status'); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toHaveTextContent(statusMessage); }); it('should not render descriptions in a live region', () => { const statusMessage = 'This field is required'; - const { getByRole } = render( - , - ); - const liveRegionEl = getByRole('status'); + render(); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toBeEmptyDOMElement(); }); diff --git a/packages/circuit-ui/components/Input/Input.spec.tsx b/packages/circuit-ui/components/Input/Input.spec.tsx index e60c34341c..902ffe6564 100644 --- a/packages/circuit-ui/components/Input/Input.spec.tsx +++ b/packages/circuit-ui/components/Input/Input.spec.tsx @@ -77,18 +77,16 @@ describe('Input', () => { describe('Labeling', () => { it('should have an accessible name', () => { - const { getByRole } = render(); - const inputEl = getByRole('textbox'); + render(); + const inputEl = screen.getByRole('textbox'); expect(inputEl).toHaveAccessibleName(defaultProps.label); }); it('should optionally have an accessible description', () => { const description = 'Description'; - const { getByRole } = render( - , - ); - const inputEl = getByRole('textbox'); + render(); + const inputEl = screen.getByRole('textbox'); expect(inputEl).toHaveAccessibleDescription(description); }); @@ -96,13 +94,13 @@ describe('Input', () => { it('should accept a custom description via aria-describedby', () => { const customDescription = 'Custom description'; const customDescriptionId = 'customDescriptionId'; - const { getByRole } = render( + render( <> {customDescription} , , ); - const inputEl = getByRole('textbox'); + const inputEl = screen.getByRole('textbox'); expect(inputEl).toHaveAttribute( 'aria-describedby', @@ -115,7 +113,7 @@ describe('Input', () => { const customDescription = 'Custom description'; const customDescriptionId = 'customDescriptionId'; const description = 'Description'; - const { getByRole } = render( + render( <> {customDescription} { , , ); - const inputEl = getByRole('textbox'); + const inputEl = screen.getByRole('textbox'); expect(inputEl).toHaveAttribute( 'aria-describedby', @@ -140,28 +138,26 @@ describe('Input', () => { describe('Status messages', () => { it('should render an empty live region on mount', () => { - const { getByRole } = render(); - const liveRegionEl = getByRole('status'); + render(); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toBeEmptyDOMElement(); }); it('should render status messages in a live region', () => { const statusMessage = 'This field is required'; - const { getByRole } = render( + render( , ); - const liveRegionEl = getByRole('status'); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toHaveTextContent(statusMessage); }); it('should not render descriptions in a live region', () => { const statusMessage = 'This field is required'; - const { getByRole } = render( - , - ); - const liveRegionEl = getByRole('status'); + render(); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toBeEmptyDOMElement(); }); diff --git a/packages/circuit-ui/components/ListItem/ListItem.spec.tsx b/packages/circuit-ui/components/ListItem/ListItem.spec.tsx index d299f29202..c8ceab0c38 100644 --- a/packages/circuit-ui/components/ListItem/ListItem.spec.tsx +++ b/packages/circuit-ui/components/ListItem/ListItem.spec.tsx @@ -174,9 +174,9 @@ describe('ListItem', () => { ...baseProps, onClick: vi.fn(), }; - const { getByRole } = renderListItem(render, props); + renderListItem(render, props); - await userEvent.click(getByRole('button')); + await userEvent.click(screen.getByRole('button')); expect(props.onClick).toHaveBeenCalledTimes(1); }); diff --git a/packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx b/packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx index 751cf002c3..66281bf23c 100644 --- a/packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx +++ b/packages/circuit-ui/components/ModalContext/ModalContext.spec.tsx @@ -21,6 +21,7 @@ import { act, userEvent as baseUserEvent, fireEvent, + screen, } from '../../util/test-utils.js'; import { ModalProvider, ModalContext } from './ModalContext.js'; @@ -76,13 +77,13 @@ describe('ModalContext', () => { // the simulated DOM environment of the unit tests. That's why we need to // set `ariaHideApp="false"`. This should not be done in production apps. it('should render the initial modals', () => { - const { getByRole } = render( + render(
, ); - expect(getByRole('dialog')).toBeVisible(); + expect(screen.getByRole('dialog')).toBeVisible(); }); it('should open and close a modal when the context functions are called', async () => { @@ -96,57 +97,55 @@ describe('ModalContext', () => { ); }; - const { getByRole, queryByRole } = render( + render( , ); - await userEvent.click(getByRole('button', { name: 'Open modal' })); + await userEvent.click(screen.getByRole('button', { name: 'Open modal' })); - expect(getByRole('dialog')).toBeVisible(); + expect(screen.getByRole('dialog')).toBeVisible(); - await userEvent.click(getByRole('button', { name: 'Close' })); + await userEvent.click(screen.getByRole('button', { name: 'Close' })); act(() => { vi.runAllTimers(); }); - expect(queryByRole('dialog')).toBeNull(); + expect(screen.queryByRole('dialog')).toBeNull(); }); it('should close the modal when the user navigates back', () => { - const { queryByRole } = render( + render(
, ); - act(() => { - fireEvent.popState(window); - }); + fireEvent.popState(window); act(() => { vi.runAllTimers(); }); - expect(queryByRole('dialog')).toBeNull(); + expect(screen.queryByRole('dialog')).toBeNull(); expect(onClose).toHaveBeenCalledTimes(1); }); it('should close the modal when the onClose method is called', async () => { - const { queryByRole } = render( + render(
, ); - const closeButton = queryByRole('button') as HTMLButtonElement; + const closeButton = screen.queryByRole('button') as HTMLButtonElement; await userEvent.click(closeButton); act(() => { vi.runAllTimers(); }); - expect(queryByRole('dialog')).toBeNull(); + expect(screen.queryByRole('dialog')).toBeNull(); expect(onClose).toHaveBeenCalledTimes(1); }); }); diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css index 00a149f47d..ec664d025c 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css +++ b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.module.css @@ -64,9 +64,9 @@ width: var(--notification-image-width); min-width: 0; height: auto; - border-radius: 0 var(--cui-border-radius-mega) var(--cui-border-radius-mega) 0; object-fit: contain; object-position: var(--notification-image-align); + border-radius: 0 var(--cui-border-radius-mega) var(--cui-border-radius-mega) 0; } .base .close { diff --git a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx index 1ce1490448..2c8c779659 100644 --- a/packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx +++ b/packages/circuit-ui/components/NotificationBanner/NotificationBanner.spec.tsx @@ -16,7 +16,7 @@ import { describe, expect, it, vi } from 'vitest'; import { createRef } from 'react'; -import { render, axe, userEvent } from '../../util/test-utils.js'; +import { render, axe, userEvent, screen } from '../../util/test-utils.js'; import { NotificationBanner, @@ -52,21 +52,21 @@ describe('NotificationBanner', () => { }); it('should call onClick when clicked', async () => { - const { getByRole } = renderNotificationBanner(baseProps); + renderNotificationBanner(baseProps); - await userEvent.click(getByRole('button')); + await userEvent.click(screen.getByRole('button')); expect(baseProps.action.onClick).toHaveBeenCalledTimes(1); }); it('should render a close button', () => { - const { getByRole } = renderNotificationBanner({ + renderNotificationBanner({ ...baseProps, onClose: vi.fn(), closeButtonLabel: 'Close notification', }); - expect(getByRole('button', { name: /close/i })).toBeVisible(); + expect(screen.getByRole('button', { name: /close/i })).toBeVisible(); }); it('should call onClose when closed', async () => { @@ -75,9 +75,9 @@ describe('NotificationBanner', () => { onClose: vi.fn(), closeButtonLabel: 'Close notification', }; - const { getByRole } = renderNotificationBanner(props); + renderNotificationBanner(props); - await userEvent.click(getByRole('button', { name: /close/i })); + await userEvent.click(screen.getByRole('button', { name: /close/i })); expect(props.onClose).toHaveBeenCalledTimes(1); }); diff --git a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx index e11487521f..177f8ed739 100644 --- a/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx +++ b/packages/circuit-ui/components/NotificationFullscreen/NotificationFullscreen.spec.tsx @@ -70,14 +70,14 @@ describe('NotificationFullscreen', () => { describe('heading levels', () => { it('should render with an h1 headline', () => { - const { getByRole } = renderNotificationFullscreen({ + renderNotificationFullscreen({ ...baseProps, headline: { label: 'Headline 1', as: 'h1', }, }); - const headingEl = getByRole('heading'); + const headingEl = screen.getByRole('heading'); expect(headingEl.tagName).toBe('H1'); }); }); @@ -85,28 +85,28 @@ describe('NotificationFullscreen', () => { describe('alternative text', () => { it('should add an alt attribute to an img element', () => { const altText = 'alt text'; - const { getByRole } = renderNotificationFullscreen({ + renderNotificationFullscreen({ ...baseProps, image: { src: '/images/illustration-update.svg', alt: altText, }, }); - const imageEl = getByRole('img'); + const imageEl = screen.getByRole('img'); expect(imageEl.tagName).toBe('IMG'); expect(imageEl.getAttribute('alt')).toBe(altText); }); it('should add aria-label to an svg element', () => { const altText = 'alt text'; - const { getByRole } = renderNotificationFullscreen({ + renderNotificationFullscreen({ ...baseProps, image: { svg: Plus, alt: altText, }, }); - const imageEl = getByRole('img'); + const imageEl = screen.getByRole('img'); expect(imageEl.tagName).toBe('svg'); expect(imageEl.getAttribute('aria-label')).toBe(altText); }); diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.module.css b/packages/circuit-ui/components/NotificationInline/NotificationInline.module.css index 9f00eca7da..8dd6427deb 100644 --- a/packages/circuit-ui/components/NotificationInline/NotificationInline.module.css +++ b/packages/circuit-ui/components/NotificationInline/NotificationInline.module.css @@ -1,8 +1,8 @@ .base { overflow: hidden; - will-change: height; transition: opacity var(--cui-transitions-slow), height var(--cui-transitions-slow), visibility var(--cui-transitions-slow); + will-change: height; } .wrapper { diff --git a/packages/circuit-ui/components/NotificationInline/NotificationInline.spec.tsx b/packages/circuit-ui/components/NotificationInline/NotificationInline.spec.tsx index 6f6afa7ec6..6072a42a83 100644 --- a/packages/circuit-ui/components/NotificationInline/NotificationInline.spec.tsx +++ b/packages/circuit-ui/components/NotificationInline/NotificationInline.spec.tsx @@ -16,7 +16,13 @@ import { describe, expect, it, vi } from 'vitest'; import { createRef } from 'react'; -import { axe, render, userEvent, waitFor } from '../../util/test-utils.js'; +import { + axe, + render, + userEvent, + waitFor, + screen, +} from '../../util/test-utils.js'; import { NotificationInline, @@ -32,11 +38,11 @@ describe('NotificationInline', () => { }; it('should render the notification inline', async () => { - const { getByText } = renderNotificationInline({ + renderNotificationInline({ ...baseProps, }); - const toastEl = getByText('This is an inline message'); + const toastEl = screen.getByText('This is an inline message'); await waitFor(() => { expect(toastEl).toBeVisible(); @@ -44,12 +50,12 @@ describe('NotificationInline', () => { }); it('should render notification inline with headline', () => { - const { getByRole } = renderNotificationInline({ + renderNotificationInline({ ...baseProps, headline: 'Information', }); - const headingEl = getByRole('heading'); + const headingEl = screen.getByRole('heading'); expect(headingEl.tagName).toBe('H3'); expect(headingEl).toHaveTextContent('Information'); @@ -58,7 +64,7 @@ describe('NotificationInline', () => { it.each(['h2', 'h3', 'h4', 'h5', 'h6'] as const)( 'should render notification inline as an %s headline', (level) => { - const { getByRole } = renderNotificationInline({ + renderNotificationInline({ ...baseProps, headline: { label: `${level} headline`, @@ -66,21 +72,21 @@ describe('NotificationInline', () => { }, }); - const headingEl = getByRole('heading'); + const headingEl = screen.getByRole('heading'); expect(headingEl.tagName).toBe(level.toUpperCase()); }, ); it('should render notification toast with an action button', () => { - const { getByRole } = renderNotificationInline({ + renderNotificationInline({ ...baseProps, action: { onClick: vi.fn(), children: 'Click here', }, }); - expect(getByRole('button')).toBeVisible(); + expect(screen.getByRole('button')).toBeVisible(); }); it('should forward a ref', () => { @@ -100,9 +106,9 @@ describe('NotificationInline', () => { children: 'Click here', }, }; - const { getByRole } = renderNotificationInline(props); + renderNotificationInline(props); - await userEvent.click(getByRole('button')); + await userEvent.click(screen.getByRole('button')); expect(props.action.onClick).toHaveBeenCalledTimes(1); }); @@ -113,9 +119,9 @@ describe('NotificationInline', () => { onClose: vi.fn(), closeButtonLabel: 'Close notification', }; - const { getByRole } = renderNotificationInline(props); + renderNotificationInline(props); - await userEvent.click(getByRole('button', { name: /close/i })); + await userEvent.click(screen.getByRole('button', { name: /close/i })); expect(props.onClose).toHaveBeenCalled(); }); diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css b/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css index 76af5d42ed..7fb794efd8 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.module.css @@ -69,8 +69,8 @@ .base .image { max-width: 232px; height: 120px; - object-fit: contain; margin: 0 auto var(--cui-spacings-giga); + object-fit: contain; } .base .image svg { diff --git a/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx b/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx index e52a38674c..0734576d13 100644 --- a/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx +++ b/packages/circuit-ui/components/NotificationModal/NotificationModal.spec.tsx @@ -72,18 +72,18 @@ describe('NotificationModal', () => { }); it('should render the modal', async () => { - const { findByRole } = renderNotificationModal(baseNotificationModal); + renderNotificationModal(baseNotificationModal); - const modalEl = await findByRole('dialog'); + const modalEl = await screen.findByRole('dialog'); expect(modalEl).toBeVisible(); }); describe('business logic', () => { it('should close the modal when clicking the close button', async () => { - const { findByRole } = renderNotificationModal(baseNotificationModal); + renderNotificationModal(baseNotificationModal); - const closeButton = await findByRole('button', { + const closeButton = await screen.findByRole('button', { name: baseNotificationModal.closeButtonLabel, }); @@ -101,9 +101,9 @@ describe('NotificationModal', () => { }); it('should perform an action and close the modal when clicking an action button', async () => { - const { findByRole } = renderNotificationModal(baseNotificationModal); + renderNotificationModal(baseNotificationModal); - const actionButton = await findByRole('button', { + const actionButton = await screen.findByRole('button', { name: baseNotificationModal.actions.primary.children, }); diff --git a/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx b/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx index 3af5a7270d..ebe8a15d83 100644 --- a/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx +++ b/packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx @@ -21,6 +21,7 @@ import { render, waitFor, waitForElementToBeRemoved, + screen, } from '../../util/test-utils.js'; import Button from '../Button/index.js'; import { ToastProvider } from '../ToastContext/ToastContext.js'; @@ -60,41 +61,39 @@ describe('NotificationToast', () => { }; it('should render with a headline', async () => { - const { getByText, findByRole } = renderNotificationToast({ + renderNotificationToast({ ...baseNotificationToast, headline: 'Information', }); - await userEvent.click(getByText('Open toast')); + await userEvent.click(screen.getByText('Open toast')); - const headingEl = await findByRole('heading'); + const headingEl = await screen.findByRole('heading'); expect(headingEl.tagName).toBe('H3'); expect(headingEl).toHaveTextContent('Information'); }); it('should open a toast', async () => { - const { findByRole, getByText } = renderNotificationToast( - baseNotificationToast, - ); + renderNotificationToast(baseNotificationToast); - await userEvent.click(getByText('Open toast')); + await userEvent.click(screen.getByText('Open toast')); - const toastEl = await findByRole('status'); + const toastEl = await screen.findByRole('status'); expect(toastEl).toBeVisible(); }); it('should close the toast when the onClose method is called', async () => { - const { getByText } = renderNotificationToast(baseNotificationToast); + renderNotificationToast(baseNotificationToast); - await userEvent.click(getByText('Open toast')); + await userEvent.click(screen.getByText('Open toast')); await waitFor(() => { - expect(getByText('This is a toast message')).toBeVisible(); + expect(screen.getByText('This is a toast message')).toBeVisible(); }); - const closeButton = getByText('Close'); + const closeButton = screen.getByText('Close'); await userEvent.click(closeButton); @@ -102,11 +101,11 @@ describe('NotificationToast', () => { }); it('should autodismiss toast after the duration has expired', async () => { - const { getByText } = renderNotificationToast(baseNotificationToast); + renderNotificationToast(baseNotificationToast); - await userEvent.click(getByText('Open toast')); + await userEvent.click(screen.getByText('Open toast')); - const toastElement = getByText('This is a toast message'); + const toastElement = screen.getByText('This is a toast message'); await waitFor(() => { expect(toastElement).toBeVisible(); @@ -120,14 +119,12 @@ describe('NotificationToast', () => { }, 10000); it('should have no accessibility violations', async () => { - const { container, getByText } = renderNotificationToast( - baseNotificationToast, - ); + const { container } = renderNotificationToast(baseNotificationToast); - await userEvent.click(getByText('Open toast')); + await userEvent.click(screen.getByText('Open toast')); await waitFor(() => { - expect(getByText('This is a toast message')).toBeVisible(); + expect(screen.getByText('This is a toast message')).toBeVisible(); }); const actual = await axe(container); diff --git a/packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx b/packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx index c21fa8ff7a..69714944b6 100644 --- a/packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx +++ b/packages/circuit-ui/components/PercentageInput/PercentageInput.spec.tsx @@ -16,7 +16,7 @@ import { describe, expect, it } from 'vitest'; import { ChangeEvent, createRef, useState } from 'react'; -import { render, userEvent, axe } from '../../util/test-utils.js'; +import { render, userEvent, axe, screen } from '../../util/test-utils.js'; import type { InputElement } from '../Input/index.js'; import { PercentageInput, PercentageInputProps } from './PercentageInput.js'; @@ -29,19 +29,15 @@ const defaultProps = { describe('PercentageInput', () => { it('should forward a ref', () => { const ref = createRef(); - const { getByRole } = render( - , - ); - const input = getByRole('textbox'); + render(); + const input = screen.getByRole('textbox'); expect(ref.current).toBe(input); }); it('should format an en-GB amount', async () => { - const { getByRole } = render( - , - ); + render(); - const input = getByRole('textbox') as HTMLInputElement; + const input = screen.getByRole('textbox'); await userEvent.type(input, '1234'); @@ -49,11 +45,9 @@ describe('PercentageInput', () => { }); it('should format an de-DE amount', async () => { - const { getByRole } = render( - , - ); + render(); - const input = getByRole('textbox') as HTMLInputElement; + const input = screen.getByRole('textbox'); await userEvent.type(input, '1234'); @@ -61,11 +55,9 @@ describe('PercentageInput', () => { }); it('should format an amount with decimals', async () => { - const { getByRole } = render( - , - ); + render(); - const input = getByRole('textbox') as HTMLInputElement; + const input = screen.getByRole('textbox'); await userEvent.type(input, '1234,56'); @@ -85,9 +77,9 @@ describe('PercentageInput', () => { /> ); }; - const { getByRole } = render(); + render(); - const input = getByRole('textbox') as HTMLInputElement; + const input = screen.getByRole('textbox'); expect(input.value).toBe('1.234'); await userEvent.clear(input); @@ -108,14 +100,16 @@ describe('PercentageInput', () => { * Note: further labeling logic is covered by the underlying `Input` component. */ it('should have the currency symbol as part of its accessible description', () => { - const { getByRole } = render(); - expect(getByRole('textbox')).toHaveAccessibleDescription(PERCENT_SYMBOL); + render(); + expect(screen.getByRole('textbox')).toHaveAccessibleDescription( + PERCENT_SYMBOL, + ); }); it('should accept a custom description via aria-describedby', () => { const customDescription = 'Custom description'; const customDescriptionId = 'customDescriptionId'; - const { getByRole } = render( + render( <> {customDescription} { /> , ); - expect(getByRole('textbox')).toHaveAccessibleDescription( + expect(screen.getByRole('textbox')).toHaveAccessibleDescription( `${PERCENT_SYMBOL} ${customDescription}`, ); }); diff --git a/packages/circuit-ui/components/Popover/Popover.spec.tsx b/packages/circuit-ui/components/Popover/Popover.spec.tsx index 7704172936..7ff58de784 100644 --- a/packages/circuit-ui/components/Popover/Popover.spec.tsx +++ b/packages/circuit-ui/components/Popover/Popover.spec.tsx @@ -111,6 +111,7 @@ describe('Popover', () => { * > The state update happens after tests complete, resulting in act warnings. */ async function flushMicrotasks() { + // eslint-disable-next-line testing-library/no-unnecessary-act await act(async () => {}); } @@ -230,9 +231,7 @@ describe('Popover', () => { onToggle, }); - act(() => { - rerender(); - }); + rerender(); const popoverItems = screen.getAllByRole('menuitem'); @@ -244,9 +243,7 @@ describe('Popover', () => { it('should move focus to the trigger element after closing', async () => { const { rerender } = renderPopover(baseProps); - act(() => { - rerender(); - }); + rerender(); const popoverTrigger = screen.getByRole('button'); diff --git a/packages/circuit-ui/components/Portal/Portal.spec.tsx b/packages/circuit-ui/components/Portal/Portal.spec.tsx index 1f4c88475e..14b98009a3 100644 --- a/packages/circuit-ui/components/Portal/Portal.spec.tsx +++ b/packages/circuit-ui/components/Portal/Portal.spec.tsx @@ -15,19 +15,19 @@ import { describe, expect, it, vi } from 'vitest'; -import { render } from '../../util/test-utils.js'; +import { render, screen } from '../../util/test-utils.js'; import { Portal } from './Portal.js'; describe('Portal', () => { it('should append its children to the document body by default', () => { const testId = 'children'; - const { getByTestId } = render( + render(
, ); - const children = getByTestId(testId); + const children = screen.getByTestId(testId); expect(children).toBeVisible(); expect(children.parentElement).toEqual(document.body); @@ -40,13 +40,13 @@ describe('Portal', () => { const testId = 'children'; const getContainer = vi.fn(() => container); - const { getByTestId } = render( + render(
, ); - const children = getByTestId(testId); + const children = screen.getByTestId(testId); expect(getContainer).toHaveBeenCalledTimes(1); expect(children.parentElement).toEqual(container); diff --git a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.spec.tsx b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.spec.tsx index 1eccd2b64c..7403992b03 100644 --- a/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.spec.tsx +++ b/packages/circuit-ui/components/RadioButtonGroup/RadioButtonGroup.spec.tsx @@ -238,10 +238,8 @@ describe('RadioButtonGroup', () => { }); it('should mark the group as required', () => { - const { getByRole } = render( - , - ); - expect(getByRole('radiogroup')).toBeRequired(); + render(); + expect(screen.getByRole('radiogroup')).toBeRequired(); }); }); @@ -253,30 +251,30 @@ describe('RadioButtonGroup', () => { }); it('should render an empty live region on mount', () => { - const { getByRole } = render(); - const liveRegionEl = getByRole('status'); + render(); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toBeEmptyDOMElement(); }); it('should render status messages in a live region', () => { const statusMessage = 'This field is required'; - const { getByRole } = render( + render( , ); - const liveRegionEl = getByRole('status'); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toHaveTextContent(statusMessage); }); it('should not render descriptions in a live region', () => { const statusMessage = 'This field is required'; - const { getByRole } = render( + render( , ); - const liveRegionEl = getByRole('status'); + const liveRegionEl = screen.getByRole('status'); expect(liveRegionEl).toBeEmptyDOMElement(); }); }); diff --git a/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx b/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx index 84e4e12381..71a9b63b31 100644 --- a/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx +++ b/packages/circuit-ui/components/SearchInput/SearchInput.spec.tsx @@ -16,7 +16,7 @@ import { describe, expect, it, vi } from 'vitest'; import { createRef } from 'react'; -import { render, axe } from '../../util/test-utils.js'; +import { render, axe, screen } from '../../util/test-utils.js'; import type { InputElement } from '../Input/index.js'; import { SearchInput } from './SearchInput.js'; @@ -28,7 +28,7 @@ describe('SearchInput', () => { const mockCallback = vi.fn(); const clearLabel = 'Clear'; - const { getByRole } = render( + render( { onChange={mockCallback} />, ); - expect(getByRole('button')).toBeVisible(); + expect(screen.getByRole('button')).toBeVisible(); }); it('should forward a ref', () => { diff --git a/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx b/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx index b9fc13becd..3ea2a59bd5 100644 --- a/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/SideNavigation.spec.tsx @@ -17,7 +17,13 @@ import { beforeAll, describe, expect, it, vi } from 'vitest'; import { Shop } from '@sumup/icons'; -import { render, axe, RenderFn, waitFor } from '../../util/test-utils.js'; +import { + render, + axe, + RenderFn, + waitFor, + screen, +} from '../../util/test-utils.js'; import { ModalProvider } from '../ModalContext/index.js'; import { SideNavigation, SideNavigationProps } from './SideNavigation.js'; @@ -94,17 +100,14 @@ describe('SideNavigation', () => { }); it('should open the mobile navigation', async () => { - const { queryByRole, rerender } = renderSideNavigation( - render, - defaultProps, - ); + const { rerender } = renderSideNavigation(render, defaultProps); - expect(queryByRole('dialog')).not.toBeInTheDocument(); + expect(screen.queryByRole('dialog')).not.toBeInTheDocument(); renderSideNavigation(rerender, { ...defaultProps, isOpen: true }); await waitFor(() => { - expect(queryByRole('dialog')).toBeVisible(); + expect(screen.queryByRole('dialog')).toBeVisible(); }); }); }); diff --git a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx index a8e4bb41b5..ff59a5824c 100644 --- a/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/DesktopNavigation/DesktopNavigation.spec.tsx @@ -17,7 +17,7 @@ import { describe, expect, it, vi } from 'vitest'; import { Home, Shop } from '@sumup/icons'; -import { render, axe, RenderFn } from '../../../../util/test-utils.js'; +import { render, axe, RenderFn, screen } from '../../../../util/test-utils.js'; import { DesktopNavigation, @@ -68,9 +68,9 @@ describe('DesktopNavigation', () => { }; it('should render with secondary links', () => { - const { getAllByRole } = renderDesktopNavigation(render, defaultProps); + renderDesktopNavigation(render, defaultProps); - const lists = getAllByRole('list'); + const lists = screen.getAllByRole('list'); expect(lists).toHaveLength(3); }); @@ -88,9 +88,9 @@ describe('DesktopNavigation', () => { }, ], }; - const { getAllByRole } = renderDesktopNavigation(render, props); + renderDesktopNavigation(render, props); - const lists = getAllByRole('list'); + const lists = screen.getAllByRole('list'); expect(lists).toHaveLength(1); }); diff --git a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx index 4a277a3318..7218189d7f 100644 --- a/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/MobileNavigation/MobileNavigation.spec.tsx @@ -16,13 +16,14 @@ import { afterEach, describe, expect, it, vi } from 'vitest'; import { Home, Shop } from '@sumup/icons'; -import { ClickEvent } from '../../../../types/events.js'; +import type { ClickEvent } from '../../../../types/events.js'; import { render, axe, RenderFn, userEvent, waitFor, + screen, } from '../../../../util/test-utils.js'; import { MobileNavigation, MobileNavigationProps } from './MobileNavigation.js'; @@ -82,13 +83,10 @@ describe('MobileNavigation', () => { }); it('should toggle the secondary navigation', async () => { - const { getByRole, getByText } = renderMobileNavigation( - render, - defaultProps, - ); + renderMobileNavigation(render, defaultProps); - const primaryLinkEl = getByRole('button', { name: /shop/i }); - const secondaryLinkEl = getByText(/toys/i); + const primaryLinkEl = screen.getByRole('button', { name: /shop/i }); + const secondaryLinkEl = screen.getByText(/toys/i); expect(secondaryLinkEl).not.toBeVisible(); @@ -126,9 +124,9 @@ describe('MobileNavigation', () => { }, ], }; - const { getByRole } = renderMobileNavigation(render, props); + renderMobileNavigation(render, props); - const primaryLinkEl = getByRole('link', { name: /home/i }); + const primaryLinkEl = screen.getByRole('link', { name: /home/i }); await userEvent.click(primaryLinkEl); @@ -163,10 +161,10 @@ describe('MobileNavigation', () => { }, ], }; - const { getByRole, getByText } = renderMobileNavigation(render, props); + renderMobileNavigation(render, props); - const primaryLinkEl = getByRole('button', { name: /shop/i }); - const secondaryLinkEl = getByText(/toys/i); + const primaryLinkEl = screen.getByRole('button', { name: /shop/i }); + const secondaryLinkEl = screen.getByText(/toys/i); expect(secondaryLinkEl).not.toBeVisible(); diff --git a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx index a1191b077f..542723825c 100644 --- a/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/PrimaryLink/PrimaryLink.spec.tsx @@ -17,12 +17,13 @@ import { describe, expect, it, vi } from 'vitest'; import { FC } from 'react'; import { IconProps, Plus } from '@sumup/icons'; -import { ClickEvent } from '../../../../types/events.js'; +import type { ClickEvent } from '../../../../types/events.js'; import { render, axe, RenderFn, userEvent, + screen, } from '../../../../util/test-utils.js'; import { PrimaryLink, PrimaryLinkProps } from './PrimaryLink.js'; @@ -43,31 +44,31 @@ describe('PrimaryLink', () => { }; it('should render as active', () => { - const { getByRole } = renderPrimaryLink(render, { + renderPrimaryLink(render, { ...baseProps, isActive: true, }); - expect(getByRole('link')).toHaveAttribute('aria-current', 'page'); + expect(screen.getByRole('link')).toHaveAttribute('aria-current', 'page'); }); it('should render with an active icon', () => { - const { getByTestId } = renderPrimaryLink(render, { + renderPrimaryLink(render, { ...baseProps, activeIcon: () =>
, isActive: true, }); - expect(getByTestId('active-icon')).toBeVisible(); + expect(screen.getByTestId('active-icon')).toBeVisible(); }); it.todo('should render with an external icon'); it('should render with a suffix icon', () => { - const { getByTestId } = renderPrimaryLink(render, { + renderPrimaryLink(render, { ...baseProps, // eslint-disable-next-line react/display-name suffix: (props) =>
, }); - expect(getByTestId('suffix')).toBeVisible(); + expect(screen.getByTestId('suffix')).toBeVisible(); }); it('should call the onClick handler when clicked', async () => { @@ -77,9 +78,9 @@ describe('PrimaryLink', () => { event.preventDefault(); }), }; - const { getByRole } = renderPrimaryLink(render, props); + renderPrimaryLink(render, props); - await userEvent.click(getByRole('link')); + await userEvent.click(screen.getByRole('link')); expect(props.onClick).toHaveBeenCalledTimes(1); }); diff --git a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.spec.tsx b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.spec.tsx index 423052b4b9..44c3552dfe 100644 --- a/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.spec.tsx +++ b/packages/circuit-ui/components/SideNavigation/components/SecondaryLinks/SecondaryLinks.spec.tsx @@ -15,12 +15,13 @@ import { describe, expect, it, vi } from 'vitest'; -import { ClickEvent } from '../../../../types/events.js'; +import type { ClickEvent } from '../../../../types/events.js'; import { render, axe, RenderFn, userEvent, + screen, } from '../../../../util/test-utils.js'; import { SecondaryLinks, SecondaryLinksProps } from './SecondaryLinks.js'; @@ -91,9 +92,9 @@ describe('SecondaryLinks', () => { }, ], }; - const { getByRole } = renderSecondaryLinks(render, props); + renderSecondaryLinks(render, props); - await userEvent.click(getByRole('link')); + await userEvent.click(screen.getByRole('link')); expect(onClick).toHaveBeenCalledTimes(1); }); diff --git a/packages/circuit-ui/components/SidePanel/SidePanel.spec.tsx b/packages/circuit-ui/components/SidePanel/SidePanel.spec.tsx index 5c4ebf9d34..0a3bb5ed29 100644 --- a/packages/circuit-ui/components/SidePanel/SidePanel.spec.tsx +++ b/packages/circuit-ui/components/SidePanel/SidePanel.spec.tsx @@ -15,7 +15,13 @@ import { describe, expect, it, vi } from 'vitest'; -import { render, userEvent, axe, waitFor } from '../../util/test-utils.js'; +import { + render, + userEvent, + axe, + waitFor, + screen, +} from '../../util/test-utils.js'; import { SidePanel, SidePanelProps } from './SidePanel.js'; @@ -47,32 +53,34 @@ describe('SidePanel', () => { render(); it('should render the side panel', () => { - const { getByRole } = renderComponent(); - expect(getByRole('dialog')).toBeVisible(); + renderComponent(); + expect(screen.getByRole('dialog')).toBeVisible(); }); it('should render the children render prop', () => { - const { getByTestId } = renderComponent(); - expect(getByTestId('children')).toHaveTextContent('Side panel content'); + renderComponent(); + expect(screen.getByTestId('children')).toHaveTextContent( + 'Side panel content', + ); }); it('should render the header', () => { - const { getByText } = renderComponent(); - expect(getByText(baseProps.headline)).toBeVisible(); + renderComponent(); + expect(screen.getByText(baseProps.headline)).toBeVisible(); }); it('should call the onClose callback from the close button', async () => { const onClose = vi.fn(); - const { getByTitle } = renderComponent({ onClose }); + renderComponent({ onClose }); - await userEvent.click(getByTitle(baseProps.closeButtonLabel)); + await userEvent.click(screen.getByTitle(baseProps.closeButtonLabel)); expect(onClose).toHaveBeenCalled(); }); it('should call the onClose callback from the onClose render prop', async () => { const onClose = vi.fn(); - const { getByTestId } = renderComponent({ + renderComponent({ children: ({ onClose: onCloseRenderProp }) => (