Merge branch 'main' into patch-1

Author: Adzouz

.changeset/brave-years-yell.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': patch
+---
+
+fix: glitch of height on inputs caused by wrong padding on IconButton

.changeset/dirty-readers-listen.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+export Popover.Anchor

.changeset/fast-squids-hammer.md

@@ -0,0 +1,5 @@
+---
+'@strapi/icons': minor
+---
+
+New icons (Files, Graph, TrendUp and Webhooks)

.changeset/pre.json

@@ -14,6 +14,7 @@
     "beige-rings-destroy",
     "blue-humans-sin",
     "blue-tomatoes-allow",
+    "brave-years-yell",
     "bright-grapes-juggle",
     "brown-lamps-wink",
     "calm-pets-live",
@@ -29,25 +30,29 @@
     "cuddly-jokes-stare",
     "curvy-candles-fly",
     "dirty-pumpkins-battle",
+    "dirty-readers-listen",
     "dull-ants-wash",
     "eight-humans-brake",
     "fair-swans-shake",
     "famous-dryers-float",
     "famous-elephants-confess",
     "famous-starfishes-marry",
     "famous-trainers-pretend",
+    "fast-squids-hammer",
     "few-cameras-joke",
     "fifty-hats-itch",
     "fresh-turkeys-approve",
     "funny-bulldogs-kneel",
     "giant-chicken-itch",
+    "good-badgers-brush",
     "gorgeous-zoos-unite",
     "green-ligers-rush",
     "green-starfishes-retire",
     "grumpy-peaches-design",
     "grumpy-seahorses-give",
     "happy-squids-remain",
     "healthy-masks-poke",
+    "heavy-ducks-complain",
     "hip-roses-wash",
     "hip-sloths-occur",
     "honest-crabs-crash",
@@ -115,13 +120,15 @@
     "swift-garlics-cross",
     "tasty-suits-sit",
     "tender-waves-fry",
+    "thick-chefs-return",
     "thirty-wasps-explode",
     "three-eels-clap",
     "tidy-eggs-sleep",
     "tidy-games-divide",
     "tidy-rats-camp",
     "tiny-cups-reflect",
     "tiny-melons-help",
+    "tricky-plants-sip",
     "tricky-pumpkins-impress",
     "twelve-dogs-protect",
     "twenty-drinks-look",
@@ -131,6 +138,8 @@
     "weak-clouds-breathe",
     "weak-eels-jump",
     "wild-colts-return",
-    "wild-geese-lay"
+    "wild-geese-lay",
+    "wise-doors-hope",
+    "witty-tips-kick"
   ]
 }

.changeset/thick-chefs-return.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+fix: modify the creatable ui to reflect the desired style

.changeset/thirty-tigers-fix.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+fix: dark mode switch in stories and colors page

.changeset/witty-tips-kick.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+export popover arrow

.github/workflows/bundle-size.yml

@@ -39,3 +39,4 @@ jobs:
         uses: preactjs/compressed-size-action@v2
         with:
           pattern: '**/dist/**/*.{cjs,js,mjs,svg}'
+          install-script: 'yarn install'

docs/.storybook/main.ts

@@ -5,10 +5,11 @@ const config: StorybookConfig = {
   stories: ['../stories/**/*.mdx', '../stories/**/*.stories.tsx'],
 
   addons: [
-    getAbsolutePath('@storybook/addon-essentials'),
-    getAbsolutePath('storybook-dark-mode'),
     getAbsolutePath('@chromatic-com/storybook'),
     getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@storybook/addon-designs'),
+    getAbsolutePath('@storybook/addon-docs'),
+    getAbsolutePath('@vueless/storybook-dark-mode'),
   ],
 
   staticDirs: ['../public'],

docs/.storybook/preview.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { Preview } from '@storybook/react';
-import { useDarkMode } from 'storybook-dark-mode';
+import { Preview } from '@storybook/react-vite';
+import { useDarkMode } from '@vueless/storybook-dark-mode';
 import { parse } from 'qs';
 
 import { DesignSystemProvider, Box, darkTheme, lightTheme, type BoxProps } from '@strapi/design-system';
 
-import { DocsContainer, Unstyled } from '@storybook/blocks';
+import { DocsContainer, Unstyled } from '@storybook/addon-docs/blocks';
 import { styled, DefaultTheme } from 'styled-components';
 import { MARKDOWN_OVERRIDES } from '../components/Markdown';
 
@@ -45,15 +45,87 @@ const createCustomTheme = (theme: DefaultTheme, base: 'light' | 'dark' = 'light'
 
 const themeQueryURL = parse(document.location.search).theme;
 
-const Theme = ({ children, ...props }: BoxProps) => {
-  const isDarkAddon = useDarkMode();
-  const [isDark, setIsDark] = React.useState(themeQueryURL || isDarkAddon);
+// Reusable hook to get dark mode state from localStorage
+export const useLocalStorageDarkMode = () => {
+  const [isDark, setIsDark] = React.useState(() => {
+    if (themeQueryURL) return themeQueryURL;
+
+    const themeParameters = localStorage.getItem('sb-addon-themes-3');
+    let theme = 'light';
+    try {
+      theme = JSON.parse(themeParameters || '{}').current;
+    } catch (error) {
+      console.error(error);
+    }
+    return theme === 'dark';
+  });
 
   React.useEffect(() => {
-    if (!themeQueryURL && isDarkAddon !== isDark) {
-      setIsDark(isDarkAddon);
+    const handleStorageChange = () => {
+      const themeParameters = localStorage.getItem('sb-addon-themes-3');
+      let theme = 'light';
+      try {
+        theme = JSON.parse(themeParameters || '{}').current;
+      } catch (error) {
+        console.error(error);
+      }
+      setIsDark(theme === 'dark');
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+    return () => window.removeEventListener('storage', handleStorageChange);
+  }, []);
+
+  return isDark;
+};
+
+// Safe hook that tries useDarkMode first, then falls back to localStorage
+export const useSafeDarkMode = () => {
+  try {
+    return useDarkMode();
+  } catch (error) {
+    return useLocalStorageDarkMode();
+  }
+};
+
+const Theme = ({ children, isDarkMode, ...props }: BoxProps & { isDarkMode?: boolean }) => {
+  const [isDark, setIsDark] = React.useState(() => {
+    if (themeQueryURL) return themeQueryURL;
+    if (isDarkMode !== undefined) return isDarkMode;
+
+    const themeParameters = localStorage.getItem('sb-addon-themes-3');
+    let theme = 'light';
+    try {
+      theme = JSON.parse(themeParameters || '{}').current;
+    } catch (error) {
+      console.error(error);
     }
-  }, [isDarkAddon, isDark]);
+    return theme === 'dark';
+  });
+
+  React.useEffect(() => {
+    if (!themeQueryURL && isDarkMode !== undefined && isDarkMode !== isDark) {
+      setIsDark(isDarkMode);
+    }
+  }, [isDarkMode, isDark]);
+
+  // Listen for theme changes in localStorage for docs
+  React.useEffect(() => {
+    if (isDarkMode === undefined) {
+      const handleStorageChange = () => {
+        const themeParameters = localStorage.getItem('sb-addon-themes-3');
+        let theme = 'light';
+        try {
+          theme = JSON.parse(themeParameters || '{}').current;
+        } catch (error) {
+          console.error(error);
+        }
+        setIsDark(theme === 'dark');
+      };
+      window.addEventListener('storage', handleStorageChange);
+      return () => window.removeEventListener('storage', handleStorageChange);
+    }
+  }, [isDarkMode]);
 
   return (
     <DesignSystemProvider locale="en" theme={isDark ? darkTheme : lightTheme}>
@@ -109,11 +181,14 @@ const Main = styled(Box)`
 
 const preview: Preview = {
   decorators: [
-    (Story) => (
-      <Theme>
-        <Story />
-      </Theme>
-    ),
+    (Story) => {
+      const isDarkMode = useDarkMode();
+      return (
+        <Theme isDarkMode={isDarkMode}>
+          <Story />
+        </Theme>
+      );
+    },
   ],
 
   parameters: {