@thunderid/react 0.12.0 → 0.13.0

package/dist/cjs/components/primitives/Avatar/Avatar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.cjs","names":["Avatar: FC<AvatarProps>","useTheme","resolvedIcon: ResolvedLogo | undefined","hasImage: boolean","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The avatar image. Accepts a plain URL, or any `resolveLogoUri`-compatible\n   * spec (`emoji:<glyph>`, or `avatar:shape=...,variant=...,content=...,colors=...,bg=...`).\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const resolvedIcon: ResolvedLogo | undefined = useMemo(\n    () => (imageUrl ? resolveLogoUri(imageUrl, name ?? alt) : undefined),\n    [imageUrl, name, alt],\n  );\n\n  const hasImage: boolean = resolvedIcon?.kind !== 'emoji' && Boolean(resolvedIcon?.imgSrc);\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || hasImage) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, hasImage]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (resolvedIcon?.kind === 'emoji') {\n      return (\n        <span role=\"img\" aria-label={alt}>\n          {resolvedIcon.glyph}\n        </span>\n      );\n    }\n\n    if (hasImage) {\n      return (\n        <img\n          src={resolvedIcon?.imgSrc}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;;AAkDA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CAEpE,MAAMC,wCACG,mDAA0B,UAAU,QAAQ,IAAI,GAAG,QAC1D;EAAC;EAAU;EAAM;EAAI,CACtB;CAED,MAAMC,WAAoB,cAAc,SAAS,WAAW,QAAQ,cAAc,OAAO;CAEzF,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,8BAAU,OAAO,aAAa,MAAM,kCAhBvB;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,cAAc,SAAS,QACzB,QACE,2CAAC;GAAK,MAAK;GAAM,cAAY;aAC1B,aAAa;IACT;AAIX,MAAI,SACF,QACE,2CAAC;GACC,KAAK,cAAc;GACd;GACL,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,2CAAC,SAAI,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,2CAAC;GACC,OAAM;GACN,SAAQ;GACR,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,2CAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,2CAAC;EACC,gHAC+B,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,2FACsB,UAAU,MAAM,QAAQ,CAAC,EACtD,iGAA+C,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}
+{"version":3,"file":"Avatar.cjs","names":["Avatar: FC<AvatarProps>","useTheme","resolvedIcon: ResolvedLogo | undefined","hasImage: boolean","hash: number","charCode: number","seed: number","hue1: number","hue2: number","saturation: number","styles: ReturnType<typeof useStyles>","useStyles","isDefaultState: boolean","cx"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC, JSX, useMemo} from 'react';\nimport useStyles from './Avatar.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\nexport interface AvatarProps {\n  /**\n   * Alternative text for the avatar image\n   */\n  alt?: string;\n  /**\n   * Background generation strategy\n   * - 'random': Generate background color based on ASCII values of the name\n   * - 'none': Use default theme background\n   * - string: Use custom background color\n   * @default 'random'\n   */\n  background?: 'random' | 'none' | string;\n  /**\n   * Optional className for the avatar\n   */\n  className?: string;\n  /**\n   * The avatar image. Accepts a plain URL, or any `resolveLogoUri`-compatible\n   * spec (`emoji:<glyph>`, or `avatar:shape=...,variant=...,content=...,colors=...,bg=...`).\n   */\n  imageUrl?: string;\n  /**\n   * Loading state of the avatar\n   */\n  isLoading?: boolean;\n  /**\n   * The name to use for generating initials when no image is provided\n   */\n  name?: string;\n  /**\n   * The size of the avatar in pixels\n   */\n  size?: number;\n  /**\n   * The variant of the avatar shape\n   * @default 'circular'\n   */\n  variant?: 'circular' | 'square';\n}\n\nexport const Avatar: FC<AvatarProps> = ({\n  alt = 'User avatar',\n  background = 'random',\n  className = '',\n  imageUrl,\n  name,\n  size = 64,\n  variant = 'circular',\n  isLoading = false,\n}: AvatarProps): JSX.Element => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n\n  const resolvedIcon: ResolvedLogo | undefined = useMemo(\n    () => (imageUrl ? resolveLogoUri(imageUrl, name ?? alt) : undefined),\n    [imageUrl, name, alt],\n  );\n\n  const hasImage: boolean = resolvedIcon?.kind !== 'emoji' && Boolean(resolvedIcon?.imgSrc);\n\n  const generateBackgroundColor = (inputString: string): string => {\n    const hash: number = inputString.split('').reduce((acc: number, char: string) => {\n      const charCode: number = char.charCodeAt(0);\n\n      return ((acc << 5) - acc + charCode) & 0xffffffff;\n    }, 0);\n\n    const seed: number = Math.abs(hash);\n\n    const generateColor = (offset: number): string => {\n      const hue1: number = (seed + offset) % 360;\n      const hue2: number = (hue1 + 60 + (seed % 120)) % 360;\n\n      const saturation: number = 70 + (seed % 20);\n      const lightness1: number = 55 + (seed % 15);\n      const lightness2: number = 60 + ((seed + offset) % 15);\n\n      return `hsl(${hue1}, ${saturation}%, ${lightness1}%), hsl(${hue2}, ${saturation}%, ${lightness2}%)`;\n    };\n\n    const angle: number = 45 + (seed % 91);\n\n    const colors: string = generateColor(seed);\n    return `linear-gradient(${angle}deg, ${colors})`;\n  };\n\n  const backgroundColor: string | undefined = useMemo(() => {\n    if (!name || hasImage) {\n      return undefined;\n    }\n\n    if (background === 'random') {\n      return generateBackgroundColor(name);\n    }\n\n    if (background === 'none') {\n      return undefined;\n    }\n\n    return background;\n  }, [background, name, hasImage]);\n\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, size, variant, backgroundColor);\n\n  // Determine if we're in the default state (no image, no name, not loading)\n  const isDefaultState: boolean = !imageUrl && !name && !isLoading;\n\n  const getInitials = (fullName: string): string =>\n    fullName\n      .split(' ')\n      .map((part: string) => part[0])\n      .slice(0, 2)\n      .join('')\n      .toUpperCase();\n\n  const renderContent = (): JSX.Element | string => {\n    if (resolvedIcon?.kind === 'emoji') {\n      return (\n        <span role=\"img\" aria-label={alt}>\n          {resolvedIcon.glyph}\n        </span>\n      );\n    }\n\n    if (hasImage) {\n      return (\n        <img\n          src={resolvedIcon?.imgSrc}\n          alt={alt}\n          className={cx(withVendorCSSClassPrefix(bem('avatar', 'image')), styles['image'])}\n        />\n      );\n    }\n\n    if (name) {\n      return getInitials(name);\n    }\n\n    if (isLoading) {\n      return <div className={cx(withVendorCSSClassPrefix(bem('avatar', 'skeleton')), styles['skeleton'])} />;\n    }\n\n    // Default user icon\n    return (\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 640 640\"\n        className={cx(withVendorCSSClassPrefix(bem('avatar', 'icon')), styles['icon'])}\n      >\n        <path d=\"M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z\" />\n      </svg>\n    );\n  };\n\n  return (\n    <div\n      className={cx(\n        withVendorCSSClassPrefix(bem('avatar')),\n        styles['avatar'],\n        styles['variant'],\n        withVendorCSSClassPrefix(bem('avatar', null, variant)),\n        isDefaultState && withVendorCSSClassPrefix(bem('avatar', 'default')),\n        className,\n      )}\n    >\n      {renderContent()}\n    </div>\n  );\n};\n\nexport default Avatar;\n"],"mappings":";;;;;;;;;;;;AAkDA,MAAaA,UAA2B,EACtC,MAAM,eACN,aAAa,UACb,YAAY,IACZ,UACA,MACA,OAAO,IACP,UAAU,YACV,YAAY,YACkB;CAC9B,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CAEpE,MAAMC,wCACG,mDAA0B,UAAU,QAAQ,IAAI,GAAG,QAC1D;EAAC;EAAU;EAAM;EAAI,CACtB;CAED,MAAMC,WAAoB,cAAc,SAAS,WAAW,QAAQ,cAAc,OAAO;CAEzF,MAAM,2BAA2B,gBAAgC;EAC/D,MAAMC,OAAe,YAAY,MAAM,GAAG,CAAC,QAAQ,KAAa,SAAiB;GAC/E,MAAMC,WAAmB,KAAK,WAAW,EAAE;AAE3C,WAAS,OAAO,KAAK,MAAM,WAAY;KACtC,EAAE;EAEL,MAAMC,OAAe,KAAK,IAAI,KAAK;EAEnC,MAAM,iBAAiB,WAA2B;GAChD,MAAMC,QAAgB,OAAO,UAAU;GACvC,MAAMC,QAAgB,OAAO,KAAM,OAAO,OAAQ;GAElD,MAAMC,aAAqB,KAAM,OAAO;AAIxC,UAAO,OAAO,KAAK,IAAI,WAAW,KAHP,KAAM,OAAO,GAGU,UAAU,KAAK,IAAI,WAAW,KAFrD,MAAO,OAAO,UAAU,GAE6C;;AAMlG,SAAO,mBAHe,KAAM,OAAO,GAGH,OADT,cAAc,KAAK,CACI;;CAmBhD,MAAMC,SAAuCC,8BAAU,OAAO,aAAa,MAAM,kCAhBvB;AACxD,MAAI,CAAC,QAAQ,SACX;AAGF,MAAI,eAAe,SACjB,QAAO,wBAAwB,KAAK;AAGtC,MAAI,eAAe,OACjB;AAGF,SAAO;IACN;EAAC;EAAY;EAAM;EAAS,CAAC,CAE0E;CAG1G,MAAMC,iBAA0B,CAAC,YAAY,CAAC,QAAQ,CAAC;CAEvD,MAAM,eAAe,aACnB,SACG,MAAM,IAAI,CACV,KAAK,SAAiB,KAAK,GAAG,CAC9B,MAAM,GAAG,EAAE,CACX,KAAK,GAAG,CACR,aAAa;CAElB,MAAM,sBAA4C;AAChD,MAAI,cAAc,SAAS,QACzB,QACE,2CAAC;GAAK,MAAK;GAAM,cAAY;aAC1B,aAAa;IACT;AAIX,MAAI,SACF,QACE,2CAAC;GACC,KAAK,cAAc;GACd;GACL,WAAWC,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;IAChF;AAIN,MAAI,KACF,QAAO,YAAY,KAAK;AAG1B,MAAI,UACF,QAAO,2CAAC,SAAI,WAAWA,kGAAgC,UAAU,WAAW,CAAC,EAAE,OAAO,YAAY,GAAI;AAIxG,SACE,2CAAC;GACC,OAAM;GACN,SAAQ;GACR,WAAWA,kGAAgC,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;aAE9E,2CAAC,UAAK,GAAE,ygBAAygB;IAC7gB;;AAIV,QACE,2CAAC;EACC,WAAWA,kGACoB,SAAS,CAAC,EACvC,OAAO,WACP,OAAO,2FACsB,UAAU,MAAM,QAAQ,CAAC,EACtD,iGAA+C,UAAU,UAAU,CAAC,EACpE,UACD;YAEA,eAAe;GACZ"}

package/dist/cjs/components/primitives/Avatar/Avatar.styles.cjs

@@ -1,8 +1,7 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/primitives/Avatar/Avatar.styles.ts
 /**
@@ -15,7 +14,7 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, size, variant, backgroundColor) => (0, react.useMemo)(() => {
-	const baseAvatar = __emotion_css.css`
+	const baseAvatar = require_emotion.css`
       align-items: center;
       background: ${backgroundColor || theme.vars.colors.background.surface};
       border: ${backgroundColor ? "none" : `1px solid ${theme.vars.colors.border}`};
@@ -32,19 +31,19 @@ const useStyles = (theme, colorScheme, size, variant, backgroundColor) => (0, re
       width: ${size}px;
     `;
 	const variantStyles = {
-		circular: __emotion_css.css`
+		circular: require_emotion.css`
         border-radius: 50%;
       `,
-		square: __emotion_css.css`
+		square: require_emotion.css`
         border-radius: 8px;
       `
 	};
-	const imageStyles = __emotion_css.css`
+	const imageStyles = require_emotion.css`
       height: 100%;
       object-fit: cover;
       width: 100%;
     `;
-	const skeletonStyles = __emotion_css.css`
+	const skeletonStyles = require_emotion.css`
       width: 100%;
       height: 100%;
       background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
@@ -63,7 +62,7 @@ const useStyles = (theme, colorScheme, size, variant, backgroundColor) => (0, re
     `;
 	return {
 		avatar: baseAvatar,
-		icon: __emotion_css.css`
+		icon: require_emotion.css`
       width: 60%;
       height: 60%;
       fill: ${backgroundColor ? "#ffffff" : theme.vars.colors.text.secondary};

package/dist/cjs/components/primitives/Avatar/Avatar.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styles.cjs","names":["baseAvatar: string","variantStyles: Record<string, string>","imageStyles: string","skeletonStyles: string"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type AvatarVariant = 'circular' | 'square';\n\n/**\n * Creates styles for the Avatar component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the avatar in pixels\n * @param variant - The avatar variant\n * @param backgroundColor - The background color for the avatar\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  size: number,\n  variant: AvatarVariant,\n  backgroundColor?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseAvatar: string = css`\n      align-items: center;\n      background: ${backgroundColor || theme.vars.colors.background.surface};\n      border: ${backgroundColor ? 'none' : `1px solid ${theme.vars.colors.border}`};\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n      color: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.primary};\n      display: flex;\n      font-size: ${size * 0.4}px;\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 600;\n      height: ${size}px;\n      justify-content: center;\n      overflow: hidden;\n      text-shadow: ${backgroundColor ? '0 1px 2px rgba(0, 0, 0, 0.1)' : 'none'};\n      width: ${size}px;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      circular: css`\n        border-radius: 50%;\n      `,\n      square: css`\n        border-radius: 8px;\n      `,\n    };\n\n    const imageStyles: string = css`\n      height: 100%;\n      object-fit: cover;\n      width: 100%;\n    `;\n\n    const skeletonStyles: string = css`\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n      background-size: 200% 100%;\n      animation: skeleton-loading 1.5s infinite;\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n\n      @keyframes skeleton-loading {\n        0% {\n          background-position: -200% 0;\n        }\n        100% {\n          background-position: 200% 0;\n        }\n      }\n    `;\n\n    const iconStyles: string = css`\n      width: 60%;\n      height: 60%;\n      fill: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.secondary};\n      opacity: 0.8;\n    `;\n\n    return {\n      avatar: baseAvatar,\n      icon: iconStyles,\n      image: imageStyles,\n      skeleton: skeletonStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, size, variant, backgroundColor]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,MACA,SACA,6CAEc;CACZ,MAAMA,aAAqB,iBAAG;;oBAEd,mBAAmB,MAAM,KAAK,OAAO,WAAW,QAAQ;gBAC5D,kBAAkB,SAAS,aAAa,MAAM,KAAK,OAAO,SAAS;uBAC5D,YAAY,aAAa,QAAQ,MAAM;eAC/C,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,QAAQ;;mBAEzD,OAAO,GAAI;qBACT,MAAM,KAAK,WAAW,WAAW;;gBAEtC,KAAK;;;qBAGA,kBAAkB,iCAAiC,OAAO;eAChE,KAAK;;CAGhB,MAAMC,gBAAwC;EAC5C,UAAU,iBAAG;;;EAGb,QAAQ,iBAAG;;;EAGZ;CAED,MAAMC,cAAsB,iBAAG;;;;;CAM/B,MAAMC,iBAAyB,iBAAG;;;;;;uBAMf,YAAY,aAAa,QAAQ,MAAM;;;;;;;;;;;AAmB1D,QAAO;EACL,QAAQ;EACR,MATyB,iBAAG;;;cAGpB,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAOvE,OAAO;EACP,UAAU;EACV,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAM;CAAS;CAAgB,CAAC;AAE1D,4BAAe"}
+{"version":3,"file":"Avatar.styles.cjs","names":["baseAvatar: string","variantStyles: Record<string, string>","imageStyles: string","skeletonStyles: string"],"sources":["../../../../../src/components/primitives/Avatar/Avatar.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nexport type AvatarVariant = 'circular' | 'square';\n\n/**\n * Creates styles for the Avatar component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the avatar in pixels\n * @param variant - The avatar variant\n * @param backgroundColor - The background color for the avatar\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  size: number,\n  variant: AvatarVariant,\n  backgroundColor?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseAvatar: string = css`\n      align-items: center;\n      background: ${backgroundColor || theme.vars.colors.background.surface};\n      border: ${backgroundColor ? 'none' : `1px solid ${theme.vars.colors.border}`};\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n      color: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.primary};\n      display: flex;\n      font-size: ${size * 0.4}px;\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 600;\n      height: ${size}px;\n      justify-content: center;\n      overflow: hidden;\n      text-shadow: ${backgroundColor ? '0 1px 2px rgba(0, 0, 0, 0.1)' : 'none'};\n      width: ${size}px;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      circular: css`\n        border-radius: 50%;\n      `,\n      square: css`\n        border-radius: 8px;\n      `,\n    };\n\n    const imageStyles: string = css`\n      height: 100%;\n      object-fit: cover;\n      width: 100%;\n    `;\n\n    const skeletonStyles: string = css`\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n      background-size: 200% 100%;\n      animation: skeleton-loading 1.5s infinite;\n      border-radius: ${variant === 'circular' ? '50%' : '8px'};\n\n      @keyframes skeleton-loading {\n        0% {\n          background-position: -200% 0;\n        }\n        100% {\n          background-position: 200% 0;\n        }\n      }\n    `;\n\n    const iconStyles: string = css`\n      width: 60%;\n      height: 60%;\n      fill: ${backgroundColor ? '#ffffff' : theme.vars.colors.text.secondary};\n      opacity: 0.8;\n    `;\n\n    return {\n      avatar: baseAvatar,\n      icon: iconStyles,\n      image: imageStyles,\n      skeleton: skeletonStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, size, variant, backgroundColor]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,MACA,SACA,6CAEc;CACZ,MAAMA,aAAqB,mBAAG;;oBAEd,mBAAmB,MAAM,KAAK,OAAO,WAAW,QAAQ;gBAC5D,kBAAkB,SAAS,aAAa,MAAM,KAAK,OAAO,SAAS;uBAC5D,YAAY,aAAa,QAAQ,MAAM;eAC/C,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,QAAQ;;mBAEzD,OAAO,GAAI;qBACT,MAAM,KAAK,WAAW,WAAW;;gBAEtC,KAAK;;;qBAGA,kBAAkB,iCAAiC,OAAO;eAChE,KAAK;;CAGhB,MAAMC,gBAAwC;EAC5C,UAAU,mBAAG;;;EAGb,QAAQ,mBAAG;;;EAGZ;CAED,MAAMC,cAAsB,mBAAG;;;;;CAM/B,MAAMC,iBAAyB,mBAAG;;;;;;uBAMf,YAAY,aAAa,QAAQ,MAAM;;;;;;;;;;;AAmB1D,QAAO;EACL,QAAQ;EACR,MATyB,mBAAG;;;cAGpB,kBAAkB,YAAY,MAAM,KAAK,OAAO,KAAK,UAAU;;;EAOvE,OAAO;EACP,UAAU;EACV,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAM;CAAS;CAAgB,CAAC;AAE1D,4BAAe"}

package/dist/cjs/components/primitives/Button/Button.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_Button_styles = require('./Button.styles.cjs');
 const require_Spinner = require('../Spinner/Spinner.cjs');
@@ -8,8 +9,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/primitives/Button/Button.tsx
 const getSpinnerWidth = (sizeVal, spacingUnit) => {
@@ -55,35 +54,32 @@ const Button = (0, react.forwardRef)(({ color = "primary", variant = "solid", si
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 		ref,
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", variant)), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", color)), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", size)), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", shape)), fullWidth ? (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "fullWidth")) : void 0, loading ? (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "loading")) : void 0, disabled || loading ? (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "disabled")) : void 0, styles["button"], styles["size"], styles["variant"], styles["fullWidth"], styles["loading"], styles["shape"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", variant)), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", color)), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", size)), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", shape)), fullWidth ? (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "fullWidth")) : void 0, loading ? (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "loading")) : void 0, disabled || loading ? (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "disabled")) : void 0, styles["button"], styles["size"], styles["variant"], styles["fullWidth"], styles["loading"], styles["shape"], className),
 		disabled: disabled || loading,
 		...rest,
 		children: [
 			loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "spinner")), styles["spinner"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "spinner")), styles["spinner"]),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.default, {
 					size,
 					color: "currentColor",
-					style: {
-						height: spinnerWidth,
-						width: spinnerWidth
-					}
+					widthOverride: spinnerWidth
 				})
 			}),
 			!loading && isIconVariant && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "icon")), styles["icon"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "icon")), styles["icon"]),
 				children: children || startIcon || endIcon
 			}),
 			!loading && !isIconVariant && startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "start-icon")), styles["startIcon"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "start-icon")), styles["startIcon"]),
 				children: startIcon
 			}),
 			!isIconVariant && children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "content")), styles["content"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "content")), styles["content"]),
 				children
 			}),
 			!loading && !isIconVariant && endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "end-icon")), styles["endIcon"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("button", "end-icon")), styles["endIcon"]),
 				children: endIcon
 			})
 		]

package/dist/cjs/components/primitives/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string | null>","useStyles","isIconVariant: boolean","spinnerWidth: string","Spinner"],"sources":["../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /**\n   * The button color that determines the color scheme\n   */\n  color?: ButtonColor;\n  /**\n   * Icon to display after the button text\n   */\n  endIcon?: ReactNode;\n  /**\n   * Whether the button should take the full width of its container\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * The shape of the button: square or round\n   */\n  shape?: 'square' | 'round';\n  /**\n   * The size of the button\n   */\n  size?: ButtonSize;\n  /**\n   * Icon to display before the button text\n   */\n  startIcon?: ReactNode;\n  /**\n   * The button variant that determines the visual style\n   */\n  variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n  if (sizeVal === 'small') {\n    return `calc(${spacingUnit} * 1.5)`;\n  }\n  if (sizeVal === 'medium') {\n    return `calc(${spacingUnit} * 2)`;\n  }\n  return `calc(${spacingUnit} * 2.5)`;\n};\n\n/**\n * Button component with multiple variants and types.\n *\n * @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n *   Click me\n * </Button>\n *\n * // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n *   Cancel\n * </Button>\n *\n * // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n *   Loading...\n * </Button>\n *\n * // Button with icons\n * <Button\n *   color=\"primary\"\n *   startIcon={<Icon />}\n *   endIcon={<Arrow />}\n * >\n *   Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(\n  (\n    {\n      color = 'primary',\n      variant = 'solid',\n      size = 'medium',\n      fullWidth = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      children,\n      className,\n      disabled,\n      style,\n      shape = 'square',\n      ...rest\n    }: ButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string | null> = useStyles(\n      theme,\n      colorScheme,\n      color,\n      variant,\n      size,\n      fullWidth,\n      disabled || false,\n      loading,\n      shape,\n    );\n\n    const isIconVariant: boolean = variant === 'icon';\n\n    const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n    return (\n      <button\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('button')),\n          withVendorCSSClassPrefix(bem('button', variant)),\n          withVendorCSSClassPrefix(bem('button', color)),\n          withVendorCSSClassPrefix(bem('button', size)),\n          withVendorCSSClassPrefix(bem('button', shape)),\n          fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n          loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n          disabled || loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n          styles['button'],\n          styles['size'],\n          styles['variant'],\n          styles['fullWidth'],\n          styles['loading'],\n          styles['shape'],\n          className,\n        )}\n        disabled={disabled || loading}\n        {...rest}\n      >\n        {loading && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n            <Spinner\n              size={size as SpinnerSize}\n              color=\"currentColor\"\n              style={{\n                height: spinnerWidth,\n                width: spinnerWidth,\n              }}\n            />\n          </span>\n        )}\n        {!loading && isIconVariant && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n            {children || startIcon || endIcon}\n          </span>\n        )}\n        {!loading && !isIconVariant && startIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n            {startIcon}\n          </span>\n        )}\n        {!isIconVariant && children && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n        )}\n        {!loading && !isIconVariant && endIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;;AAiDA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,gCAKF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAwCC,8BAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,4CAAC;EACM;EACE;EACP,gHAC+B,SAAS,CAAC,iFACV,UAAU,QAAQ,CAAC,iFACnB,UAAU,MAAM,CAAC,iFACjB,UAAU,KAAK,CAAC,iFAChB,UAAU,MAAM,CAAC,EAC9C,2FAAyC,UAAU,YAAY,CAAC,GAAG,QACnE,yFAAuC,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,yFAAuC,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,2CAAC;IAAK,gHAA2C,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,2CAACC;KACO;KACN,OAAM;KACN,OAAO;MACL,QAAQ;MACR,OAAO;MACR;MACD;KACG;GAER,CAAC,WAAW,iBACX,2CAAC;IAAK,gHAA2C,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,2CAAC;IAAK,gHAA2C,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,2CAAC;IAAK,gHAA2C,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,2CAAC;IAAK,gHAA2C,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}
+{"version":3,"file":"Button.cjs","names":["Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>","useTheme","styles: Record<string, string | null>","useStyles","isIconVariant: boolean","spinnerWidth: string","cx","Spinner"],"sources":["../../../../../src/components/primitives/Button/Button.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ButtonHTMLAttributes, forwardRef, ReactNode, ForwardRefExoticComponent, RefAttributes, Ref} from 'react';\nimport useStyles from './Button.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Spinner, {SpinnerSize} from '../Spinner/Spinner';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\nexport interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {\n  /**\n   * The button color that determines the color scheme\n   */\n  color?: ButtonColor;\n  /**\n   * Icon to display after the button text\n   */\n  endIcon?: ReactNode;\n  /**\n   * Whether the button should take the full width of its container\n   */\n  fullWidth?: boolean;\n  /**\n   * Whether the button is in a loading state\n   */\n  loading?: boolean;\n  /**\n   * The shape of the button: square or round\n   */\n  shape?: 'square' | 'round';\n  /**\n   * The size of the button\n   */\n  size?: ButtonSize;\n  /**\n   * Icon to display before the button text\n   */\n  startIcon?: ReactNode;\n  /**\n   * The button variant that determines the visual style\n   */\n  variant?: ButtonVariant;\n}\n\nconst getSpinnerWidth = (sizeVal: ButtonSize, spacingUnit: string): string => {\n  if (sizeVal === 'small') {\n    return `calc(${spacingUnit} * 1.5)`;\n  }\n  if (sizeVal === 'medium') {\n    return `calc(${spacingUnit} * 2)`;\n  }\n  return `calc(${spacingUnit} * 2.5)`;\n};\n\n/**\n * Button component with multiple variants and types.\n *\n * @example\n * ```tsx\n * // Primary solid button\n * <Button color=\"primary\" variant=\"solid\">\n *   Click me\n * </Button>\n *\n * // Secondary outline button\n * <Button color=\"secondary\" variant=\"outline\" size=\"large\">\n *   Cancel\n * </Button>\n *\n * // Text button with loading state\n * <Button color=\"tertiary\" variant=\"text\" loading>\n *   Loading...\n * </Button>\n *\n * // Button with icons\n * <Button\n *   color=\"primary\"\n *   startIcon={<Icon />}\n *   endIcon={<Arrow />}\n * >\n *   Save and Continue\n * </Button>\n * ```\n */\nconst Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>> = forwardRef<\n  HTMLButtonElement,\n  ButtonProps\n>(\n  (\n    {\n      color = 'primary',\n      variant = 'solid',\n      size = 'medium',\n      fullWidth = false,\n      loading = false,\n      startIcon,\n      endIcon,\n      children,\n      className,\n      disabled,\n      style,\n      shape = 'square',\n      ...rest\n    }: ButtonProps,\n    ref: Ref<HTMLButtonElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string | null> = useStyles(\n      theme,\n      colorScheme,\n      color,\n      variant,\n      size,\n      fullWidth,\n      disabled || false,\n      loading,\n      shape,\n    );\n\n    const isIconVariant: boolean = variant === 'icon';\n\n    const spinnerWidth: string = getSpinnerWidth(size, theme.vars.spacing.unit);\n\n    return (\n      <button\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('button')),\n          withVendorCSSClassPrefix(bem('button', variant)),\n          withVendorCSSClassPrefix(bem('button', color)),\n          withVendorCSSClassPrefix(bem('button', size)),\n          withVendorCSSClassPrefix(bem('button', shape)),\n          fullWidth ? withVendorCSSClassPrefix(bem('button', 'fullWidth')) : undefined,\n          loading ? withVendorCSSClassPrefix(bem('button', 'loading')) : undefined,\n          disabled || loading ? withVendorCSSClassPrefix(bem('button', 'disabled')) : undefined,\n          styles['button'],\n          styles['size'],\n          styles['variant'],\n          styles['fullWidth'],\n          styles['loading'],\n          styles['shape'],\n          className,\n        )}\n        disabled={disabled || loading}\n        {...rest}\n      >\n        {loading && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'spinner')), styles['spinner'])}>\n            <Spinner size={size as SpinnerSize} color=\"currentColor\" widthOverride={spinnerWidth} />\n          </span>\n        )}\n        {!loading && isIconVariant && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'icon')), styles['icon'])}>\n            {children || startIcon || endIcon}\n          </span>\n        )}\n        {!loading && !isIconVariant && startIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'start-icon')), styles['startIcon'])}>\n            {startIcon}\n          </span>\n        )}\n        {!isIconVariant && children && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'content')), styles['content'])}>{children}</span>\n        )}\n        {!loading && !isIconVariant && endIcon && (\n          <span className={cx(withVendorCSSClassPrefix(bem('button', 'end-icon')), styles['endIcon'])}>{endIcon}</span>\n        )}\n      </button>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":";;;;;;;;;;;;;AAiDA,MAAM,mBAAmB,SAAqB,gBAAgC;AAC5E,KAAI,YAAY,QACd,QAAO,QAAQ,YAAY;AAE7B,KAAI,YAAY,SACd,QAAO,QAAQ,YAAY;AAE7B,QAAO,QAAQ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiC7B,MAAMA,gCAKF,EACE,QAAQ,WACR,UAAU,SACV,OAAO,UACP,YAAY,OACZ,UAAU,OACV,WACA,SACA,UACA,WACA,UACA,OACA,QAAQ,SACR,GAAG,QAEL,QACG;CACH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAwCC,8BAC5C,OACA,aACA,OACA,SACA,MACA,WACA,YAAY,OACZ,SACA,MACD;CAED,MAAMC,gBAAyB,YAAY;CAE3C,MAAMC,eAAuB,gBAAgB,MAAM,MAAM,KAAK,QAAQ,KAAK;AAE3E,QACE,4CAAC;EACM;EACE;EACP,WAAWC,kGACoB,SAAS,CAAC,iFACV,UAAU,QAAQ,CAAC,iFACnB,UAAU,MAAM,CAAC,iFACjB,UAAU,KAAK,CAAC,iFAChB,UAAU,MAAM,CAAC,EAC9C,2FAAyC,UAAU,YAAY,CAAC,GAAG,QACnE,yFAAuC,UAAU,UAAU,CAAC,GAAG,QAC/D,YAAY,yFAAuC,UAAU,WAAW,CAAC,GAAG,QAC5E,OAAO,WACP,OAAO,SACP,OAAO,YACP,OAAO,cACP,OAAO,YACP,OAAO,UACP,UACD;EACD,UAAU,YAAY;EACtB,GAAI;;GAEH,WACC,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;cACxF,2CAACC;KAAc;KAAqB,OAAM;KAAe,eAAe;MAAgB;KACnF;GAER,CAAC,WAAW,iBACX,2CAAC;IAAK,WAAWD,kGAAgC,UAAU,OAAO,CAAC,EAAE,OAAO,QAAQ;cACjF,YAAY,aAAa;KACrB;GAER,CAAC,WAAW,CAAC,iBAAiB,aAC7B,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,aAAa,CAAC,EAAE,OAAO,aAAa;cAC5F;KACI;GAER,CAAC,iBAAiB,YACjB,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAgB;GAE9G,CAAC,WAAW,CAAC,iBAAiB,WAC7B,2CAAC;IAAK,WAAWA,kGAAgC,UAAU,WAAW,CAAC,EAAE,OAAO,WAAW;cAAG;KAAe;;GAExG;EAGd;AAED,OAAO,cAAc;AAErB,qBAAe"}

package/dist/cjs/components/primitives/Button/Button.styles.cjs

@@ -1,8 +1,7 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/primitives/Button/Button.styles.ts
 /**
@@ -24,7 +23,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
 		small: `calc(${theme.vars.spacing.unit} * 3)`
 	};
 	const iconDimension = iconSizeMap[size] || iconSizeMap["medium"];
-	const baseButton = __emotion_css.css`
+	const baseButton = require_emotion.css`
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -51,24 +50,24 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
       ` : ""}
     `;
 	const sizeStyles = {
-		large: __emotion_css.css`
+		large: require_emotion.css`
         ${variant === "icon" ? `font-size: ${theme.vars.typography.fontSizes.lg};` : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);
              font-size: ${theme.vars.typography.fontSizes.lg};
              min-height: calc(${theme.vars.spacing.unit} * 5);`}
       `,
-		medium: __emotion_css.css`
+		medium: require_emotion.css`
         ${variant === "icon" ? `font-size: ${theme.vars.typography.fontSizes.md};` : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);
              font-size: ${theme.vars.typography.fontSizes.md};
              min-height: calc(${theme.vars.spacing.unit} * 4);`}
       `,
-		small: __emotion_css.css`
+		small: require_emotion.css`
         ${variant === "icon" ? `font-size: ${theme.vars.typography.fontSizes.sm};` : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);
              font-size: ${theme.vars.typography.fontSizes.sm};
              min-height: calc(${theme.vars.spacing.unit} * 3);`}
       `
 	};
 	const variantStyles = {
-		"primary-icon": __emotion_css.css`
+		"primary-icon": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.primary.main};
         border-color: transparent;
@@ -89,7 +88,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           outline: none;
         }
       `,
-		"primary-outline": __emotion_css.css`
+		"primary-outline": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.primary.main};
         border-color: ${theme.vars.colors.primary.main};
@@ -108,7 +107,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           opacity: 0.9;
         }
       `,
-		"primary-solid": __emotion_css.css`
+		"primary-solid": require_emotion.css`
         background-color: ${theme.vars.colors.primary.main};
         color: ${theme.vars.colors.primary.contrastText};
         border-color: ${theme.vars.colors.primary.main};
@@ -125,7 +124,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           opacity: 0.8;
         }
       `,
-		"primary-text": __emotion_css.css`
+		"primary-text": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.primary.main};
         border-color: transparent;
@@ -143,7 +142,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           outline: none;
         }
       `,
-		"secondary-icon": __emotion_css.css`
+		"secondary-icon": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.secondary.main};
         border-color: transparent;
@@ -164,7 +163,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           outline: none;
         }
       `,
-		"secondary-outline": __emotion_css.css`
+		"secondary-outline": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.secondary.main};
         border-color: ${theme.vars.colors.secondary.main};
@@ -183,7 +182,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           opacity: 0.9;
         }
       `,
-		"secondary-solid": __emotion_css.css`
+		"secondary-solid": require_emotion.css`
         background-color: ${theme.vars.colors.secondary.main};
         color: ${theme.vars.colors.secondary.contrastText};
         border-color: ${theme.vars.colors.secondary.main};
@@ -200,7 +199,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           opacity: 0.8;
         }
       `,
-		"secondary-text": __emotion_css.css`
+		"secondary-text": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.secondary.main};
         border-color: transparent;
@@ -218,7 +217,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           outline: none;
         }
       `,
-		"tertiary-icon": __emotion_css.css`
+		"tertiary-icon": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.text.secondary};
         border-color: transparent;
@@ -239,7 +238,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           outline: none;
         }
       `,
-		"tertiary-outline": __emotion_css.css`
+		"tertiary-outline": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.text.secondary};
         border-color: ${theme.vars.colors.border};
@@ -256,7 +255,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           border-color: ${theme.vars.colors.text.primary};
         }
       `,
-		"tertiary-solid": __emotion_css.css`
+		"tertiary-solid": require_emotion.css`
         background-color: ${theme.vars.colors.text.secondary};
         color: ${theme.vars.colors.background.surface};
         border-color: ${theme.vars.colors.text.secondary};
@@ -275,7 +274,7 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
           opacity: 0.9;
         }
       `,
-		"tertiary-text": __emotion_css.css`
+		"tertiary-text": require_emotion.css`
         background-color: transparent;
         color: ${theme.vars.colors.text.secondary};
         border-color: transparent;
@@ -297,32 +296,32 @@ const useStyles = (theme, colorScheme, color, variant, size, fullWidth, disabled
         }
       `
 	};
-	const spinnerStyles = __emotion_css.css`
+	const spinnerStyles = require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: center;
     `;
-	const iconStyles = __emotion_css.css`
+	const iconStyles = require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: center;
     `;
 	return {
 		button: baseButton,
-		content: __emotion_css.css`
+		content: require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: center;
     `,
 		endIcon: iconStyles,
-		fullWidth: fullWidth ? __emotion_css.css`
+		fullWidth: fullWidth ? require_emotion.css`
             width: 100%;
           ` : null,
 		icon: iconStyles,
-		loading: loading ? __emotion_css.css`
+		loading: loading ? require_emotion.css`
             pointer-events: none;
           ` : null,
-		shape: shape === "round" ? __emotion_css.css`
+		shape: shape === "round" ? require_emotion.css`
               border-radius: 50%;
             ` : null,
 		size: sizeStyles[size],

package/dist/cjs/components/primitives/Button/Button.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.cjs","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Button component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  color: ButtonColor,\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  disabled: boolean,\n  loading: boolean,\n  shape: 'square' | 'round' = 'square',\n): Record<string, string | null> =>\n  useMemo(() => {\n    const iconSizeMap: Record<string, string> = {\n      large: `calc(${theme.vars.spacing.unit} * 5)`,\n      medium: `calc(${theme.vars.spacing.unit} * 4)`,\n      small: `calc(${theme.vars.spacing.unit} * 3)`,\n    };\n\n    const iconDimension: string = iconSizeMap[size] || iconSizeMap['medium'];\n\n    const baseButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n      border-radius: ${shape === 'round'\n        ? '50%'\n        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-weight: 500;\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      outline: none;\n      text-decoration: none;\n      white-space: nowrap;\n      width: ${fullWidth ? '100%' : 'auto'};\n      opacity: ${disabled || loading ? 0.6 : 1};\n      font-family: ${theme.vars.typography.fontFamily};\n      border-width: 1px;\n      border-style: solid;\n      ${variant === 'icon'\n        ? `\n        padding: 0;\n        min-width: unset;\n        min-height: unset;\n        width: ${iconDimension};\n        height: ${iconDimension};\n        justify-content: center;\n        align-items: center;\n      `\n        : ''}\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n             font-size: ${theme.vars.typography.fontSizes.lg};\n             min-height: calc(${theme.vars.spacing.unit} * 5);`}\n      `,\n      medium: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.md};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n             font-size: ${theme.vars.typography.fontSizes.md};\n             min-height: calc(${theme.vars.spacing.unit} * 4);`}\n      `,\n      small: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n          : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n             font-size: ${theme.vars.typography.fontSizes.sm};\n             min-height: calc(${theme.vars.spacing.unit} * 3);`}\n      `,\n    };\n\n    const variantStyles: Record<string, string> = {\n      'primary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.primary.dark};\n          outline: none;\n        }\n      `,\n      'primary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'primary-solid': css`\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n      `,\n      'primary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'secondary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.secondary.dark};\n          outline: none;\n        }\n      `,\n      'secondary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'secondary-solid': css`\n        background-color: ${theme.vars.colors.secondary.main};\n        color: ${theme.vars.colors.secondary.contrastText};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n      `,\n      'secondary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'tertiary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'tertiary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: ${theme.vars.colors.border};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n          border-color: ${theme.vars.colors.text.secondary};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.action.selected};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.action.focus};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      'tertiary-solid': css`\n        background-color: ${theme.vars.colors.text.secondary};\n        color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.text.secondary};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n      `,\n      'tertiary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n    };\n\n    const spinnerStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const iconStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const contentStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    return {\n      button: baseButton,\n      content: contentStyles,\n      endIcon: iconStyles,\n      fullWidth: fullWidth\n        ? css`\n            width: 100%;\n          `\n        : null,\n      icon: iconStyles,\n      loading: loading\n        ? css`\n            pointer-events: none;\n          `\n        : null,\n      shape:\n        shape === 'round'\n          ? css`\n              border-radius: 50%;\n            `\n          : null,\n      size: sizeStyles[size],\n      spinner: spinnerStyles,\n      startIcon: iconStyles,\n      variant: variantStyles[`${color}-${variant}`] || variantStyles['primary-solid'],\n    };\n  }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}
+{"version":3,"file":"Button.styles.cjs","names":["iconSizeMap: Record<string, string>","iconDimension: string","baseButton: string","sizeStyles: Record<string, string>","variantStyles: Record<string, string>","spinnerStyles: string","iconStyles: string"],"sources":["../../../../../src/components/primitives/Button/Button.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\nexport type ButtonColor = 'primary' | 'secondary' | 'tertiary' | string;\nexport type ButtonVariant = 'solid' | 'outline' | 'text' | 'icon';\nexport type ButtonSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Button component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param color - The button color\n * @param variant - The button variant\n * @param size - The button size\n * @param fullWidth - Whether the button should take full width\n * @param disabled - Whether the button is disabled\n * @param loading - Whether the button is in loading state\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  color: ButtonColor,\n  variant: ButtonVariant,\n  size: ButtonSize,\n  fullWidth: boolean,\n  disabled: boolean,\n  loading: boolean,\n  shape: 'square' | 'round' = 'square',\n): Record<string, string | null> =>\n  useMemo(() => {\n    const iconSizeMap: Record<string, string> = {\n      large: `calc(${theme.vars.spacing.unit} * 5)`,\n      medium: `calc(${theme.vars.spacing.unit} * 4)`,\n      small: `calc(${theme.vars.spacing.unit} * 3)`,\n    };\n\n    const iconDimension: string = iconSizeMap[size] || iconSizeMap['medium'];\n\n    const baseButton: string = css`\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n      border-radius: ${shape === 'round'\n        ? '50%'\n        : theme.vars.components?.Button?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-weight: 500;\n      cursor: ${disabled || loading ? 'not-allowed' : 'pointer'};\n      outline: none;\n      text-decoration: none;\n      white-space: nowrap;\n      width: ${fullWidth ? '100%' : 'auto'};\n      opacity: ${disabled || loading ? 0.6 : 1};\n      font-family: ${theme.vars.typography.fontFamily};\n      border-width: 1px;\n      border-style: solid;\n      ${variant === 'icon'\n        ? `\n        padding: 0;\n        min-width: unset;\n        min-height: unset;\n        width: ${iconDimension};\n        height: ${iconDimension};\n        justify-content: center;\n        align-items: center;\n      `\n        : ''}\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.lg};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n             font-size: ${theme.vars.typography.fontSizes.lg};\n             min-height: calc(${theme.vars.spacing.unit} * 5);`}\n      `,\n      medium: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.md};`\n          : `padding: calc(${theme.vars.spacing.unit} * 1) calc(${theme.vars.spacing.unit} * 2);\n             font-size: ${theme.vars.typography.fontSizes.md};\n             min-height: calc(${theme.vars.spacing.unit} * 4);`}\n      `,\n      small: css`\n        ${variant === 'icon'\n          ? `font-size: ${theme.vars.typography.fontSizes.sm};`\n          : `padding: calc(${theme.vars.spacing.unit} * 0.5) calc(${theme.vars.spacing.unit} * 1);\n             font-size: ${theme.vars.typography.fontSizes.sm};\n             min-height: calc(${theme.vars.spacing.unit} * 3);`}\n      `,\n    };\n\n    const variantStyles: Record<string, string> = {\n      'primary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.primary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.primary.dark};\n          outline: none;\n        }\n      `,\n      'primary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          color: ${theme.vars.colors.primary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'primary-solid': css`\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border-color: ${theme.vars.colors.primary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.primary.main};\n          opacity: 0.8;\n        }\n      `,\n      'primary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.primary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'secondary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.secondary.dark};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.secondary.dark};\n          outline: none;\n        }\n      `,\n      'secondary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          color: ${theme.vars.colors.secondary.contrastText};\n          opacity: 0.9;\n        }\n      `,\n      'secondary-solid': css`\n        background-color: ${theme.vars.colors.secondary.main};\n        color: ${theme.vars.colors.secondary.contrastText};\n        border-color: ${theme.vars.colors.secondary.main};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.9;\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.secondary.main};\n          opacity: 0.8;\n        }\n      `,\n      'secondary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.secondary.main};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          outline: none;\n        }\n      `,\n      'tertiary-icon': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n      'tertiary-outline': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: ${theme.vars.colors.border};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.action.hover};\n          border-color: ${theme.vars.colors.text.secondary};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.action.selected};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.action.focus};\n          border-color: ${theme.vars.colors.text.primary};\n        }\n      `,\n      'tertiary-solid': css`\n        background-color: ${theme.vars.colors.text.secondary};\n        color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.text.secondary};\n        &:hover:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n        }\n        &:active:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n        &:focus:not(:disabled) {\n          background-color: ${theme.vars.colors.text.primary};\n          color: ${theme.vars.colors.background.surface};\n          opacity: 0.9;\n        }\n      `,\n      'tertiary-text': css`\n        background-color: transparent;\n        color: ${theme.vars.colors.text.secondary};\n        border-color: transparent;\n        &:hover:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.hover};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:active:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.selected};\n          color: ${theme.vars.colors.text.primary};\n        }\n        &:focus:not(:disabled) {\n          border-color: transparent;\n          background-color: ${theme.vars.colors.action.focus};\n          color: ${theme.vars.colors.text.primary};\n          outline: none;\n        }\n      `,\n    };\n\n    const spinnerStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const iconStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    const contentStyles: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    `;\n\n    return {\n      button: baseButton,\n      content: contentStyles,\n      endIcon: iconStyles,\n      fullWidth: fullWidth\n        ? css`\n            width: 100%;\n          `\n        : null,\n      icon: iconStyles,\n      loading: loading\n        ? css`\n            pointer-events: none;\n          `\n        : null,\n      shape:\n        shape === 'round'\n          ? css`\n              border-radius: 50%;\n            `\n          : null,\n      size: sizeStyles[size],\n      spinner: spinnerStyles,\n      startIcon: iconStyles,\n      variant: variantStyles[`${color}-${variant}`] || variantStyles['primary-solid'],\n    };\n  }, [theme, colorScheme, color, variant, size, fullWidth, disabled, loading]);\n\nexport default useStyles;\n"],"mappings":"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"}

package/dist/cjs/components/primitives/Card/Card.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_Typography = require('../Typography/Typography.cjs');
 const require_Card_styles = require('./Card.styles.cjs');
@@ -8,8 +9,6 @@ let react = require("react");
 react = require_rolldown_runtime.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/primitives/Card/Card.tsx
 /**
@@ -41,7 +40,7 @@ const Card = (0, react.forwardRef)(({ variant = "default", clickable = false, ch
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card")), styles["card"], styles["variant"], styles["clickable"], (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", null, variant)), { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", null, "clickable"))]: clickable }, className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card")), styles["card"], styles["variant"], styles["clickable"], (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", null, variant)), { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", null, "clickable"))]: clickable }, className),
 		...rest,
 		children
 	});
@@ -55,7 +54,7 @@ const CardHeader = (0, react.forwardRef)(({ children, className, style,...rest }
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "header")), styles["header"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "header")), styles["header"], className),
 		...rest,
 		children
 	});
@@ -93,7 +92,7 @@ const CardTitle = ({ children, level = 3, className, style,...rest }) => {
 		component: getComponentFromLevel(level),
 		variant: getVariantFromLevel(level),
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "title")), styles["title"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "title")), styles["title"], className),
 		fontWeight: 600,
 		...filteredRest,
 		children
@@ -111,7 +110,7 @@ const CardDescription = ({ children, className, style,...rest }) => {
 		variant: "body2",
 		color: "textSecondary",
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "description")), styles["description"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "description")), styles["description"], className),
 		...filteredRest,
 		children
 	});
@@ -125,7 +124,7 @@ const CardAction = (0, react.forwardRef)(({ children, className, style,...rest }
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "action")), styles["action"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "action")), styles["action"], className),
 		...rest,
 		children
 	});
@@ -139,7 +138,7 @@ const CardContent = (0, react.forwardRef)(({ children, className, style,...rest
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "content")), styles["content"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "content")), styles["content"], className),
 		...rest,
 		children
 	});
@@ -153,7 +152,7 @@ const CardFooter = (0, react.forwardRef)(({ children, className, style,...rest }
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		ref,
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "footer")), styles["footer"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("card", "footer")), styles["footer"], className),
 		...rest,
 		children
 	});