@ntbjs/react-components 1.3.0-rc.8 → 2.0.0-rc.3

package/migration-storybook.log

@@ -0,0 +1,392 @@
+🔎 checking possible migrations..
+
+🔎 found a 'addons-api' migration:
+╭ Migration notification ────────────────────────────────────────────────────────╮
+│                                                                                │
+│   Attention: We've detected that you're using the following package which is   │
+│   removed in Storybook 8 and beyond:                                           │
+│                                                                                │
+│   - @storybook/addons                                                          │
+│                                                                                │
+│   This package has been deprecated and replaced with @storybook/preview-api    │
+│   and @storybook/manager-api.                                                  │
+│                                                                                │
+│   You can find more information about the new addons API in the migration      │
+│   guide:                                                                       │
+│   https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-addons   │
+│   -api                                                                         │
+│                                                                                │
+╰────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to continue? › (Y/n)✔ Do you want to continue? … yes
+
+🔎 found a 'new-frameworks' migration:
+╭ Automigration detected ────────────────────────────────────────────────────────╮
+│                                                                                │
+│   We've detected your project is not fully setup with the new framework        │
+│   format, which was introduced in Storybook 7.                                 │
+│                                                                                │
+│   Storybook 7 introduced the concept of frameworks, which abstracts            │
+│   configuration for renderers (e.g. React, Vue), builders (e.g. Webpack,       │
+│   Vite) and defaults to make integrations easier.                              │
+│                                                                                │
+│   Your project should be updated to use Storybook's framework:                 │
+│   @storybook/react-webpack5. We can attempt to do this for you                 │
+│   automatically.                                                               │
+│                                                                                │
+│   Here are the steps this migration will do to migrate your project:           │
+│   - Add the following dependencies:                                            │
+│   - * @storybook/react-webpack5                                                │
+│   - Update or specify the framework field in .storybook/main.js with the       │
+│   value of "@storybook/react-webpack5".                                        │
+│                                                                                │
+│                                                                                │
+│   To learn more about the new framework format, see: https://github.com/stor   │
+│   ybookjs/storybook/blob/next/MIGRATION.md#new-framework-api                   │
+│                                                                                │
+╰────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'new-frameworks' migration on your project? › (Y/n)✔ Do you want to run the 'new-frameworks' migration on your project? … yes
+✅ Installing new dependencies: @storybook/react-webpack5
+✅ Updating main.js
+✅ Updating "framework" field
+✅ ran new-frameworks migration
+Unable to find .eslintrc config file, skipping
+
+🔎 found a 'storybook-binary' migration:
+╭ Automigration detected ────────────────────────────────────────────────────────╮
+│                                                                                │
+│   We've detected you are using Storybook 8.6.12 without Storybook's            │
+│   storybook binary. Starting in Storybook 7.0, it has to be installed.         │
+│                                                                                │
+│                                                                                │
+│   More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md   │
+│   #start-storybook--build-storybook-binaries-removed                           │
+│                                                                                │
+╰────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'storybook-binary' migration on your project? › (Y/n)✔ Do you want to run the 'storybook-binary' migration on your project? … yes
+
+✅ Adding 'storybook' as dev dependency
+
+✅ ran storybook-binary migration
+
+🔎 found a 'sb-scripts' migration:
+╭ Automigration detected ────────────────────────────────────────────────────────╮
+│                                                                                │
+│   We've detected you are using Storybook 8.6.12 with scripts from previous     │
+│   versions of Storybook.                                                       │
+│   Starting in Storybook 7, the start-storybook and build-storybook binaries    │
+│   have changed to storybook dev and storybook build respectively.              │
+│   In order to work with Storybook 8.6.12, your storybook scripts have to be    │
+│   adjusted to use the binary. We can adjust them for you:                      │
+│                                                                                │
+│   storybook                                                                    │
+│   from:                                                                        │
+│   start-storybook -p 6006                                                      │
+│   to:                                                                          │
+│   storybook dev -p 6006                                                        │
+│                                                                                │
+│   storybook:export                                                             │
+│   from:                                                                        │
+│   build-storybook                                                              │
+│   to:                                                                          │
+│   storybook build                                                              │
+│                                                                                │
+│   In case this migration did not cover all of your scripts, or you'd like      │
+│   more info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md   │
+│   #start-storybook--build-storybook-binaries-removed                           │
+│                                                                                │
+╰────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'sb-scripts' migration on your project? › (Y/n)✔ Do you want to run the 'sb-scripts' migration on your project? … yes
+✅ Updating scripts in package.json
+
+
+✅ ran sb-scripts migration
+
+🔎 found a 'remove-argtypes-regex' migration:
+╭ Manual migration detected ─────────────────────────────────────────────────────╮
+│                                                                                │
+│   Attention: We've detected that you're using argTypesRegex:                   │
+│                                                                                │
+│   .storybook/preview.js                                                        │
+│   6 |     container: DocsContainer                                             │
+│   7 |   },                                                                     │
+│   >  8 |   actions: { argTypesRegex: '^on[A-Z].*' },                           │
+│   |              ^^^^^^^^^^^^^                                                 │
+│   9 |   darkMode: {                                                            │
+│   10 |     stylePreview: true,                                                 │
+│   11 |     classTarget: 'body',                                                │
+│                                                                                │
+│   Storybook's play functions let you render your stories interactively.        │
+│                                                                                │
+│   In the past, play functions mocked action args implicitly by analyzing the   │
+│   argTypesRegex                                                                │
+│   in your preview.js|ts file.                                                  │
+│                                                                                │
+│   However, Storybook 8 changes this behavior, and we now recommend using the   │
+│   (fn) function to mock your component's methods instead.                      │
+│                                                                                │
+│   Use the following command to check for implied mocked actions in your play   │
+│   functions:                                                                   │
+│   npx storybook migrate find-implicit-spies                                    │
+│   --glob="**/*.stories.@(js|jsx|ts|tsx)"                                       │
+│                                                                                │
+│   Then, refer to our docs to migrate your play functions to Storybook 8:       │
+│   https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-   │
+│   function                                                                     │
+│                                                                                │
+╰────────────────────────────────────────────────────────────────────────────────╯
+
+? Select continue once you have made the required changes, or quit to exit the migration process › quit / continue? Select continue once you have made the required changes, or quit to exit the migration process › quit / continue? Select continue once you have made the required changes, or quit to exit the migration process › quit / continue✔ Select continue once you have made the required changes, or quit to exit the migration process … quit / continue
+
+🔎 found a 'github-flavored-markdown-mdx' migration:
+╭ Automigration detected ──────────────────────────────────────╮
+│                                                              │
+│   In MDX1 you had the option of using GitHub flavored        │
+│   markdown.                                                  │
+│                                                              │
+│   Storybook >= 8.0 uses MDX3 for compiling MDX, and thus     │
+│   no longer supports GFM out of the box.                     │
+│   Because of this you need to explicitly add the GFM         │
+│   plugin in the addon-docs options:                          │
+│   https://storybook.js.org/docs/writing-docs/mdx#markdown-   │
+│   tables-arent-rendering-correctly                           │
+│                                                              │
+│   We recommend that you follow the guide in the link         │
+│   above; however, we can add a temporary Storybook addon     │
+│   to help make this migration easier.                        │
+│   We'll install the addon and add it to your storybook       │
+│   config.                                                    │
+│                                                              │
+╰──────────────────────────────────────────────────────────────╯
+? Do you want to run the 'github-flavored-markdown-mdx' migration on your project? › (Y/n)✔ Do you want to run the 'github-flavored-markdown-mdx' migration on your project? … yes
+✅ Adding "@storybook/addon-mdx-gfm" addon
+✅ ran github-flavored-markdown-mdx migration
+
+🔎 found a 'mdx-to-csf' migration:
+╭ Automigration detected ────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                    │
+│   We've detected your project has one or more globs in your 'stories' config that matches          │
+│   .stories.mdx files:                                                                              │
+│   "../src/storybook/mdx/Introduction.stories.mdx"                                                  │
+│   "../src/**/*.stories.mdx"                                                                        │
+│   "../src/**/*.stories.@(js|jsx|ts|tsx)"                                                           │
+│                                                                                                    │
+│   In Storybook 7, we have deprecated defining stories in MDX files, and consequently have          │
+│   changed the suffix to simply .mdx. Since Storybook 8, we have removed the support of story       │
+│   definition in MDX files entirely. Therefore '.stories.mdx' files aren't supported anymore.       │
+│                                                                                                    │
+│   Now, since Storybook 8.0, we have removed support for .stories.mdx files.                        │
+│                                                                                                    │
+│   We can automatically migrate your 'stories' config to include any .mdx file instead of just      │
+│   .stories.mdx.                                                                                    │
+│   That would result in the following 'stories' config:                                             │
+│   "../src/storybook/mdx/Introduction.mdx"                                                          │
+│   "../src/**/*.mdx"                                                                                │
+│   "../src/**/*.stories.@(js|jsx|ts|tsx)"                                                           │
+│                                                                                                    │
+│   Additionally, we will run the 'mdx-to-csf' codemod for you, which tries to transform             │
+│   '*.stories.mdx' files to '*.stories.js' and '*.mdx' files.                                       │
+│                                                                                                    │
+│   To learn more about this change, see:                                                            │
+│   https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf                               │
+│                                                                                                    │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'mdx-to-csf' migration on your project? › (Y/n)✔ Do you want to run the 'mdx-to-csf' migration on your project? … yes
+✅ Setting 'stories' config:
+[
+  "../src/storybook/mdx/Introduction.mdx",
+  "../src/**/*.mdx",
+  "../src/**/*.stories.@(js|jsx|ts|tsx)"
+]
+? Please enter the glob for your MDX stories › ./src/**/*.stories.mdx✔ Please enter the glob for your MDX stories … ./src/**/*.stories.mdx
+=> Applying mdx-to-csf: 7 files
+The codemod was not able to transform the files mentioned above. We have renamed the files to .mdx.broken. Please check the files and rename them back to .mdx after you have either manually transformed them to mdx + csf or fixed the issues so that the codemod can transform them.
+The migration successfully updated your 'stories' config to include any .mdx file instead of just .stories.mdx.
+
+It also ran the 'mdx-to-csf' codemod to convert your MDX stories to CSF format.
+This codemod is not perfect however, so you may need to manually fix any issues it couldn't handle.
+✅ ran mdx-to-csf migration
+
+🔎 found a 'autodocsTrue' migration:
+╭ Automigration detected ────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                    │
+│   We've changed the configuration of autodocs (previous docsPage), so now the value:               │
+│     - docs.autodocs: true -- means automatically create docs for every CSF file                    │
+│     - docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag     │
+│     - docs.autodocs: false -- means never create autodocs                                          │
+│                                                                                                    │
+│   Based on your prior configuration,  we can set the `docs.autodocs` to keep your old behaviour:   │
+│                                                                                                    │
+│   docs: { autodocs: true }                                                                         │
+│                                                                                                    │
+│   More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes      │
+│                                                                                                    │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'autodocsTrue' migration on your project? › (Y/n)✔ Do you want to run the 'autodocsTrue' migration on your project? … yes
+✅ Setting 'docs.autodocs' to true in main.js
+✅ ran autodocsTrue migration
+
+🔎 found a 'remove-react-dependency' migration:
+╭ Manual migration detected ─────────────────────────────────────────────────────────────────────────╮
+│                                                                                                    │
+│   We detected that your project has a dependency for "react" that it might not need.               │
+│   Nothing breaks by having it, you can safely ignore this message, if you wish.                    │
+│                                                                                                    │
+│   Storybook asked you to add "react" as a direct dependency in the past when upgrading from        │
+│   Storybook 6 to 7.                                                                                │
+│   However, since version 8.0, Storybook no longer requires you to provide "react" as a             │
+│   dependency.                                                                                      │
+│   Some community addons might still wrongfully list "react" and "react-dom" as required peer       │
+│   dependencies, but since Storybook 7.6 it should not be needed in the majority of cases.          │
+│                                                                                                    │
+│   If you know you are not using React outside of Storybook, it should be safe to remove the        │
+│   "react" and "react-dom" dependencies from your project's package.json.                           │
+│   Storybook cannot do this automatically as removing it might break your project, so it should     │
+│   be done manually with care.                                                                      │
+│                                                                                                    │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
+
+? Select continue once you have made the required changes, or quit to exit the migration process › quit / continue? Select continue once you have made the required changes, or quit to exit the migration process › quit / continue? Select continue once you have made the required changes, or quit to exit the migration process › quit / continue✔ Select continue once you have made the required changes, or quit to exit the migration process … quit / continue
+
+🔎 found a 'webpack5-compiler-setup' migration:
+╭ Automigration detected ────────────────────────────────────────────────╮
+│                                                                        │
+│   Storybook's Webpack5 builder is now compiler agnostic, meaning you   │
+│   can choose a compiler addon that best fits your project:             │
+│                                                                        │
+│   - Babel: A vast ecosystem and is battle-tested. It's a robust        │
+│   choice if you have an extensive Babel setup or need specific Babel   │
+│   plugins for your project.                                            │
+│   - SWC:  Fast and easy to configure. Ideal if you want faster         │
+│   builds and have a straightforward configuration without the need     │
+│   for Babel's extensibility.                                           │
+│                                                                        │
+│   In the next step, Storybook will ask you to choose a compiler to     │
+│   automatically set it up for you.                                     │
+│                                                                        │
+│   After the migration, you can switch Webpack5 compilers by swapping   │
+│   the addon in your project.                                           │
+│   You can find more information here:                                  │
+│   https://storybook.js.org/docs/builders/webpack#compiler-support      │
+│                                                                        │
+╰────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'webpack5-compiler-setup' migration on your project? › (Y/n)✔ Do you want to run the 'webpack5-compiler-setup' migration on your project? … yes
+? Which compiler would you like to use? › - Use arrow-keys. Return to submit.
+❯   Babel - Choose Babel for a vast ecosystem and battle-tested reliability.
+    SWC
+? Which compiler would you like to use? › - Use arrow-keys. Return to submit.
+    Babel
+❯   SWC - Choose SWC for fast builds and simple configuration.
+? Which compiler would you like to use? › - Use arrow-keys. Return to submit.
+❯   Babel - Choose Babel for a vast ecosystem and battle-tested reliability.
+    SWC
+✔ Which compiler would you like to use? › Babel
+❌ error when running webpack5-compiler-setup migration
+Error: Unable to find or evaluate .storybook/main.js: SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.js file.
+
+Original error:
+ReferenceError: require is not defined
+    at file:///.storybook/main.js:1:46
+    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
+    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:360:47)
+    at loadESMFromCJS (node:internal/modules/cjs/loader:1385:24)
+    at Module._compile (node:internal/modules/cjs/loader:1536:5)
+    at Module._compile (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/esbuild-register/dist/node.js:2258:26)
+    at node:internal/modules/cjs/loader:1706:10
+    at Object.newLoader (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/esbuild-register/dist/node.js:2262:9)
+    at extensions..js (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/esbuild-register/dist/node.js:4833:24)
+    at Module.load (node:internal/modules/cjs/loader:1289:32)
+    at getStorybookData (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/cli/dist/bin/index.cjs:54:3173)
+    at async add (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/cli/dist/bin/index.cjs:56:1572)
+    at async Object.run (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/cli/dist/bin/index.cjs:574:562)
+    at async runFixes (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/cli/dist/bin/index.cjs:597:1801)
+    at async automigrate (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/cli/dist/bin/index.cjs:595:1807)
+    at async doUpgrade (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/cli/dist/bin/index.cjs:664:2133)
+    at async withTelemetry (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/core/dist/core-server/index.cjs:35778:12)
+    at async upgrade (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/@storybook/cli/dist/bin/index.cjs:664:2640)
+
+
+🔎 found a 'upgradeStorybookRelatedDependencies' migration:
+╭ Automigration detected ─────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                         │
+│   You're upgrading to the latest version of Storybook. We recommend upgrading the following packages:   │
+│   - @storybook/addons: 6.5.14 => 7.6.17                                                                 │
+│   - storybook-dark-mode: 2.0.4 => 4.0.2                                                                 │
+│                                                                                                         │
+│   After upgrading, we will run the dedupe command, which could possibly have effects on dependencies    │
+│   that are not Storybook related.                                                                       │
+│   see: https://docs.npmjs.com/cli/commands/npm-dedupe                                                   │
+│                                                                                                         │
+│   Do you want to proceed (upgrade the detected packages)?                                               │
+│                                                                                                         │
+╰─────────────────────────────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'upgradeStorybookRelatedDependencies' migration on your project? › (y/N)✔ Do you want to run the 'upgradeStorybookRelatedDependencies' migration on your project? … no
+
+🔎 found a 'visual-tests-addon' migration:
+╭ Automigration detected ─────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                         │
+│   New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in      │
+│   your stories. The addon is powered by Chromatic, a cloud-based testing tool developed by              │
+│   Storybook's core team.                                                                                │
+│                                                                                                         │
+│   Learn more: https://storybook.js.org/docs/writing-tests/visual-testing                                │
+│                                                                                                         │
+│   Install Visual Tests addon in your project?                                                           │
+│                                                                                                         │
+╰─────────────────────────────────────────────────────────────────────────────────────────────────────────╯
+? Do you want to run the 'visual-tests-addon' migration on your project? › (Y/n)✔ Do you want to run the 'visual-tests-addon' migration on your project? … yes
+✅ Adding "@chromatic-com/storybook" addon
+✅ ran visual-tests-addon migration
+
+╭ Migration check ran with failures ──────────────────────────────────────────────────────────────────────╮
+│                                                                                                         │
+│   Successful migrations:                                                                                │
+│                                                                                                         │
+│   new-frameworks, storybook-binary, sb-scripts, github-flavored-markdown-mdx, mdx-to-csf,               │
+│   autodocsTrue, visual-tests-addon                                                                      │
+│                                                                                                         │
+│   Failed migrations:                                                                                    │
+│                                                                                                         │
+│   webpack5-compiler-setup:                                                                              │
+│   Unable to find or evaluate .storybook/main.js: SB_CORE-SERVER_0007 (MainFileEvaluationError):         │
+│   Storybook couldn't evaluate your .storybook/main.js file.                                             │
+│                                                                                                         │
+│   Original error:                                                                                       │
+│   ReferenceError: require is not defined                                                                │
+│   at file:///.storybook/main.js:1:46                                                                    │
+│   at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)                                │
+│   at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:360:47)                        │
+│   at loadESMFromCJS (node:internal/modules/cjs/loader:1385:24)                                          │
+│   at Module._compile (node:internal/modules/cjs/loader:1536:5)                                          │
+│   at Module._compile                                                                                    │
+│   (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/esbuild-register/dist/node.js:2258:26)         │
+│   at node:internal/modules/cjs/loader:1706:10                                                           │
+│   at Object.newLoader                                                                                   │
+│   (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/esbuild-register/dist/node.js:2262:9)          │
+│   at extensions..js                                                                                     │
+│   (/Users/andres/.npm/_npx/9a1f8981ba4daac2/node_modules/esbuild-register/dist/node.js:4833:24)         │
+│   at Module.load (node:internal/modules/cjs/loader:1289:32)                                             │
+│                                                                                                         │
+│   You can find the full logs in                                                                         │
+│   /Users/andres/NTB/ntb-components/react-components/migration-storybook.log                             │
+│                                                                                                         │
+│   Manual migrations:                                                                                    │
+│                                                                                                         │
+│   remove-argtypes-regex, remove-react-dependency                                                        │
+│                                                                                                         │
+│   Skipped migrations:                                                                                   │
+│                                                                                                         │
+│   upgradeStorybookRelatedDependencies                                                                   │
+│                                                                                                         │
+│   ─────────────────────────────────────────────────                                                     │
+│                                                                                                         │
+│   If you'd like to run the migrations again, you can do so by running 'npx storybook automigrate'       │
+│                                                                                                         │
+│   The automigrations try to migrate common patterns in your project, but might not contain everything   │
+│   needed to migrate to the latest version of Storybook.                                                 │
+│                                                                                                         │
+│   Please check the changelog and migration guide for manual migrations and more information:            │
+│   https://storybook.js.org/docs/migration-guide                                                         │
+│   And reach out on Discord if you need help: https://discord.gg/storybook                               │
+│                                                                                                         │
+╰─────────────────────────────────────────────────────────────────────────────────────────────────────────╯
+

package/package.json

@@ -1,14 +1,48 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "1.3.0-rc.8",
+  "version": "2.0.0-rc.3",
   "description": "NTBs common front-end design utilities and React components.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./build/esm/components/index.js",
+      "require": "./build/cjs/components/index.js"
+    },
+    "./ssr": {
+      "import": "./build/esm/ssr/index.js",
+      "require": "./build/cjs/ssr/index.js"
+    },
+    "./inputs": {
+      "import": "./build/esm/components/inputs/index.js",
+      "require": "./build/cjs/components/inputs/index.js"
+    },
+    "./data": {
+      "import": "./build/esm/components/data/index.js",
+      "require": "./build/cjs/components/data/index.js"
+    },
+    "./widgets": {
+      "import": "./build/esm/components/widgets/index.js",
+      "require": "./build/cjs/components/widgets/index.js"
+    },
+    "./layout": {
+      "import": "./build/esm/components/layout/index.js",
+      "require": "./build/cjs/components/layout/index.js"
+    },
+    "./*": {
+      "import": "./build/esm/*",
+      "require": "./build/cjs/*"
+    }
+  },
+  "main": "./build/cjs/components/index.js",
+  "module": "./build/esm/components/index.js",
+  "sideEffects": false,
   "scripts": {
-    "build": "cross-env NODE_ENV=production rollup -c",
+    "build": "mkdir -p /tmp/.npm-cache && cross-env NODE_ENV=production ROLLUP_CACHE_DIR=/tmp/.npm-cache rollup -c",
     "test": "jest",
     "test:watch": "jest --watch",
     "lint": "eslint .",
-    "storybook": "start-storybook -p 6006",
-    "storybook:export": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "storybook:export": "storybook build",
     "generate": "node ./util/create-component",
     "prepublishOnly": "npm run build"
   },
@@ -21,9 +55,9 @@
     "url": ""
   },
   "homepage": "https://bitbucket.org/NTB-NO/react-components/src/master/",
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+  "engines": {
+    "node": ">=22.0.0",
+    "npm": ">=10.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.13.16",
@@ -32,14 +66,20 @@
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-react": "^7.13.13",
+    "@chromatic-com/storybook": "^3.2.6",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-actions": "^6.5.14",
-    "@storybook/addon-docs": "^6.5.14",
-    "@storybook/addon-essentials": "^6.5.14",
-    "@storybook/addon-links": "^6.5.14",
-    "@storybook/react": "^6.5.14",
+    "@storybook/addon-actions": "^8.6.12",
+    "@storybook/addon-docs": "^8.6.12",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/addon-mdx-gfm": "^8.6.12",
+    "@storybook/addon-themes": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.12.0",
@@ -55,8 +95,6 @@
     "jest": "^27.0.4",
     "postcss": "^8.3.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "rollup": "^2.50.6",
     "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-delete": "^2.0.0",
@@ -65,18 +103,18 @@
     "rollup-plugin-postcss": "^4.0.0",
     "rollup-plugin-scss": "^2.6.1",
     "rollup-plugin-url": "^3.0.1",
-    "sass": "^1.34.1",
-    "sass-loader": "^10.1.1",
-    "storybook-dark-mode": "^2.0.4",
+    "sass": "^1.86.3",
+    "sass-loader": "^16.0.5",
+    "storybook": "^8.6.12",
     "url-loader": "^4.1.1"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.24",
     "@restart/hooks": "^0.3.26",
-    "@storybook/addons": "^6.5.14",
-    "@storybook/theming": "^6.5.14",
+    "@storybook/theming": "^8.6.12",
     "@tippyjs/react": "^4.2.6",
     "lodash": "^4.17.21",
-    "nanoid": "^3.1.25",
+    "nanoid": "^3.3.8",
     "polished": "^4.1.3",
     "popper-max-size-modifier": "^0.2.0",
     "react-lazy-load-image-component": "^1.5.1",
@@ -84,6 +122,6 @@
     "react-select-async-paginate": "^0.7.3",
     "react-spinners": "^0.13.8",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.7"
   }
 }

package/styles/all.scss

@@ -1,3 +1,3 @@
-@import './config';
-@import 'utils/colors';
-@import 'utils/theme';
+@use './config' as *;
+@use 'utils/colors' as *;
+@use 'utils/theme' as *;

package/styles/config.scss

@@ -2,8 +2,10 @@
  * Colors
  */
 $colors: (
+  'orange-600': #634e01,
   'orange-500': #ff9900,
   'orange-400': #ffcb7e,
+  'emerald-600': #296c58,
   'emerald-500': #30826a,
   'emerald-400': #64b49d,
   'emerald-300': #bfe0d5,
@@ -20,6 +22,7 @@ $colors: (
   'cercise-500': #5f1031,
   'cercise-400': #854962,
   'cercise-300': #d099b0,
+  'cercise-200': #fecaca,
   'cercise-100': #f9f3f5,
   'red-600': #7f1b1b,
   'red-500': #d83000,

package/styles/utils/colors.scss

@@ -1,4 +1,4 @@
-@import '../config';
+@use '../config' as *;
 
 @function color($name) {
   @if map-has-key($colors, $name) {

package/styles/utils/theme.scss

@@ -1,3 +1,5 @@
+@use '../config' as *;
+
 @mixin color($dark-color, $light-color) {
   @include genericThemeCode('color', $dark-color, $light-color);
 }