fix(lsd-react): use theme's name as the cache key when generating global styles

packages/lsd-react/.storybook/themes.ts

@@ -17,7 +17,7 @@ const createThemes = () => {
   const themes = fonts.map((font) => [
     createTheme(
       {
-        name: `${defaultThemes.light.name} (${font})`,
+        // name: `${defaultThemes.light.name} (${font})`,
         ...themeProps,
         typographyGlobal: {
           genericFontFamily: font,

packages/lsd-react/src/components/Theme/createTheme.ts

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react'
+import { createCounter } from '../../utils/counter.util'
 import { pairs } from '../../utils/object.utils'
 import { baseTheme } from './baseTheme'
 import { THEME_BREAKPOINTS, THEME_TYPOGRAPHY_VARIANTS } from './constants'
@@ -13,6 +14,9 @@ import type {
   VariantThemeProperties,
 } from './types'
 
+const counter = createCounter()
+const generateName = (prefix: string) => `${prefix}-${counter()}`
+
 const createTypographyStyles = (theme: CreateThemeProps, defaultTheme: Theme) =>
   pairs<TypographyVariants>(THEME_TYPOGRAPHY_VARIANTS, (variant) => ({
     ...defaultTheme.typography[variant],
@@ -130,7 +134,7 @@ export const createTheme = (
   from = baseTheme,
 ): Theme => {
   const theme: Theme = {
-    name: props.name ?? from.name,
+    name: props.name ?? generateName(from.name),
     typography: createTypographyStyles(props, from),
     typographyGlobal: createTypographyGlobalStyles(props, from),
     breakpoints: createBreakpointStyles(props, from),

packages/lsd-react/src/components/Theme/globalStyles.ts

@@ -117,7 +117,7 @@ export const createThemeGlobalStyles = (() => {
   const cache: any = {}
 
   return (theme: Theme): ReturnType<typeof generateThemeGlobalStyles> => {
-    const key = theme as any as string
+    const key = theme.name
 
     if (
       cache[key] &&