@thunderid/react 0.12.0 → 0.13.0

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"}

package/dist/cjs/components/primitives/Checkbox/Checkbox.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/Checkbox/Checkbox.styles.ts
 /**
@@ -14,11 +13,11 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)(() => {
-	const containerStyles = __emotion_css.css`
+	const containerStyles = require_emotion.css`
       display: flex;
       align-items: center;
     `;
-	const inputStyles = __emotion_css.css`
+	const inputStyles = require_emotion.css`
       width: calc(${theme.vars.spacing.unit} * 2.5);
       height: calc(${theme.vars.spacing.unit} * 2.5);
       margin-inline-end: ${theme.vars.spacing.unit};
@@ -35,14 +34,14 @@ const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)
         opacity: 0.6;
       }
     `;
-	const errorInputStyles = __emotion_css.css`
+	const errorInputStyles = require_emotion.css`
       accent-color: ${theme.vars.colors.error.main};
 
       &:focus {
         outline-color: ${theme.vars.colors.error.main};
       }
     `;
-	const labelStyles = __emotion_css.css`
+	const labelStyles = require_emotion.css`
       color: ${theme.vars.colors.text.primary};
       font-size: ${theme.vars.typography.fontSizes.sm};
       font-family: ${theme.vars.typography.fontFamily};
@@ -52,10 +51,10 @@ const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)
         color: ${theme.vars.colors.text.primary};
       }
     `;
-	const errorLabelStyles = __emotion_css.css`
+	const errorLabelStyles = require_emotion.css`
       color: ${theme.vars.colors.error.main};
     `;
-	const requiredStyles = __emotion_css.css`
+	const requiredStyles = require_emotion.css`
       /* Required indicator styles will be handled by InputLabel */
     `;
 	return {

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.styles.cjs","names":["containerStyles: string","inputStyles: string","errorInputStyles: string","labelStyles: string","errorLabelStyles: string","requiredStyles: string"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.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\n/**\n * Creates styles for the Checkbox 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 hasError - Whether the checkbox has an error state\n * @param required - Whether the checkbox is required\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: flex;\n      align-items: center;\n    `;\n\n    const inputStyles: string = css`\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      margin-inline-end: ${theme.vars.spacing.unit};\n      accent-color: ${theme.vars.colors.primary.main};\n      cursor: pointer;\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorInputStyles: string = css`\n      accent-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        outline-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const labelStyles: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-family: ${theme.vars.typography.fontFamily};\n      cursor: pointer;\n\n      &:hover {\n        color: ${theme.vars.colors.text.primary};\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const requiredStyles: string = css`\n      /* Required indicator styles will be handled by InputLabel */\n    `;\n\n    return {\n      container: containerStyles,\n      errorInput: hasError ? errorInputStyles : '',\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      required: required ? requiredStyles : '',\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,kBAA0B,iBAAG;;;;CAKnC,MAAMC,cAAsB,iBAAG;oBACf,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;2BAClB,MAAM,KAAK,QAAQ,KAAK;sBAC7B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;6BAIxB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,mBAA2B,iBAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;yBAG1B,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIlD,MAAMC,cAAsB,iBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;iBAIrC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAI5C,MAAMC,mBAA2B,iBAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,iBAAyB,iBAAG;;;AAIlC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,UAAU,WAAW,iBAAiB;EACvC;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,8BAAe"}
+{"version":3,"file":"Checkbox.styles.cjs","names":["containerStyles: string","inputStyles: string","errorInputStyles: string","labelStyles: string","errorLabelStyles: string","requiredStyles: string"],"sources":["../../../../../src/components/primitives/Checkbox/Checkbox.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\n/**\n * Creates styles for the Checkbox 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 hasError - Whether the checkbox has an error state\n * @param required - Whether the checkbox is required\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: flex;\n      align-items: center;\n    `;\n\n    const inputStyles: string = css`\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      margin-inline-end: ${theme.vars.spacing.unit};\n      accent-color: ${theme.vars.colors.primary.main};\n      cursor: pointer;\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorInputStyles: string = css`\n      accent-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        outline-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const labelStyles: string = css`\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-family: ${theme.vars.typography.fontFamily};\n      cursor: pointer;\n\n      &:hover {\n        color: ${theme.vars.colors.text.primary};\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const requiredStyles: string = css`\n      /* Required indicator styles will be handled by InputLabel */\n    `;\n\n    return {\n      container: containerStyles,\n      errorInput: hasError ? errorInputStyles : '',\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      required: required ? requiredStyles : '',\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,kBAA0B,mBAAG;;;;CAKnC,MAAMC,cAAsB,mBAAG;oBACf,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;2BAClB,MAAM,KAAK,QAAQ,KAAK;sBAC7B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;6BAIxB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,mBAA2B,mBAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;yBAG1B,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIlD,MAAMC,cAAsB,mBAAG;eACpB,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;iBAIrC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;CAI5C,MAAMC,mBAA2B,mBAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,iBAAyB,mBAAG;;;AAIlC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,UAAU,WAAW,iBAAiB;EACvC;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,8BAAe"}

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

@@ -1,27 +1,26 @@
 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/CopyableText/CopyableText.styles.ts
 const useStyles = (theme) => (0, react.useMemo)(() => ({
-	container: __emotion_css.css`
+	container: require_emotion.css`
         display: flex;
         flex-direction: column;
         gap: calc(${theme.vars.spacing.unit} * 0.5);
         width: 100%;
       `,
-	copyButton: __emotion_css.css`
+	copyButton: require_emotion.css`
         flex-shrink: 0;
         white-space: nowrap;
       `,
-	label: __emotion_css.css`
+	label: require_emotion.css`
         color: ${theme.vars.colors.text.secondary};
         font-size: 0.875rem;
         font-weight: 500;
       `,
-	valueBox: __emotion_css.css`
+	valueBox: require_emotion.css`
         align-items: center;
         background-color: ${theme.vars.colors.background.surface};
         border: 1px solid ${theme.vars.colors.border};
@@ -30,7 +29,7 @@ const useStyles = (theme) => (0, react.useMemo)(() => ({
         gap: calc(${theme.vars.spacing.unit} * 1);
         padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);
       `,
-	valueText: __emotion_css.css`
+	valueText: require_emotion.css`
         color: ${theme.vars.colors.text.primary};
         flex: 1;
         font-family: monospace;

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

@@ -1 +1 @@
-{"version":3,"file":"CopyableText.styles.cjs","names":[],"sources":["../../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"sourcesContent":["// Copyright 2026 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\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(\n    () => ({\n      container: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} * 0.5);\n        width: 100%;\n      `,\n      copyButton: css`\n        flex-shrink: 0;\n        white-space: nowrap;\n      `,\n      label: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: 0.875rem;\n        font-weight: 500;\n      `,\n      valueBox: css`\n        align-items: center;\n        background-color: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.small};\n        display: flex;\n        gap: calc(${theme.vars.spacing.unit} * 1);\n        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);\n      `,\n      valueText: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        font-family: monospace;\n        font-size: 0.85rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        word-break: break-all;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAOA,MAAM,aAAa,oCAER;CACL,WAAW,iBAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,iBAAG;;;;CAIf,OAAO,iBAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,iBAAG;;4BAES,MAAM,KAAK,OAAO,WAAW,QAAQ;4BACrC,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;oBAEnC,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;CAElF,WAAW,iBAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}
+{"version":3,"file":"CopyableText.styles.cjs","names":[],"sources":["../../../../../src/components/primitives/CopyableText/CopyableText.styles.ts"],"sourcesContent":["// Copyright 2026 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\nconst useStyles = (theme: Theme): Record<string, string> =>\n  useMemo(\n    () => ({\n      container: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} * 0.5);\n        width: 100%;\n      `,\n      copyButton: css`\n        flex-shrink: 0;\n        white-space: nowrap;\n      `,\n      label: css`\n        color: ${theme.vars.colors.text.secondary};\n        font-size: 0.875rem;\n        font-weight: 500;\n      `,\n      valueBox: css`\n        align-items: center;\n        background-color: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.small};\n        display: flex;\n        gap: calc(${theme.vars.spacing.unit} * 1);\n        padding: calc(${theme.vars.spacing.unit} * 0.75) calc(${theme.vars.spacing.unit} * 1);\n      `,\n      valueText: css`\n        color: ${theme.vars.colors.text.primary};\n        flex: 1;\n        font-family: monospace;\n        font-size: 0.85rem;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        word-break: break-all;\n      `,\n    }),\n    [theme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;AAOA,MAAM,aAAa,oCAER;CACL,WAAW,mBAAG;;;oBAGA,MAAM,KAAK,QAAQ,KAAK;;;CAGtC,YAAY,mBAAG;;;;CAIf,OAAO,mBAAG;iBACC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,UAAU,mBAAG;;4BAES,MAAM,KAAK,OAAO,WAAW,QAAQ;4BACrC,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;oBAEnC,MAAM,KAAK,QAAQ,KAAK;wBACpB,MAAM,KAAK,QAAQ,KAAK,gBAAgB,MAAM,KAAK,QAAQ,KAAK;;CAElF,WAAW,mBAAG;iBACH,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;;;;;;CAS3C,GACD,CAAC,MAAM,CACR;AAEH,kCAAe"}

package/dist/cjs/components/primitives/DatePicker/DatePicker.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/DatePicker/DatePicker.tsx
 const DatePicker = ({ label, error, className, required, disabled, helperText, dateFormat = "yyyy-MM-dd", style = {},...rest }) => {
@@ -18,18 +17,18 @@ const DatePicker = ({ label, error, className, required, disabled, helperText, d
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
 		error,
 		helperText,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker")), className),
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
 			required,
 			error: hasError,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker", "label")), styles["label"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker", "label")), styles["label"]),
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			type: "date",
 			pattern: "\\d{4}-\\d{2}-\\d{2}",
 			placeholder: dateFormat,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker", "input")), styles["input"], styles["errorInput"], styles["disabledInput"], {
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker", "input")), styles["input"], styles["errorInput"], styles["disabledInput"], {
 				[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker", "input", "error"))]: hasError,
 				[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("date-picker", "input", "disabled"))]: disabled
 			}),

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","names":["DatePicker: FC<DatePickerProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/DatePicker/DatePicker.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 './DatePicker.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom date format for the regex pattern\n   */\n  dateFormat?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst DatePicker: FC<DatePickerProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  dateFormat = 'yyyy-MM-dd',\n  style = {},\n  ...rest\n}: DatePickerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!disabled);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('date-picker')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel\n          required={required}\n          error={hasError}\n          className={cx(withVendorCSSClassPrefix(bem('date-picker', 'label')), styles['label'])}\n        >\n          {label}\n        </InputLabel>\n      )}\n      <input\n        type=\"date\"\n        pattern=\"\\d{4}-\\d{2}-\\d{2}\"\n        placeholder={dateFormat}\n        className={cx(\n          withVendorCSSClassPrefix(bem('date-picker', 'input')),\n          styles['input'],\n          styles['errorInput'],\n          styles['disabledInput'],\n          {\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'error'))]: hasError,\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'disabled'))]: disabled,\n          },\n        )}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n      />\n    </FormControl>\n  );\n};\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;;AA0CA,MAAMA,cAAmC,EACvC,OACA,OACA,WACA,UACA,UACA,YACA,aAAa,cACb,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,kCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,2CAACC;GACW;GACV,OAAO;GACP,gHAA2C,eAAe,QAAQ,CAAC,EAAE,OAAO,SAAS;aAEpF;IACU,EAEf,2CAAC;GACC,MAAK;GACL,SAAQ;GACR,aAAa;GACb,gHAC+B,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,OAAO,eACP,OAAO,kBACP;oFACgC,eAAe,SAAS,QAAQ,CAAC,GAAG;oFACpC,eAAe,SAAS,WAAW,CAAC,GAAG;IACtE,CACF;GACS;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;IACJ;GACU;;AAIlB,yBAAe"}
+{"version":3,"file":"DatePicker.cjs","names":["DatePicker: FC<DatePickerProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/DatePicker/DatePicker.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 './DatePicker.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 DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom date format for the regex pattern\n   */\n  dateFormat?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the input\n   */\n  label?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n}\n\nconst DatePicker: FC<DatePickerProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  dateFormat = 'yyyy-MM-dd',\n  style = {},\n  ...rest\n}: DatePickerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!disabled);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('date-picker')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel\n          required={required}\n          error={hasError}\n          className={cx(withVendorCSSClassPrefix(bem('date-picker', 'label')), styles['label'])}\n        >\n          {label}\n        </InputLabel>\n      )}\n      <input\n        type=\"date\"\n        pattern=\"\\d{4}-\\d{2}-\\d{2}\"\n        placeholder={dateFormat}\n        className={cx(\n          withVendorCSSClassPrefix(bem('date-picker', 'input')),\n          styles['input'],\n          styles['errorInput'],\n          styles['disabledInput'],\n          {\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'error'))]: hasError,\n            [withVendorCSSClassPrefix(bem('date-picker', 'input', 'disabled'))]: disabled,\n          },\n        )}\n        disabled={disabled}\n        aria-invalid={hasError}\n        aria-required={required}\n        {...rest}\n      />\n    </FormControl>\n  );\n};\n\nexport default DatePicker;\n"],"mappings":";;;;;;;;;;;;AA0CA,MAAMA,cAAmC,EACvC,OACA,OACA,WACA,UACA,UACA,YACA,aAAa,cACb,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,kCAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,4CAACC;EACQ;EACK;EACZ,WAAWC,kGAAgC,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,2CAACC;GACW;GACV,OAAO;GACP,WAAWD,kGAAgC,eAAe,QAAQ,CAAC,EAAE,OAAO,SAAS;aAEpF;IACU,EAEf,2CAAC;GACC,MAAK;GACL,SAAQ;GACR,aAAa;GACb,WAAWA,kGACoB,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,OAAO,eACP,OAAO,kBACP;oFACgC,eAAe,SAAS,QAAQ,CAAC,GAAG;oFACpC,eAAe,SAAS,WAAW,CAAC,GAAG;IACtE,CACF;GACS;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;IACJ;GACU;;AAIlB,yBAAe"}

package/dist/cjs/components/primitives/DatePicker/DatePicker.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/DatePicker/DatePicker.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, hasError, disabled) => (0, react.useMemo)(() => {
-	const inputStyles = __emotion_css.css`
+	const inputStyles = require_emotion.css`
       width: 100%;
       padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
       border: 1px solid ${theme.vars.colors.border};
@@ -41,7 +40,7 @@ const useStyles = (theme, colorScheme, hasError, disabled) => (0, react.useMemo)
         color: ${theme.vars.colors.text.secondary};
       }
     `;
-	const errorInputStyles = __emotion_css.css`
+	const errorInputStyles = require_emotion.css`
       border-color: ${theme.vars.colors.error.main};
 
       &:focus {
@@ -53,7 +52,7 @@ const useStyles = (theme, colorScheme, hasError, disabled) => (0, react.useMemo)
         border-color: ${theme.vars.colors.error.main};
       }
     `;
-	const disabledInputStyles = __emotion_css.css`
+	const disabledInputStyles = require_emotion.css`
       background-color: ${theme.vars.colors.background.disabled};
       color: ${theme.vars.colors.text.secondary};
       cursor: not-allowed;
@@ -65,7 +64,7 @@ const useStyles = (theme, colorScheme, hasError, disabled) => (0, react.useMemo)
         box-shadow: none;
       }
     `;
-	const labelStyles = __emotion_css.css`
+	const labelStyles = require_emotion.css`
       /* Label styles will be handled by InputLabel component */
     `;
 	return {

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.styles.cjs","names":["inputStyles: string","errorInputStyles: string","disabledInputStyles: string","labelStyles: string"],"sources":["../../../../../src/components/primitives/DatePicker/DatePicker.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\n/**\n * Creates styles for the DatePicker 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 hasError - Whether the date picker has an error state\n * @param disabled - Whether the date picker is disabled\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, disabled: boolean): Record<string, string> =>\n  useMemo(() => {\n    const inputStyles: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-size: 1rem;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.primary.main};\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n      }\n    `;\n\n    const errorInputStyles: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const disabledInputStyles: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      color: ${theme.vars.colors.text.secondary};\n      cursor: not-allowed;\n      opacity: 0.6;\n\n      &:hover,\n      &:focus {\n        border-color: ${theme.vars.colors.border};\n        box-shadow: none;\n      }\n    `;\n\n    const labelStyles: string = css`\n      /* Label styles will be handled by InputLabel component */\n    `;\n\n    return {\n      disabledInput: disabled ? disabledInputStyles : '',\n      errorInput: hasError ? errorInputStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n    };\n  }, [theme, colorScheme, hasError, disabled]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,cAAsB,iBAAG;;iBAElB,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;;qBAErF,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAOvC,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACvB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;wBAIvC,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAItC,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI9C,MAAMC,mBAA2B,iBAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,sBAA8B,iBAAG;0BACjB,MAAM,KAAK,OAAO,WAAW,SAAS;eACjD,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;wBAMxB,MAAM,KAAK,OAAO,OAAO;;;;CAK7C,MAAMC,cAAsB,iBAAG;;;AAI/B,QAAO;EACL,eAAe,WAAW,sBAAsB;EAChD,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,gCAAe"}
+{"version":3,"file":"DatePicker.styles.cjs","names":["inputStyles: string","errorInputStyles: string","disabledInputStyles: string","labelStyles: string"],"sources":["../../../../../src/components/primitives/DatePicker/DatePicker.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\n/**\n * Creates styles for the DatePicker 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 hasError - Whether the date picker has an error state\n * @param disabled - Whether the date picker is disabled\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, disabled: boolean): Record<string, string> =>\n  useMemo(() => {\n    const inputStyles: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\n      font-size: 1rem;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &:focus {\n        border-color: ${theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.primary.main};\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n      }\n    `;\n\n    const errorInputStyles: string = css`\n      border-color: ${theme.vars.colors.error.main};\n\n      &:focus {\n        border-color: ${theme.vars.colors.error.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${theme.vars.colors.error.main};\n      }\n    `;\n\n    const disabledInputStyles: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      color: ${theme.vars.colors.text.secondary};\n      cursor: not-allowed;\n      opacity: 0.6;\n\n      &:hover,\n      &:focus {\n        border-color: ${theme.vars.colors.border};\n        box-shadow: none;\n      }\n    `;\n\n    const labelStyles: string = css`\n      /* Label styles will be handled by InputLabel component */\n    `;\n\n    return {\n      disabledInput: disabled ? disabledInputStyles : '',\n      errorInput: hasError ? errorInputStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n    };\n  }, [theme, colorScheme, hasError, disabled]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,cAAsB,mBAAG;;iBAElB,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;;qBAErF,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAOvC,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACvB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;wBAIvC,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAItC,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI9C,MAAMC,mBAA2B,mBAAG;sBAClB,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,sBAA8B,mBAAG;0BACjB,MAAM,KAAK,OAAO,WAAW,SAAS;eACjD,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;wBAMxB,MAAM,KAAK,OAAO,OAAO;;;;CAK7C,MAAMC,cAAsB,mBAAG;;;AAI/B,QAAO;EACL,eAAe,WAAW,sBAAsB;EAChD,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,gCAAe"}

package/dist/cjs/components/primitives/Dialog/Dialog.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 = require('../Button/Button.cjs');
 const require_X = require('../Icons/X.cjs');
@@ -9,8 +10,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);
 let __floating_ui_react = require("@floating-ui/react");
 __floating_ui_react = require_rolldown_runtime.__toESM(__floating_ui_react);
 
@@ -90,14 +89,14 @@ const DialogContent = (0, react.forwardRef)((props, propRef) => {
 	const ref = (0, __floating_ui_react.useMergeRefs)([context.refs.setFloating, propRef]);
 	if (!floatingContext.open) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingPortal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingOverlay, {
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "overlay")), styles["overlay"]),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "overlay")), styles["overlay"]),
 		lockScroll: true,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__floating_ui_react.FloatingFocusManager, {
 			context: floatingContext,
 			initialFocus: -1,
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref,
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "content")), styles["content"], props.className),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "content")), styles["content"], props.className),
 				"aria-labelledby": context.labelId,
 				"aria-describedby": context.descriptionId,
 				...context.getFloatingProps(props),
@@ -118,12 +117,12 @@ const DialogHeading = (0, react.forwardRef)(({ children,...props }, ref) => {
 		};
 	}, [id, context.setLabelId]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "header")), styles["header"]),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "header")), styles["header"]),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 			...props,
 			ref,
 			id,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "title")), styles["headerTitle"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "title")), styles["headerTitle"]),
 			children
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
 			color: "tertiary",
@@ -156,7 +155,7 @@ const DialogDescription = (0, react.forwardRef)(({ children,...props }, ref) =>
 		...props,
 		ref,
 		id,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "description")), styles["description"], props.className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "description")), styles["description"], props.className),
 		children
 	});
 });
@@ -178,7 +177,7 @@ const DialogClose = (0, react.forwardRef)(({ children, asChild = false,...props
 		...props,
 		ref,
 		onClick: handleClick,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "close")), props.className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("dialog", "close")), props.className),
 		variant: "text",
 		children
 	});