@thunderid/react 0.11.4 → 0.13.0

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
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>","useTheme","styles: Record<string, string>","useStyles","CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>","CardTitle: FC<CardTitleProps>","Typography","CardDescription: FC<CardDescriptionProps>","CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>>","CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>","CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>"],"sources":["../../../../../src/components/primitives/Card/Card.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 {\n  HTMLAttributes,\n  forwardRef,\n  ReactNode,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  Ref,\n  ElementType,\n  FC,\n} from 'react';\nimport useStyles from './Card.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Typography from '../Typography/Typography';\nimport {TypographyVariant} from '../Typography/Typography.styles';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Card content\n   */\n  children?: ReactNode;\n  /**\n   * Whether the card should be clickable (shows hover effects)\n   */\n  clickable?: boolean;\n  /**\n   * The visual variant of the card\n   */\n  variant?: CardVariant;\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Header content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n  /**\n   * The heading level to use\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardActionProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Action content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Footer content\n   */\n  children?: ReactNode;\n}\n\n/**\n * Card component that provides a flexible container for content.\n *\n * @example\n * ```tsx\n * <Card variant=\"elevated\" clickable>\n *   <Card.Header>\n *     <Card.Title>Card Title</Card.Title>\n *     <Card.Description>Card Description</Card.Description>\n *     <Card.Action>\n *       <Button variant=\"link\">Action</Button>\n *     </Card.Action>\n *   </Card.Header>\n *   <Card.Content>\n *     <p>Card content goes here</p>\n *   </Card.Content>\n *   <Card.Footer>\n *     <Button>Cancel</Button>\n *     <Button variant=\"outline\">Submit</Button>\n *   </Card.Footer>\n * </Card>\n * ```\n */\nconst Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardProps\n>(\n  (\n    {variant = 'default', clickable = false, children, className, style, ...rest}: CardProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string> = useStyles(theme, colorScheme, variant, clickable);\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('card')),\n          styles['card'],\n          styles['variant'],\n          styles['clickable'],\n          withVendorCSSClassPrefix(bem('card', null, variant)),\n          {\n            [withVendorCSSClassPrefix(bem('card', null, 'clickable'))]: clickable,\n          },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/**\n * Card header component that contains the title, description, and optional actions.\n */\nconst CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardHeaderProps\n>(({children, className, style, ...rest}: CardHeaderProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'header')), styles['header'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card title component.\n */\nconst CardTitle: FC<CardTitleProps> = ({children, level = 3, className, style, ...rest}: CardTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const getVariantFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const getComponentFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component={getComponentFromLevel(level) as ElementType}\n      variant={getVariantFromLevel(level) as TypographyVariant}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'title')), styles['title'], className)}\n      fontWeight={600}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card description component.\n */\nconst CardDescription: FC<CardDescriptionProps> = ({children, className, style, ...rest}: CardDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      color=\"textSecondary\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card action component for action elements in the header.\n */\nconst CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardActionProps\n>(({children, className, style, ...rest}: CardActionProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'action')), styles['action'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card content component that contains the main content of the card.\n */\nconst CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardContentProps\n>(({children, className, style, ...rest}: CardContentProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'content')), styles['content'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card footer component that contains footer actions or additional information.\n */\nconst CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardFooterProps\n>(({children, className, style, ...rest}: CardFooterProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'footer')), styles['footer'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nCard.displayName = 'Card';\nCardHeader.displayName = 'Card.Header';\nCardTitle.displayName = 'Card.Title';\nCardDescription.displayName = 'Card.Description';\nCardAction.displayName = 'Card.Action';\nCardContent.displayName = 'Card.Content';\nCardFooter.displayName = 'Card.Footer';\n\n(Card as any).Header = CardHeader;\n(Card as any).Title = CardTitle;\n(Card as any).Description = CardDescription;\n(Card as any).Action = CardAction;\n(Card as any).Content = CardContent;\n(Card as any).Footer = CardFooter;\n\nexport interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {\n  Action: typeof CardAction;\n  Content: typeof CardContent;\n  Description: typeof CardDescription;\n  Footer: typeof CardFooter;\n  Header: typeof CardHeader;\n  Title: typeof CardTitle;\n}\n\nexport default Card as CardComponent;\nexport {Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter};\n"],"mappings":"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"}
+{"version":3,"file":"Card.cjs","names":["Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>","useTheme","styles: Record<string, string>","useStyles","cx","CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>","CardTitle: FC<CardTitleProps>","Typography","CardDescription: FC<CardDescriptionProps>","CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>>","CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>","CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>"],"sources":["../../../../../src/components/primitives/Card/Card.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  HTMLAttributes,\n  forwardRef,\n  ReactNode,\n  ForwardRefExoticComponent,\n  RefAttributes,\n  Ref,\n  ElementType,\n  FC,\n} from 'react';\nimport useStyles from './Card.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Typography from '../Typography/Typography';\nimport {TypographyVariant} from '../Typography/Typography.styles';\n\nexport type CardVariant = 'default' | 'outlined' | 'elevated';\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Card content\n   */\n  children?: ReactNode;\n  /**\n   * Whether the card should be clickable (shows hover effects)\n   */\n  clickable?: boolean;\n  /**\n   * The visual variant of the card\n   */\n  variant?: CardVariant;\n}\n\nexport interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Header content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n  /**\n   * The heading level to use\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n}\n\nexport interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardActionProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Action content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content\n   */\n  children?: ReactNode;\n}\n\nexport interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Footer content\n   */\n  children?: ReactNode;\n}\n\n/**\n * Card component that provides a flexible container for content.\n *\n * @example\n * ```tsx\n * <Card variant=\"elevated\" clickable>\n *   <Card.Header>\n *     <Card.Title>Card Title</Card.Title>\n *     <Card.Description>Card Description</Card.Description>\n *     <Card.Action>\n *       <Button variant=\"link\">Action</Button>\n *     </Card.Action>\n *   </Card.Header>\n *   <Card.Content>\n *     <p>Card content goes here</p>\n *   </Card.Content>\n *   <Card.Footer>\n *     <Button>Cancel</Button>\n *     <Button variant=\"outline\">Submit</Button>\n *   </Card.Footer>\n * </Card>\n * ```\n */\nconst Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardProps\n>(\n  (\n    {variant = 'default', clickable = false, children, className, style, ...rest}: CardProps,\n    ref: Ref<HTMLDivElement>,\n  ) => {\n    const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n    const styles: Record<string, string> = useStyles(theme, colorScheme, variant, clickable);\n\n    return (\n      <div\n        ref={ref}\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('card')),\n          styles['card'],\n          styles['variant'],\n          styles['clickable'],\n          withVendorCSSClassPrefix(bem('card', null, variant)),\n          {\n            [withVendorCSSClassPrefix(bem('card', null, 'clickable'))]: clickable,\n          },\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/**\n * Card header component that contains the title, description, and optional actions.\n */\nconst CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardHeaderProps\n>(({children, className, style, ...rest}: CardHeaderProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'header')), styles['header'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card title component.\n */\nconst CardTitle: FC<CardTitleProps> = ({children, level = 3, className, style, ...rest}: CardTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const getVariantFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const getComponentFromLevel = (lvl: number): string => {\n    switch (lvl) {\n      case 1:\n        return 'h1';\n      case 2:\n        return 'h2';\n      case 3:\n        return 'h3';\n      case 4:\n        return 'h4';\n      case 5:\n        return 'h5';\n      case 6:\n        return 'h6';\n      default:\n        return 'h3';\n    }\n  };\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component={getComponentFromLevel(level) as ElementType}\n      variant={getVariantFromLevel(level) as TypographyVariant}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'title')), styles['title'], className)}\n      fontWeight={600}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card description component.\n */\nconst CardDescription: FC<CardDescriptionProps> = ({children, className, style, ...rest}: CardDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      color=\"textSecondary\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Card action component for action elements in the header.\n */\nconst CardAction: ForwardRefExoticComponent<CardActionProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardActionProps\n>(({children, className, style, ...rest}: CardActionProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'action')), styles['action'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card content component that contains the main content of the card.\n */\nconst CardContent: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardContentProps\n>(({children, className, style, ...rest}: CardContentProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'content')), styles['content'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\n/**\n * Card footer component that contains footer actions or additional information.\n */\nconst CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  CardFooterProps\n>(({children, className, style, ...rest}: CardFooterProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, 'default', false);\n\n  return (\n    <div\n      ref={ref}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('card', 'footer')), styles['footer'], className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n});\n\nCard.displayName = 'Card';\nCardHeader.displayName = 'Card.Header';\nCardTitle.displayName = 'Card.Title';\nCardDescription.displayName = 'Card.Description';\nCardAction.displayName = 'Card.Action';\nCardContent.displayName = 'Card.Content';\nCardFooter.displayName = 'Card.Footer';\n\n(Card as any).Header = CardHeader;\n(Card as any).Title = CardTitle;\n(Card as any).Description = CardDescription;\n(Card as any).Action = CardAction;\n(Card as any).Content = CardContent;\n(Card as any).Footer = CardFooter;\n\nexport interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {\n  Action: typeof CardAction;\n  Content: typeof CardContent;\n  Description: typeof CardDescription;\n  Footer: typeof CardFooter;\n  Header: typeof CardHeader;\n  Title: typeof CardTitle;\n}\n\nexport default Card as CardComponent;\nexport {Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter};\n"],"mappings":"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"}

package/dist/cjs/components/primitives/Card/Card.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/Card/Card.styles.ts
 /**
@@ -14,7 +13,7 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, variant, clickable) => (0, react.useMemo)(() => {
-	const baseCard = __emotion_css.css`
+	const baseCard = require_emotion.css`
       border-radius: ${theme.vars.borderRadius.medium};
       background-color: ${theme.vars.colors.background.surface};
       font-family: ${theme.vars.typography.fontFamily};
@@ -26,18 +25,18 @@ const useStyles = (theme, colorScheme, variant, clickable) => (0, react.useMemo)
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
 	const variantStyles = {
-		default: __emotion_css.css`
+		default: require_emotion.css`
         /* Base styles only */
       `,
-		elevated: __emotion_css.css`
+		elevated: require_emotion.css`
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
         border: none;
       `,
-		outlined: __emotion_css.css`
+		outlined: require_emotion.css`
         border: 1px solid ${theme.vars.colors.border};
       `
 	};
-	const clickableStyles = __emotion_css.css`
+	const clickableStyles = require_emotion.css`
       cursor: pointer;
 
       &:hover {
@@ -45,32 +44,32 @@ const useStyles = (theme, colorScheme, variant, clickable) => (0, react.useMemo)
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }
     `;
-	const headerStyles = __emotion_css.css`
+	const headerStyles = require_emotion.css`
       padding: 0 calc(${theme.vars.spacing.unit} * 2);
       margin-top: calc(${theme.vars.spacing.unit} * 2);
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-	const titleStyles = __emotion_css.css`
+	const titleStyles = require_emotion.css`
       margin: 0;
       /* Typography component will handle color, fontSize, fontWeight, lineHeight */
     `;
-	const descriptionStyles = __emotion_css.css`
+	const descriptionStyles = require_emotion.css`
       margin: 0;
       color: ${theme.vars.colors.text.secondary};
       font-size: ${theme.vars.typography.fontSizes.sm};
       line-height: 1.5;
     `;
-	const actionStyles = __emotion_css.css`
+	const actionStyles = require_emotion.css`
       margin-top: ${theme.vars.spacing.unit};
     `;
-	const contentStyles = __emotion_css.css`
+	const contentStyles = require_emotion.css`
       padding: 0 calc(${theme.vars.spacing.unit} * 2);
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
       flex: 1;
     `;
-	const footerStyles = __emotion_css.css`
+	const footerStyles = require_emotion.css`
       padding: 0 calc(${theme.vars.spacing.unit} * 2) calc(${theme.vars.spacing.unit} * 2);
       display: flex;
       align-items: center;

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

@@ -1 +1 @@
-{"version":3,"file":"Card.styles.cjs","names":["baseCard: string","variantStyles: Record<string, string>","clickableStyles: string","headerStyles: string","titleStyles: string","descriptionStyles: string","actionStyles: string","contentStyles: string","footerStyles: string"],"sources":["../../../../../src/components/primitives/Card/Card.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 CardVariant = 'default' | 'outlined' | 'elevated';\n\n/**\n * Creates styles for the Card 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 variant - The card variant\n * @param clickable - Whether the card is clickable\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: CardVariant,\n  clickable: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseCard: string = css`\n      border-radius: ${theme.vars.borderRadius.medium};\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      transition: all 0.2s ease-in-out;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const variantStyles: Record<string, string> = {\n      default: css`\n        /* Base styles only */\n      `,\n      elevated: css`\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        border: none;\n      `,\n      outlined: css`\n        border: 1px solid ${theme.vars.colors.border};\n      `,\n    };\n\n    const clickableStyles: string = css`\n      cursor: pointer;\n\n      &:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n    `;\n\n    const headerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      /* Typography component will handle color, fontSize, fontWeight, lineHeight */\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      color: ${theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.5;\n    `;\n\n    const actionStyles: string = css`\n      margin-top: ${theme.vars.spacing.unit};\n    `;\n\n    const contentStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n      flex: 1;\n    `;\n\n    const footerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2) calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      action: actionStyles,\n      card: baseCard,\n      clickable: clickable ? clickableStyles : '',\n      content: contentStyles,\n      description: descriptionStyles,\n      footer: footerStyles,\n      header: headerStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant, clickable]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,SACA,uCAEc;CACZ,MAAMA,WAAmB,iBAAG;uBACT,MAAM,KAAK,aAAa,OAAO;0BAC5B,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;;;;;;sBAMhC,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,gBAAwC;EAC5C,SAAS,iBAAG;;;EAGZ,UAAU,iBAAG;;;;EAIb,UAAU,iBAAG;4BACS,MAAM,KAAK,OAAO,OAAO;;EAEhD;CAED,MAAMC,kBAA0B,iBAAG;;;;;;;;CASnC,MAAMC,eAAuB,iBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK;yBACvB,MAAM,KAAK,QAAQ,KAAK;;;aAGpC,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,iBAAG;;;;CAK/B,MAAMC,oBAA4B,iBAAG;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;CAIlD,MAAMC,eAAuB,iBAAG;oBAChB,MAAM,KAAK,QAAQ,KAAK;;CAGxC,MAAMC,gBAAwB,iBAAG;wBACb,MAAM,KAAK,QAAQ,KAAK;4BACpB,MAAM,KAAK,QAAQ,KAAK;;;CAIhD,MAAMC,eAAuB,iBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;aAGxE,MAAM,KAAK,QAAQ,KAAK;;AAGjC,QAAO;EACL,QAAQ;EACR,MAAM;EACN,WAAW,YAAY,kBAAkB;EACzC,SAAS;EACT,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAS;CAAU,CAAC;AAE9C,0BAAe"}
+{"version":3,"file":"Card.styles.cjs","names":["baseCard: string","variantStyles: Record<string, string>","clickableStyles: string","headerStyles: string","titleStyles: string","descriptionStyles: string","actionStyles: string","contentStyles: string","footerStyles: string"],"sources":["../../../../../src/components/primitives/Card/Card.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 CardVariant = 'default' | 'outlined' | 'elevated';\n\n/**\n * Creates styles for the Card 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 variant - The card variant\n * @param clickable - Whether the card is clickable\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: CardVariant,\n  clickable: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseCard: string = css`\n      border-radius: ${theme.vars.borderRadius.medium};\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      transition: all 0.2s ease-in-out;\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const variantStyles: Record<string, string> = {\n      default: css`\n        /* Base styles only */\n      `,\n      elevated: css`\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n        border: none;\n      `,\n      outlined: css`\n        border: 1px solid ${theme.vars.colors.border};\n      `,\n    };\n\n    const clickableStyles: string = css`\n      cursor: pointer;\n\n      &:hover {\n        transform: translateY(-2px);\n        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n      }\n    `;\n\n    const headerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      /* Typography component will handle color, fontSize, fontWeight, lineHeight */\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      color: ${theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.5;\n    `;\n\n    const actionStyles: string = css`\n      margin-top: ${theme.vars.spacing.unit};\n    `;\n\n    const contentStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n      flex: 1;\n    `;\n\n    const footerStyles: string = css`\n      padding: 0 calc(${theme.vars.spacing.unit} * 2) calc(${theme.vars.spacing.unit} * 2);\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      action: actionStyles,\n      card: baseCard,\n      clickable: clickable ? clickableStyles : '',\n      content: contentStyles,\n      description: descriptionStyles,\n      footer: footerStyles,\n      header: headerStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant, clickable]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,SACA,uCAEc;CACZ,MAAMA,WAAmB,mBAAG;uBACT,MAAM,KAAK,aAAa,OAAO;0BAC5B,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;;;;;;sBAMhC,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,gBAAwC;EAC5C,SAAS,mBAAG;;;EAGZ,UAAU,mBAAG;;;;EAIb,UAAU,mBAAG;4BACS,MAAM,KAAK,OAAO,OAAO;;EAEhD;CAED,MAAMC,kBAA0B,mBAAG;;;;;;;;CASnC,MAAMC,eAAuB,mBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK;yBACvB,MAAM,KAAK,QAAQ,KAAK;;;aAGpC,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,mBAAG;;;;CAK/B,MAAMC,oBAA4B,mBAAG;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;mBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;;CAIlD,MAAMC,eAAuB,mBAAG;oBAChB,MAAM,KAAK,QAAQ,KAAK;;CAGxC,MAAMC,gBAAwB,mBAAG;wBACb,MAAM,KAAK,QAAQ,KAAK;4BACpB,MAAM,KAAK,QAAQ,KAAK;;;CAIhD,MAAMC,eAAuB,mBAAG;wBACZ,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;aAGxE,MAAM,KAAK,QAAQ,KAAK;;AAGjC,QAAO;EACL,QAAQ;EACR,MAAM;EACN,WAAW,YAAY,kBAAkB;EACzC,SAAS;EACT,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAS;CAAU,CAAC;AAE9C,0BAAe"}

package/dist/cjs/components/primitives/Checkbox/Checkbox.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_FormControl = require('../FormControl/FormControl.cjs');
 const require_InputLabel = require('../InputLabel/InputLabel.cjs');
@@ -7,8 +8,6 @@ let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 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/Checkbox/Checkbox.tsx
 const Checkbox = ({ label, error, className, required, helperText, style = {},...rest }) => {
@@ -18,14 +17,14 @@ const Checkbox = ({ label, error, className, required, helperText, style = {},..
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.default, {
 		error,
 		helperText,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox")), className),
 		helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 3.5)`,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			style,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "container")), styles["container"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "container")), styles["container"]),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				type: "checkbox",
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "input")), styles["input"], styles["errorInput"], { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "input", "error"))]: hasError }),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "input")), styles["input"], styles["errorInput"], { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "input", "error"))]: hasError }),
 				"aria-invalid": hasError,
 				"aria-required": required,
 				...rest
@@ -33,7 +32,7 @@ const Checkbox = ({ label, error, className, required, helperText, style = {},..
 				required,
 				error: hasError,
 				variant: "inline",
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "label")), styles["label"], styles["errorLabel"], { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "label", "error"))]: hasError }),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "label")), styles["label"], styles["errorLabel"], { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("checkbox", "label", "error"))]: hasError }),
 				children: label
 			})]
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["Checkbox: FC<CheckboxProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Checkbox.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the checkbox\n   */\n  error?: string;\n  /**\n   * Helper text to display below the checkbox\n   */\n  helperText?: string;\n  /**\n   * Label text to display next to the checkbox\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Checkbox: FC<CheckboxProps> = ({\n  label,\n  error,\n  className,\n  required,\n  helperText,\n  style = {},\n  ...rest\n}: CheckboxProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('checkbox')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 3.5)`}\n    >\n      <div style={style} className={cx(withVendorCSSClassPrefix(bem('checkbox', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          className={cx(withVendorCSSClassPrefix(bem('checkbox', 'input')), styles['input'], styles['errorInput'], {\n            [withVendorCSSClassPrefix(bem('checkbox', 'input', 'error'))]: hasError,\n          })}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('checkbox', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('checkbox', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;;AAkCA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,YACA,QAAQ,EAAE,CACV,GAAG,WACgB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,gCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,gHAA2C,WAAW,CAAC,EAAE,UAAU;EACnE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAW;GAAO,gHAA2C,YAAY,YAAY,CAAC,EAAE,OAAO,aAAa;cAC3G,2CAAC;IACC,MAAK;IACL,gHAA2C,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;IACF,gBAAc;IACd,iBAAe;IACf,GAAI;KACJ,EACD,SACC,2CAACC;IACW;IACV,OAAO;IACP,SAAQ;IACR,gHAA2C,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;cAED;KACU;IAEX;GACM;;AAIlB,uBAAe"}
+{"version":3,"file":"Checkbox.cjs","names":["Checkbox: FC<CheckboxProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Checkbox.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the checkbox\n   */\n  error?: string;\n  /**\n   * Helper text to display below the checkbox\n   */\n  helperText?: string;\n  /**\n   * Label text to display next to the checkbox\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst Checkbox: FC<CheckboxProps> = ({\n  label,\n  error,\n  className,\n  required,\n  helperText,\n  style = {},\n  ...rest\n}: CheckboxProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('checkbox')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 3.5)`}\n    >\n      <div style={style} className={cx(withVendorCSSClassPrefix(bem('checkbox', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          className={cx(withVendorCSSClassPrefix(bem('checkbox', 'input')), styles['input'], styles['errorInput'], {\n            [withVendorCSSClassPrefix(bem('checkbox', 'input', 'error'))]: hasError,\n          })}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('checkbox', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('checkbox', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default Checkbox;\n"],"mappings":";;;;;;;;;;;;AAkCA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,YACA,QAAQ,EAAE,CACV,GAAG,WACgB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,gCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,WAAWC,kGAAgC,WAAW,CAAC,EAAE,UAAU;EACnE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAW;GAAO,WAAWA,kGAAgC,YAAY,YAAY,CAAC,EAAE,OAAO,aAAa;cAC3G,2CAAC;IACC,MAAK;IACL,WAAWA,kGAAgC,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;IACF,gBAAc;IACd,iBAAe;IACf,GAAI;KACJ,EACD,SACC,2CAACC;IACW;IACV,OAAO;IACP,SAAQ;IACR,WAAWD,kGAAgC,YAAY,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACzE,YAAY,SAAS,QAAQ,CAAC,GAAG,UAChE,CAAC;cAED;KACU;IAEX;GACM;;AAIlB,uBAAe"}