Merge main into renovate/rollup

.changeset/giant-bulldogs-chew.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/metal-jars-appear.md

@@ -0,0 +1,2 @@
+---
+---

.gitignore

@@ -1,6 +1,6 @@
 node_modules
 docs/storybook-static
-docs/.storybook/preview.css
+docs/.storybook/tailwind-build.css
 .DS_Store
 dist
 .turbo

.stylelintignore

@@ -4,4 +4,3 @@ packages/components/dist/*
 packages/components/locales/*
 docs/storybook-static/*
 docs/tailwind.css
-docs/preview.css

docs/.storybook/main.ts

@@ -1,4 +1,4 @@
-import path, { join, dirname } from 'path'
+import path, { dirname, join } from 'path'
 import type { StorybookConfig } from '@storybook/react-vite'
 import { nodePolyfills } from 'vite-plugin-node-polyfills'
 

docs/.storybook/preview.css

@@ -0,0 +1,113 @@
+pre code {
+  font-family: ui-monospace, Menlo, Monaco, 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace',
+    'Source Code Pro', 'Droid Sans Mono', 'Courier New', monospace !important;
+  font-size: 13px !important;
+  line-height: 19px;
+  border: 1px solid hsla(203, 50%, 30%, 0.15);
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+  border-radius: 4px;
+  padding: 20px !important;
+  font-weight: 300 !important;
+  -webkit-font-smoothing: antialiased;
+}
+
+.sbdocs-wrapper {
+  padding: 2.5rem;
+}
+
+.sbdocs.sbdocs-content {
+  max-width: unset;
+
+  :where(:not(.sb-anchor, .sb-unstyled, .sb-unstyled *)) {
+    color: var(--color-purple-800);
+  }
+
+  :where(h1:not(.sb-anchor, .sb-unstyled, .sb-unstyled h1)) {
+    font-family: var(--typography-display-0-font-family);
+    font-weight: var(--typography-heading-1-font-weight);
+    font-size: var(--typography-heading-1-font-size);
+    line-height: var(--typography-heading-1-line-height);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  :where(h2:not(.sb-anchor, .sb-unstyled, .sb-unstyled h2)) {
+    font-family: var(--typography-heading-2-font-family);
+    font-weight: var(--typography-heading-2-font-weight);
+    font-size: var(--typography-heading-2-font-size);
+    line-height: var(--typography-heading-2-line-height);
+    letter-spacing: var(--typography-heading-2-letter-spacing);
+    border-bottom: 0;
+    text-decoration: none;
+  }
+
+  :where(h3:not(.sb-anchor, .sb-unstyled, .sb-unstyled h3)) {
+    font-family: var(--typography-heading-3-font-family);
+    font-weight: var(--typography-heading-3-font-weight);
+    font-size: var(--typography-heading-3-font-size);
+    line-height: var(--typography-heading-3-line-height);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
+  }
+
+  :where(h4:not(.sb-anchor, .sb-unstyled, .sb-unstyled h4)) {
+    font-family: var(--typography-heading-4-font-family);
+    font-weight: var(--typography-heading-4-font-weight);
+    font-size: var(--typography-heading-4-font-size);
+    line-height: var(--typography-heading-4-line-height);
+    letter-spacing: var(--typography-heading-4-letter-spacing);
+  }
+
+  :where(h5:not(.sb-anchor, .sb-unstyled, .sb-unstyled h5)) {
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    font-size: var(--typography-heading-5-font-size);
+    line-height: var(--typography-heading-5-line-height);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+
+  :where(p:not(.sb-anchor, .sb-unstyled, .sb-unstyled p)) {
+    margin: 0 0 var(--spacing-16);
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+
+    code {
+      font-size: 0.9em;
+      margin: var(--spacing-2);
+      padding: var(--spacing-4) var(--spacing-6);
+    }
+  }
+
+  :where(a:not(.sb-anchor, .sb-unstyled, .sb-unstyled a)) {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    color: var(--color-blue-500);
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    code {
+      color: inherit;
+      text-decoration: underline;
+    }
+  }
+
+  .sbdocs-a {
+    font: inherit;
+  }
+
+  :where(li:not(.sb-anchor, .sb-unstyled, .sb-unstyled li)) {
+    margin: 0;
+    padding: 0;
+    font-family: var(--typography-paragraph-body-font-family);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    font-size: var(--typography-paragraph-body-font-size);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+  }
+}

docs/.storybook/preview.tsx

@@ -1,10 +1,11 @@
 import '../../packages/components/styles/global.css'
 import 'highlight.js/styles/a11y-light.css'
 import './preview.css'
+import './tailwind-build.css'
 
 import React, { useEffect } from 'react'
 import { decorators as bgDecorators } from '@storybook/addon-backgrounds/preview'
-import { Decorator, Preview } from '@storybook/react'
+import { type Decorator, type Preview } from '@storybook/react'
 import { KaizenProvider } from '~components/KaizenProvider'
 import { I18nProvider } from '~components/__react-aria-components__'
 import { ReversedColors } from '~components/__utilities__/v3'
@@ -155,30 +156,20 @@ const preview = {
         const groupA = titleA.split('/')[0]
         const groupB = titleB.split('/')[0]
 
-        const groups = [
-          'Introduction',
-          'Guides',
-          'Actions',
-          'Containers',
-          'Illustrations',
-          'Layout',
-          'Overlays',
-          'Components',
-          'Pages',
-        ]
+        const groups = ['Introduction', 'Guides', 'Components', 'Pages']
         const groupDifference = groups.indexOf(groupA) - groups.indexOf(groupB)
         if (groupDifference !== 0) {
           // Sort stories of different groups manually by the groups array
           return groupDifference
         }
 
         // Sort Kaizen Provider to top
-        if (a.title.includes('Kaizen Provider')) {
+        if (a.title.includes('KaizenProvider')) {
           // If both are Kaizen Provider, do not sort
-          if (b.title.includes('Kaizen Provider')) return 0
+          if (b.title.includes('KaizenProvider')) return 0
           return -1
         }
-        if (b.title.includes('Kaizen Provider')) return 1
+        if (b.title.includes('KaizenProvider')) return 1
 
         const titleDifference = titleA.localeCompare(titleB, undefined, {
           numeric: true,

docs/components/DocsContainer/BackToTop/BackToTop.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes, useLayoutEffect } from 'react'
+import React, { useLayoutEffect, type HTMLAttributes } from 'react'
 
 export const BackToTop = ({
   children,

docs/components/DocsContainer/DefaultDocsContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
-import { DocsContainer, DocsContainerProps, DocsContext } from '@storybook/blocks'
+import { DocsContainer, DocsContext, type DocsContainerProps } from '@storybook/blocks'
 import { BackToTop } from './BackToTop'
-import { Content, Main, DocsWrapper } from './Layout'
+import { Content, DocsWrapper, Main } from './Layout'
 
 type LayoutProps = { children: React.ReactNode }
 

docs/components/DocsContainer/Layout/Layout.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import React, { type ReactNode } from 'react'
 import styles from './Layout.module.scss'
 
 export const Main = ({ children }: { children: ReactNode }): JSX.Element => (

docs/components/DosAndDonts/DosAndDonts.tsx

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { Canvas, Unstyled } from '@storybook/blocks'
 import classnames from 'classnames'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 import styles from './DosAndDonts.module.css'
 
 export const DosAndDonts = ({

docs/components/LinkTo/LinkTo.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { linkTo } from '@storybook/addon-links'
 import classnames from 'classnames'
 
@@ -18,7 +18,7 @@ export const LinkTo = ({
     type="button"
     onClick={linkTo(pageId, sectionName)}
     className={classnames(
-      'bg-transparent border-none text-blue-400 hover:underline cursor-pointer p-0',
+      'bg-transparent border-none text-blue-500 hover:underline cursor-pointer p-0',
       className,
     )}
     {...restButtonAttributes}

docs/components/NoClipCanvas/NoClipCanvas.tsx

@@ -1,5 +1,5 @@
 import React, { useId, useState } from 'react'
-import { Source, SourceProps, Story, Unstyled } from '@storybook/blocks'
+import { Source, Story, Unstyled, type SourceProps } from '@storybook/blocks'
 import classnames from 'classnames'
 import styles from './NoClipCanvas.module.scss'
 

docs/components/ResourceLinks/ResourceLinks.tsx

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from 'react'
+import React, { type HTMLAttributes } from 'react'
 import { Unstyled } from '@storybook/blocks'
 import classNames from 'classnames'
 import { Text } from '~components/Text'
-import { Icon } from '~components/__future__/Icon'
+import { Icon } from '~components/__rc__/Icon'
 
 type ResourceLinkProps = {
   href: string
@@ -15,7 +15,7 @@ const ResourceLink = ({ href, text }: ResourceLinkProps): JSX.Element => (
       href={href}
       target="_blank"
       rel="noopener noreferrer nofollow"
-      className="border rounded inline-flex gap-4 items-center p-8 text-blue-400 no-underline"
+      className="border rounded inline-flex gap-4 items-center p-8 text-blue-500 no-underline"
     >
       <Text variant="small" tag="span" classNameOverride="text-inherit">
         {text}