@thunderid/react 0.12.0 → 0.13.0

package/dist/cjs/components/presentation/auth/SignUp/BaseSignUp.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/presentation/auth/SignUp/BaseSignUp.styles.ts
 /**
@@ -12,98 +11,98 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
-	const signUp = __emotion_css.css`
+	const signUp = require_emotion.css`
       min-width: 420px;
       margin: 0 auto;
       font-family: ${theme.vars.typography.fontFamily};
     `;
-	const card = __emotion_css.css`
+	const card = require_emotion.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       gap: calc(${theme.vars.spacing.unit} * 2);
       min-width: 420px;
     `;
-	const logoContainer = __emotion_css.css`
+	const logoContainer = require_emotion.css`
       display: flex;
       flex-direction: column;
       align-items: center;
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-	const header = __emotion_css.css`
+	const header = require_emotion.css`
       gap: 0;
       align-items: center;
     `;
-	const title = __emotion_css.css`
+	const title = require_emotion.css`
       margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;
       color: ${theme.vars.colors.text.primary};
     `;
-	const subtitle = __emotion_css.css`
+	const subtitle = require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
-	const messageItem = __emotion_css.css`
+	const messageItem = require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
-	const errorContainer = __emotion_css.css`
+	const errorContainer = require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-	const contentContainer = __emotion_css.css`
+	const contentContainer = require_emotion.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-	const loadingContainer = __emotion_css.css`
+	const loadingContainer = require_emotion.css`
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-	const loadingText = __emotion_css.css`
+	const loadingText = require_emotion.css`
       margin-top: calc(${theme.vars.spacing.unit} * 2);
       color: ${theme.vars.colors.text.secondary};
     `;
-	const divider = __emotion_css.css`
+	const divider = require_emotion.css`
       margin: calc(${theme.vars.spacing.unit} * 1) 0;
     `;
-	const centeredContainer = __emotion_css.css`
+	const centeredContainer = require_emotion.css`
       text-align: center;
       padding: calc(${theme.vars.spacing.unit} * 4);
     `;
-	const passkeyContainer = __emotion_css.css`
+	const passkeyContainer = require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-	const passkeyText = __emotion_css.css`
+	const passkeyText = require_emotion.css`
       margin-top: calc(${theme.vars.spacing.unit} * 1);
       color: ${theme.vars.colors.text.secondary};
     `;
-	const form = __emotion_css.css`
+	const form = require_emotion.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 2);
     `;
-	const formDivider = __emotion_css.css`
+	const formDivider = require_emotion.css`
       margin: calc(${theme.vars.spacing.unit} * 1) 0;
     `;
-	const authenticatorSection = __emotion_css.css`
+	const authenticatorSection = require_emotion.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} * 1);
     `;
-	const authenticatorItem = __emotion_css.css`
+	const authenticatorItem = require_emotion.css`
       width: 100%;
     `;
-	const noAuthenticatorCard = __emotion_css.css`
+	const noAuthenticatorCard = require_emotion.css`
       background: ${theme.vars.colors.background.surface};
       border-radius: ${theme.vars.borderRadius.large};
       padding: calc(${theme.vars.spacing.unit} * 2);
     `;
-	const errorAlert = __emotion_css.css`
+	const errorAlert = require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
-	const messagesAlert = __emotion_css.css`
+	const messagesAlert = require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `;
-	const flowMessagesContainer = __emotion_css.css`
+	const flowMessagesContainer = require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 2);
     `;
 	return {
@@ -115,7 +114,7 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
 		divider,
 		errorAlert,
 		errorContainer,
-		flowMessageItem: __emotion_css.css`
+		flowMessageItem: require_emotion.css`
       margin-bottom: calc(${theme.vars.spacing.unit} * 1);
     `,
 		flowMessagesContainer,

package/dist/cjs/components/presentation/auth/SignUp/BaseSignUp.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSignUp.styles.cjs","names":["signUp: string","card: string","logoContainer: string","header: string","title: string","subtitle: string","messageItem: string","errorContainer: string","contentContainer: string","loadingContainer: string","loadingText: string","divider: string","centeredContainer: string","passkeyContainer: string","passkeyText: string","form: string","formDivider: string","authenticatorSection: string","authenticatorItem: string","noAuthenticatorCard: string","errorAlert: string","messagesAlert: string","flowMessagesContainer: string"],"sources":["../../../../../../src/components/presentation/auth/SignUp/BaseSignUp.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 BaseSignUp component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const signUp: string = css`\n      min-width: 420px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n    `;\n\n    const logoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const messageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const errorContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const contentContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const loadingText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const centeredContainer: string = css`\n      text-align: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const passkeyContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const passkeyText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const formDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const authenticatorSection: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const authenticatorItem: string = css`\n      width: 100%;\n    `;\n\n    const noAuthenticatorCard: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messagesAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const flowMessagesContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const flowMessageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    return {\n      authenticatorItem,\n      authenticatorSection,\n      card,\n      centeredContainer,\n      contentContainer,\n      divider,\n      errorAlert,\n      errorContainer,\n      flowMessageItem,\n      flowMessagesContainer,\n      form,\n      formDivider,\n      header,\n      loadingContainer,\n      loadingText,\n      logoContainer,\n      messageItem,\n      messagesAlert,\n      noAuthenticatorCard,\n      passkeyContainer,\n      passkeyText,\n      signUp,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,SAAiB,iBAAG;;;qBAGT,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,iBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwB,iBAAG;;;;4BAIT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,SAAiB,iBAAG;;;;CAK1B,MAAMC,QAAgB,iBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,iBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,cAAsB,iBAAG;4BACP,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,iBAAyB,iBAAG;4BACV,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,mBAA2B,iBAAG;;;kBAGtB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,mBAA2B,iBAAG;;;;sBAIlB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,cAAsB,iBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,UAAkB,iBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,oBAA4B,iBAAG;;sBAEnB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,mBAA2B,iBAAG;4BACZ,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,cAAsB,iBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,OAAe,iBAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,cAAsB,iBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,uBAA+B,iBAAG;;;kBAG1B,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,oBAA4B,iBAAG;;;CAIrC,MAAMC,sBAA8B,iBAAG;oBACvB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,aAAqB,iBAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,gBAAwB,iBAAG;4BACT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,wBAAgC,iBAAG;4BACjB,MAAM,KAAK,QAAQ,KAAK;;AAOhD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAb8B,iBAAG;4BACX,MAAM,KAAK,QAAQ,KAAK;;EAa9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,gCAAe"}
+{"version":3,"file":"BaseSignUp.styles.cjs","names":["signUp: string","card: string","logoContainer: string","header: string","title: string","subtitle: string","messageItem: string","errorContainer: string","contentContainer: string","loadingContainer: string","loadingText: string","divider: string","centeredContainer: string","passkeyContainer: string","passkeyText: string","form: string","formDivider: string","authenticatorSection: string","authenticatorItem: string","noAuthenticatorCard: string","errorAlert: string","messagesAlert: string","flowMessagesContainer: string"],"sources":["../../../../../../src/components/presentation/auth/SignUp/BaseSignUp.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 BaseSignUp component\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const signUp: string = css`\n      min-width: 420px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      min-width: 420px;\n    `;\n\n    const logoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const header: string = css`\n      gap: 0;\n      align-items: center;\n    `;\n\n    const title: string = css`\n      margin: 0 0 calc(${theme.vars.spacing.unit} * 1) 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const messageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const errorContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const contentContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const loadingText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const divider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const centeredContainer: string = css`\n      text-align: center;\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const passkeyContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const passkeyText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 1);\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const formDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 1) 0;\n    `;\n\n    const authenticatorSection: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const authenticatorItem: string = css`\n      width: 100%;\n    `;\n\n    const noAuthenticatorCard: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const messagesAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const flowMessagesContainer: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const flowMessageItem: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    return {\n      authenticatorItem,\n      authenticatorSection,\n      card,\n      centeredContainer,\n      contentContainer,\n      divider,\n      errorAlert,\n      errorContainer,\n      flowMessageItem,\n      flowMessagesContainer,\n      form,\n      formDivider,\n      header,\n      loadingContainer,\n      loadingText,\n      logoContainer,\n      messageItem,\n      messagesAlert,\n      noAuthenticatorCard,\n      passkeyContainer,\n      passkeyText,\n      signUp,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.colors.background.surface,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.borderRadius.large,\n    theme.vars.spacing.unit,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;AAaA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,SAAiB,mBAAG;;;qBAGT,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,mBAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;kBACnC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwB,mBAAG;;;;4BAIT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,SAAiB,mBAAG;;;;CAK1B,MAAMC,QAAgB,mBAAG;yBACJ,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,mBAAG;4BACJ,MAAM,KAAK,QAAQ,KAAK;eACrC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,cAAsB,mBAAG;4BACP,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,iBAAyB,mBAAG;4BACV,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,mBAA2B,mBAAG;;;kBAGtB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,mBAA2B,mBAAG;;;;sBAIlB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,cAAsB,mBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,UAAkB,mBAAG;qBACV,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,oBAA4B,mBAAG;;sBAEnB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,mBAA2B,mBAAG;4BACZ,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,cAAsB,mBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;eAClC,MAAM,KAAK,OAAO,KAAK,UAAU;;CAG5C,MAAMC,OAAe,mBAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,cAAsB,mBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,uBAA+B,mBAAG;;;kBAG1B,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,oBAA4B,mBAAG;;;CAIrC,MAAMC,sBAA8B,mBAAG;oBACvB,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,aAAqB,mBAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,gBAAwB,mBAAG;4BACT,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,wBAAgC,mBAAG;4BACjB,MAAM,KAAK,QAAQ,KAAK;;AAOhD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,iBAb8B,mBAAG;4BACX,MAAM,KAAK,QAAQ,KAAK;;EAa9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,gCAAe"}

package/dist/cjs/components/primitives/AffixedField/AffixedField.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');
@@ -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);
 
 //#region src/components/primitives/AffixedField/AffixedField.tsx
 /**
@@ -32,12 +31,12 @@ const AffixedField = ({ label, error, required, className, disabled, helperText,
 	const hasFixedPrefix = prefixList.length === 1;
 	const styles = require_AffixedField_styles.default(theme, colorScheme, disabled ?? false, hasError, hasPrefix);
 	const prefixDescriptionId = `${(0, react.useId)()}-prefix`;
-	const containerClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "container")), styles["inputContainer"]);
-	const inputClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "input")), styles["input"]);
+	const containerClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "container")), styles["inputContainer"]);
+	const inputClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "input")), styles["input"]);
 	const renderPrefix = () => {
 		if (prefixList.length === 0) return null;
 		if (prefixList.length === 1) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "prefix-span")), styles["prefixSpan"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "prefix-span")), styles["prefixSpan"]),
 			"aria-hidden": "true",
 			children: prefixList[0].label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -47,7 +46,7 @@ const AffixedField = ({ label, error, required, className, disabled, helperText,
 		})] });
 		const selectedValue = prefixValue ?? prefixList[0].value;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "prefix-select")), styles["prefixSelect"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field", "prefix-select")), styles["prefixSelect"]),
 			value: selectedValue,
 			disabled,
 			onChange: (e) => onPrefixChange?.(e.target.value),
@@ -61,7 +60,7 @@ const AffixedField = ({ label, error, required, className, disabled, helperText,
 	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)("affixed-field")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("affixed-field")), className),
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
 			required,

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

@@ -1 +1 @@
-{"version":3,"file":"AffixedField.cjs","names":["AffixedField: FC<AffixedFieldProps>","useTheme","hasError: boolean","prefixList: PrefixOption[]","hasPrefix: boolean","hasFixedPrefix: boolean","styles: Record<string, string>","useStyles","prefixDescriptionId: string","containerClassName: string","inputClassName: string","selectedValue: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {PrefixOption, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {ChangeEvent, FC, InputHTMLAttributes, ReactElement, useId} from 'react';\nimport useStyles from './AffixedField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface AffixedFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {\n  /** Additional CSS class names applied to the outer form control. */\n  className?: string;\n  /** Whether the field is disabled. */\n  disabled?: boolean;\n  /** Error message to render below the field. */\n  error?: string;\n  /** Helper text to render below the field. */\n  helperText?: string;\n  /** Label rendered above the field. */\n  label?: string;\n  /**\n   * Called when the user changes the selected prefix. Only fires when `prefixes` is an\n   * array with two or more entries and the user picks a different one.\n   */\n  onPrefixChange?: (prefixValue: string) => void;\n  /**\n   * Currently selected prefix `value` (must match one of the resolved prefix entries'\n   * `value`). Required when `prefixes` resolves to a non-empty list. Ignored otherwise.\n   */\n  prefixValue?: string;\n  /**\n   * Leading affix. `string` renders as a fixed span; `PrefixOption[]` renders as a fixed\n   * span (single entry) or dropdown (multiple entries). Empty or undefined renders a\n   * plain input with no leading element.\n   */\n  prefixes?: string | PrefixOption[];\n  /** Whether the field is required. */\n  required?: boolean;\n}\n\n/**\n * Converts the polymorphic `prefixes` prop into a uniform list. A string is treated\n * as a single fixed entry so the rest of the component can iterate a single shape.\n */\nconst normalizePrefixes = (prefixes: string | PrefixOption[] | undefined): PrefixOption[] => {\n  if (typeof prefixes === 'string') {\n    return prefixes.length > 0 ? [{label: prefixes, value: prefixes}] : [];\n  }\n  return prefixes ?? [];\n};\n\nconst AffixedField: FC<AffixedFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  prefixes,\n  prefixValue,\n  onPrefixChange,\n  type = 'text',\n  style = {},\n  ...rest\n}: AffixedFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError: boolean = !!error;\n  const prefixList: PrefixOption[] = normalizePrefixes(prefixes);\n  const hasPrefix: boolean = prefixList.length > 0;\n  const hasFixedPrefix: boolean = prefixList.length === 1;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError, hasPrefix);\n  // Stable id for the visually-hidden prefix announcement; only referenced when a\n  // fixed prefix is present, but generated unconditionally so the hook order is stable.\n  const prefixDescriptionId: string = `${useId()}-prefix`;\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('affixed-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const inputClassName: string = cx(withVendorCSSClassPrefix(bem('affixed-field', 'input')), styles['input']);\n\n  const renderPrefix = (): ReactElement | null => {\n    if (prefixList.length === 0) return null;\n\n    if (prefixList.length === 1) {\n      return (\n        <>\n          <span\n            className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-span')), styles['prefixSpan'])}\n            aria-hidden=\"true\"\n          >\n            {prefixList[0].label}\n          </span>\n          {/* Assistive-tech-only mirror of the fixed prefix; wired to the input via aria-describedby. */}\n          <span id={prefixDescriptionId} className={styles['visuallyHidden']}>\n            {prefixList[0].label}\n          </span>\n        </>\n      );\n    }\n\n    const selectedValue: string = prefixValue ?? prefixList[0].value;\n    return (\n      <select\n        className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-select')), styles['prefixSelect'])}\n        value={selectedValue}\n        disabled={disabled}\n        onChange={(e: ChangeEvent<HTMLSelectElement>): void => onPrefixChange?.(e.target.value)}\n        aria-label=\"Prefix\"\n      >\n        {prefixList.map((p: PrefixOption) => (\n          <option key={p.value} value={p.value}>\n            {p.label}\n          </option>\n        ))}\n      </select>\n    );\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('affixed-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {renderPrefix()}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          aria-describedby={\n            [rest['aria-describedby'], hasFixedPrefix ? prefixDescriptionId : undefined].filter(Boolean).join(' ') ||\n            undefined\n          }\n        />\n      </div>\n    </FormControl>\n  );\n};\n\nexport default AffixedField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA8CA,MAAM,qBAAqB,aAAkE;AAC3F,KAAI,OAAO,aAAa,SACtB,QAAO,SAAS,SAAS,IAAI,CAAC;EAAC,OAAO;EAAU,OAAO;EAAS,CAAC,GAAG,EAAE;AAExE,QAAO,YAAY,EAAE;;AAGvB,MAAMA,gBAAuC,EAC3C,OACA,OACA,UACA,WACA,UACA,YACA,UACA,aACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACoB;CACvB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,WAAoB,CAAC,CAAC;CAC5B,MAAMC,aAA6B,kBAAkB,SAAS;CAC9D,MAAMC,YAAqB,WAAW,SAAS;CAC/C,MAAMC,iBAA0B,WAAW,WAAW;CACtD,MAAMC,SAAiCC,oCAAU,OAAO,aAAa,YAAY,OAAO,UAAU,UAAU;CAG5G,MAAMC,sBAA8B,qBAAU,CAAC;CAE/C,MAAMC,0HACyB,iBAAiB,YAAY,CAAC,EAC3D,OAAO,kBACR;CAED,MAAMC,sHAAyD,iBAAiB,QAAQ,CAAC,EAAE,OAAO,SAAS;CAE3G,MAAM,qBAA0C;AAC9C,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,MAAI,WAAW,WAAW,EACxB,QACE,qFACE,2CAAC;GACC,gHAA2C,iBAAiB,cAAc,CAAC,EAAE,OAAO,cAAc;GAClG,eAAY;aAEX,WAAW,GAAG;IACV,EAEP,2CAAC;GAAK,IAAI;GAAqB,WAAW,OAAO;aAC9C,WAAW,GAAG;IACV,IACN;EAIP,MAAMC,gBAAwB,eAAe,WAAW,GAAG;AAC3D,SACE,2CAAC;GACC,gHAA2C,iBAAiB,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;GACtG,OAAO;GACG;GACV,WAAW,MAA4C,iBAAiB,EAAE,OAAO,MAAM;GACvF,cAAW;aAEV,WAAW,KAAK,MACf,2CAAC;IAAqB,OAAO,EAAE;cAC5B,EAAE;MADQ,EAAE,MAEN,CACT;IACK;;AAIb,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,gBAAgB,CAAC,EAAE,UAAU;EACjE;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;cACb,cAAc,EACf,2CAAC;IACC,WAAW;IACL;IACI;IACV,gBAAc;IACd,iBAAe;IACf,GAAI;IACJ,oBACE,CAAC,KAAK,qBAAqB,iBAAiB,sBAAsB,OAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IACtG;KAEF;IACE;GACM;;AAIlB,2BAAe"}
+{"version":3,"file":"AffixedField.cjs","names":["AffixedField: FC<AffixedFieldProps>","useTheme","hasError: boolean","prefixList: PrefixOption[]","hasPrefix: boolean","hasFixedPrefix: boolean","styles: Record<string, string>","useStyles","prefixDescriptionId: string","containerClassName: string","cx","inputClassName: string","selectedValue: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {PrefixOption, bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {ChangeEvent, FC, InputHTMLAttributes, ReactElement, useId} from 'react';\nimport useStyles from './AffixedField.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 AffixedFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'prefix'> {\n  /** Additional CSS class names applied to the outer form control. */\n  className?: string;\n  /** Whether the field is disabled. */\n  disabled?: boolean;\n  /** Error message to render below the field. */\n  error?: string;\n  /** Helper text to render below the field. */\n  helperText?: string;\n  /** Label rendered above the field. */\n  label?: string;\n  /**\n   * Called when the user changes the selected prefix. Only fires when `prefixes` is an\n   * array with two or more entries and the user picks a different one.\n   */\n  onPrefixChange?: (prefixValue: string) => void;\n  /**\n   * Currently selected prefix `value` (must match one of the resolved prefix entries'\n   * `value`). Required when `prefixes` resolves to a non-empty list. Ignored otherwise.\n   */\n  prefixValue?: string;\n  /**\n   * Leading affix. `string` renders as a fixed span; `PrefixOption[]` renders as a fixed\n   * span (single entry) or dropdown (multiple entries). Empty or undefined renders a\n   * plain input with no leading element.\n   */\n  prefixes?: string | PrefixOption[];\n  /** Whether the field is required. */\n  required?: boolean;\n}\n\n/**\n * Converts the polymorphic `prefixes` prop into a uniform list. A string is treated\n * as a single fixed entry so the rest of the component can iterate a single shape.\n */\nconst normalizePrefixes = (prefixes: string | PrefixOption[] | undefined): PrefixOption[] => {\n  if (typeof prefixes === 'string') {\n    return prefixes.length > 0 ? [{label: prefixes, value: prefixes}] : [];\n  }\n  return prefixes ?? [];\n};\n\nconst AffixedField: FC<AffixedFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  prefixes,\n  prefixValue,\n  onPrefixChange,\n  type = 'text',\n  style = {},\n  ...rest\n}: AffixedFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError: boolean = !!error;\n  const prefixList: PrefixOption[] = normalizePrefixes(prefixes);\n  const hasPrefix: boolean = prefixList.length > 0;\n  const hasFixedPrefix: boolean = prefixList.length === 1;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError, hasPrefix);\n  // Stable id for the visually-hidden prefix announcement; only referenced when a\n  // fixed prefix is present, but generated unconditionally so the hook order is stable.\n  const prefixDescriptionId: string = `${useId()}-prefix`;\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('affixed-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const inputClassName: string = cx(withVendorCSSClassPrefix(bem('affixed-field', 'input')), styles['input']);\n\n  const renderPrefix = (): ReactElement | null => {\n    if (prefixList.length === 0) return null;\n\n    if (prefixList.length === 1) {\n      return (\n        <>\n          <span\n            className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-span')), styles['prefixSpan'])}\n            aria-hidden=\"true\"\n          >\n            {prefixList[0].label}\n          </span>\n          {/* Assistive-tech-only mirror of the fixed prefix; wired to the input via aria-describedby. */}\n          <span id={prefixDescriptionId} className={styles['visuallyHidden']}>\n            {prefixList[0].label}\n          </span>\n        </>\n      );\n    }\n\n    const selectedValue: string = prefixValue ?? prefixList[0].value;\n    return (\n      <select\n        className={cx(withVendorCSSClassPrefix(bem('affixed-field', 'prefix-select')), styles['prefixSelect'])}\n        value={selectedValue}\n        disabled={disabled}\n        onChange={(e: ChangeEvent<HTMLSelectElement>): void => onPrefixChange?.(e.target.value)}\n        aria-label=\"Prefix\"\n      >\n        {prefixList.map((p: PrefixOption) => (\n          <option key={p.value} value={p.value}>\n            {p.label}\n          </option>\n        ))}\n      </select>\n    );\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('affixed-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {renderPrefix()}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n          aria-describedby={\n            [rest['aria-describedby'], hasFixedPrefix ? prefixDescriptionId : undefined].filter(Boolean).join(' ') ||\n            undefined\n          }\n        />\n      </div>\n    </FormControl>\n  );\n};\n\nexport default AffixedField;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8CA,MAAM,qBAAqB,aAAkE;AAC3F,KAAI,OAAO,aAAa,SACtB,QAAO,SAAS,SAAS,IAAI,CAAC;EAAC,OAAO;EAAU,OAAO;EAAS,CAAC,GAAG,EAAE;AAExE,QAAO,YAAY,EAAE;;AAGvB,MAAMA,gBAAuC,EAC3C,OACA,OACA,UACA,WACA,UACA,YACA,UACA,aACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACoB;CACvB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,WAAoB,CAAC,CAAC;CAC5B,MAAMC,aAA6B,kBAAkB,SAAS;CAC9D,MAAMC,YAAqB,WAAW,SAAS;CAC/C,MAAMC,iBAA0B,WAAW,WAAW;CACtD,MAAMC,SAAiCC,oCAAU,OAAO,aAAa,YAAY,OAAO,UAAU,UAAU;CAG5G,MAAMC,sBAA8B,qBAAU,CAAC;CAE/C,MAAMC,qBAA6BC,kGACJ,iBAAiB,YAAY,CAAC,EAC3D,OAAO,kBACR;CAED,MAAMC,iBAAyBD,kGAAgC,iBAAiB,QAAQ,CAAC,EAAE,OAAO,SAAS;CAE3G,MAAM,qBAA0C;AAC9C,MAAI,WAAW,WAAW,EAAG,QAAO;AAEpC,MAAI,WAAW,WAAW,EACxB,QACE,qFACE,2CAAC;GACC,WAAWA,kGAAgC,iBAAiB,cAAc,CAAC,EAAE,OAAO,cAAc;GAClG,eAAY;aAEX,WAAW,GAAG;IACV,EAEP,2CAAC;GAAK,IAAI;GAAqB,WAAW,OAAO;aAC9C,WAAW,GAAG;IACV,IACN;EAIP,MAAME,gBAAwB,eAAe,WAAW,GAAG;AAC3D,SACE,2CAAC;GACC,WAAWF,kGAAgC,iBAAiB,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;GACtG,OAAO;GACG;GACV,WAAW,MAA4C,iBAAiB,EAAE,OAAO,MAAM;GACvF,cAAW;aAEV,WAAW,KAAK,MACf,2CAAC;IAAqB,OAAO,EAAE;cAC5B,EAAE;MADQ,EAAE,MAEN,CACT;IACK;;AAIb,QACE,4CAACG;EACQ;EACK;EACZ,WAAWH,kGAAgC,gBAAgB,CAAC,EAAE,UAAU;EACjE;aAEN,SACC,2CAACI;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;cACb,cAAc,EACf,2CAAC;IACC,WAAW;IACL;IACI;IACV,gBAAc;IACd,iBAAe;IACf,GAAI;IACJ,oBACE,CAAC,KAAK,qBAAqB,iBAAiB,sBAAsB,OAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,IACtG;KAEF;IACE;GACM;;AAIlB,2BAAe"}

package/dist/cjs/components/primitives/AffixedField/AffixedField.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/AffixedField/AffixedField.styles.ts
 /**
@@ -13,13 +12,13 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasPrefix) => (0, rea
 	const borderColor = hasError ? theme.vars.colors.error.main : theme.vars.colors.border;
 	const focusColor = hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main;
 	const borderRadius = theme.vars.components?.Field?.root?.borderRadius ?? theme.vars.borderRadius.medium;
-	const inputContainer = __emotion_css.css`
+	const inputContainer = require_emotion.css`
       position: relative;
       display: flex;
       align-items: stretch;
       width: 100%;
     `;
-	const inputBase = __emotion_css.css`
+	const inputBase = require_emotion.css`
       flex: 1;
       min-width: 0;
       padding-block: ${theme.vars.spacing.unit};
@@ -53,18 +52,18 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasPrefix) => (0, rea
         border-color: ${focusColor};
       }
     `;
-	const input = hasPrefix ? __emotion_css.css`
+	const input = hasPrefix ? require_emotion.css`
           ${inputBase};
           border-start-start-radius: 0;
           border-end-start-radius: 0;
           border-start-end-radius: ${borderRadius};
           border-end-end-radius: ${borderRadius};
           border-inline-start: none;
-        ` : __emotion_css.css`
+        ` : require_emotion.css`
           ${inputBase};
           border-radius: ${borderRadius};
         `;
-	const prefixBase = __emotion_css.css`
+	const prefixBase = require_emotion.css`
       display: flex;
       align-items: center;
       padding-inline: calc(${theme.vars.spacing.unit} * 1.5);
@@ -77,7 +76,7 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasPrefix) => (0, rea
       font-family: ${theme.vars.typography.fontFamily};
       white-space: nowrap;
     `;
-	const prefixSpan = __emotion_css.css`
+	const prefixSpan = require_emotion.css`
       ${prefixBase};
       user-select: none;
       color: ${theme.vars.colors.text.secondary};
@@ -85,7 +84,7 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasPrefix) => (0, rea
 	return {
 		input,
 		inputContainer,
-		prefixSelect: __emotion_css.css`
+		prefixSelect: require_emotion.css`
       ${prefixBase};
       cursor: pointer;
       appearance: auto;
@@ -104,7 +103,7 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasPrefix) => (0, rea
       }
     `,
 		prefixSpan,
-		visuallyHidden: __emotion_css.css`
+		visuallyHidden: require_emotion.css`
       position: absolute;
       width: 1px;
       height: 1px;

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

@@ -1 +1 @@
-{"version":3,"file":"AffixedField.styles.cjs","names":["borderColor: string","focusColor: string","borderRadius: string","inputContainer: string","inputBase: string","input: string","prefixBase: string","prefixSpan: string"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.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\n/**\n * Creates styles for the AffixedField component. The container is a horizontal flex\n * row with a prefix element (span or select) joined to a shared-border input.\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasPrefix: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const borderColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.border;\n    const focusColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main;\n    const borderRadius: string = theme.vars.components?.Field?.root?.borderRadius ?? theme.vars.borderRadius.medium;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      width: 100%;\n    `;\n\n    const inputBase: string = css`\n      flex: 1;\n      min-width: 0;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n\n      &:focus {\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${focusColor};\n      }\n    `;\n\n    const input: string = hasPrefix\n      ? css`\n          ${inputBase};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n          border-start-end-radius: ${borderRadius};\n          border-end-end-radius: ${borderRadius};\n          border-inline-start: none;\n        `\n      : css`\n          ${inputBase};\n          border-radius: ${borderRadius};\n        `;\n\n    const prefixBase: string = css`\n      display: flex;\n      align-items: center;\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      border-start-start-radius: ${borderRadius};\n      border-end-start-radius: ${borderRadius};\n      background-color: ${theme.vars.colors.background.surface};\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      white-space: nowrap;\n    `;\n\n    const prefixSpan: string = css`\n      ${prefixBase};\n      user-select: none;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const prefixSelect: string = css`\n      ${prefixBase};\n      cursor: pointer;\n      appearance: auto;\n      padding-inline-end: calc(${theme.vars.spacing.unit} * 1.5);\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n        z-index: 1;\n      }\n    `;\n\n    /**\n     * Visually hides content while keeping it discoverable by assistive tech. Used\n     * to expose the fixed prefix value to screen readers via `aria-describedby` while\n     * the sighted-user span stays `aria-hidden` (decorative).\n     */\n    const visuallyHidden: string = css`\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      prefixSelect,\n      prefixSpan,\n      visuallyHidden,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasPrefix]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,aACJ,OACA,aACA,UACA,UACA,uCAEc;CACZ,MAAMA,cAAsB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO;CACxF,MAAMC,aAAqB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;CAC/F,MAAMC,eAAuB,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa;CAEzG,MAAMC,iBAAyB,iBAAG;;;;;;CAOlC,MAAMC,YAAoB,iBAAG;;;uBAGV,MAAM,KAAK,QAAQ,KAAK;6BAClB,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mBACnB,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;iBAOjG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;wBAK1B,WAAW;gCACH,WAAW;;;;;;;;;wBASnB,WAAW;;;CAI/B,MAAMC,QAAgB,YAClB,iBAAG;YACC,UAAU;;;qCAGe,aAAa;mCACf,aAAa;;YAGxC,iBAAG;YACC,UAAU;2BACK,aAAa;;CAGpC,MAAMC,aAAqB,iBAAG;;;6BAGL,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mCACH,aAAa;iCACf,aAAa;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;eAChD,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;CAIlD,MAAMC,aAAqB,iBAAG;QAC1B,WAAW;;eAEJ,MAAM,KAAK,OAAO,KAAK,UAAU;;AAuC5C,QAAO;EACL;EACA;EACA,cAvC2B,iBAAG;QAC5B,WAAW;;;iCAGc,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;wBASjC,WAAW;gCACH,WAAW;;;;EA0BrC;EACA,gBAjB6B,iBAAG;;;;;;;;;;;EAkBjC;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAU,CAAC;AAEzD,kCAAe"}
+{"version":3,"file":"AffixedField.styles.cjs","names":["borderColor: string","focusColor: string","borderRadius: string","inputContainer: string","inputBase: string","input: string","prefixBase: string","prefixSpan: string"],"sources":["../../../../../src/components/primitives/AffixedField/AffixedField.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\n/**\n * Creates styles for the AffixedField component. The container is a horizontal flex\n * row with a prefix element (span or select) joined to a shared-border input.\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasPrefix: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const borderColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.border;\n    const focusColor: string = hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main;\n    const borderRadius: string = theme.vars.components?.Field?.root?.borderRadius ?? theme.vars.borderRadius.medium;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: stretch;\n      width: 100%;\n    `;\n\n    const inputBase: string = css`\n      flex: 1;\n      min-width: 0;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n      outline: none;\n      transition:\n        border-color 0.2s ease,\n        box-shadow 0.2s ease;\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n\n      &:focus {\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${focusColor};\n      }\n    `;\n\n    const input: string = hasPrefix\n      ? css`\n          ${inputBase};\n          border-start-start-radius: 0;\n          border-end-start-radius: 0;\n          border-start-end-radius: ${borderRadius};\n          border-end-end-radius: ${borderRadius};\n          border-inline-start: none;\n        `\n      : css`\n          ${inputBase};\n          border-radius: ${borderRadius};\n        `;\n\n    const prefixBase: string = css`\n      display: flex;\n      align-items: center;\n      padding-inline: calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${borderColor};\n      border-start-start-radius: ${borderRadius};\n      border-end-start-radius: ${borderRadius};\n      background-color: ${theme.vars.colors.background.surface};\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      font-family: ${theme.vars.typography.fontFamily};\n      white-space: nowrap;\n    `;\n\n    const prefixSpan: string = css`\n      ${prefixBase};\n      user-select: none;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    const prefixSelect: string = css`\n      ${prefixBase};\n      cursor: pointer;\n      appearance: auto;\n      padding-inline-end: calc(${theme.vars.spacing.unit} * 1.5);\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:focus {\n        outline: none;\n        border-color: ${focusColor};\n        box-shadow: 0 0 0 2px ${focusColor}20;\n        z-index: 1;\n      }\n    `;\n\n    /**\n     * Visually hides content while keeping it discoverable by assistive tech. Used\n     * to expose the fixed prefix value to screen readers via `aria-describedby` while\n     * the sighted-user span stays `aria-hidden` (decorative).\n     */\n    const visuallyHidden: string = css`\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      prefixSelect,\n      prefixSpan,\n      visuallyHidden,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasPrefix]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,aACJ,OACA,aACA,UACA,UACA,uCAEc;CACZ,MAAMA,cAAsB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO;CACxF,MAAMC,aAAqB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ;CAC/F,MAAMC,eAAuB,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa;CAEzG,MAAMC,iBAAyB,mBAAG;;;;;;CAOlC,MAAMC,YAAoB,mBAAG;;;uBAGV,MAAM,KAAK,QAAQ,KAAK;6BAClB,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mBACnB,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;iBAOjG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;wBAK1B,WAAW;gCACH,WAAW;;;;;;;;;wBASnB,WAAW;;;CAI/B,MAAMC,QAAgB,YAClB,mBAAG;YACC,UAAU;;;qCAGe,aAAa;mCACf,aAAa;;YAGxC,mBAAG;YACC,UAAU;2BACK,aAAa;;CAGpC,MAAMC,aAAqB,mBAAG;;;6BAGL,MAAM,KAAK,QAAQ,KAAK;0BAC3B,YAAY;mCACH,aAAa;iCACf,aAAa;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;eAChD,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;CAIlD,MAAMC,aAAqB,mBAAG;QAC1B,WAAW;;eAEJ,MAAM,KAAK,OAAO,KAAK,UAAU;;AAuC5C,QAAO;EACL;EACA;EACA,cAvC2B,mBAAG;QAC5B,WAAW;;;iCAGc,MAAM,KAAK,QAAQ,KAAK;;;;;;;;;wBASjC,WAAW;gCACH,WAAW;;;;EA0BrC;EACA,gBAjB6B,mBAAG;;;;;;;;;;;EAkBjC;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAU,CAAC;AAEzD,kCAAe"}

package/dist/cjs/components/primitives/Alert/Alert.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_Alert_styles = require('./Alert.styles.cjs');
 const require_CircleAlert = require('../Icons/CircleAlert.cjs');
@@ -12,8 +13,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/Alert/Alert.tsx
 const getDefaultIcon = (variant) => {
@@ -50,13 +49,13 @@ const Alert = (0, react.forwardRef)(({ variant = "info", showIcon = true, childr
 			ref,
 			role: "alert",
 			style,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert")), styles["alert"], styles["variant"], (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", null, variant)), className),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert")), styles["alert"], styles["variant"], (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", null, variant)), className),
 			...rest,
 			children: [showIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "icon")), styles["icon"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "icon")), styles["icon"]),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {})
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "content")), styles["content"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "content")), styles["content"]),
 				children
 			})]
 		})
@@ -74,7 +73,7 @@ const AlertTitle = ({ children, className, style,...rest }) => {
 		variant: "h6",
 		fontWeight: 600,
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "title")), styles["title"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "title")), styles["title"], className),
 		...filteredRest,
 		children
 	});
@@ -90,7 +89,7 @@ const AlertDescription = ({ children, className, style,...rest }) => {
 		component: "p",
 		variant: "body2",
 		style,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "description")), styles["description"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("alert", "description")), styles["description"], className),
 		...filteredRest,
 		children
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.cjs","names":["CircleCheck","CircleAlert","TriangleAlert","Info","AlertVariantContext: Context<AlertVariant>","Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","AlertTitle: FC<AlertTitleProps>","Typography","AlertDescription: FC<AlertDescriptionProps>"],"sources":["../../../../../src/components/primitives/Alert/Alert.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  Context,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  ForwardRefExoticComponent,\n  createContext,\n  useContext,\n  FC,\n  SVGProps,\n} from 'react';\nimport useStyles from './Alert.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport CircleAlert from '../Icons/CircleAlert';\nimport CircleCheck from '../Icons/CircleCheck';\nimport Info from '../Icons/Info';\nimport TriangleAlert from '../Icons/TriangleAlert';\nimport Typography from '../Typography/Typography';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Alert content\n   */\n  children?: ReactNode;\n  /**\n   * Whether to show the default icon for the variant\n   */\n  showIcon?: boolean;\n  /**\n   * The visual variant of the alert that determines color scheme and icon\n   */\n  variant?: AlertVariant;\n}\n\nexport interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n}\n\nexport interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nconst getDefaultIcon = (variant: AlertVariant): FC<SVGProps<SVGSVGElement>> => {\n  switch (variant) {\n    case 'success':\n      return CircleCheck;\n    case 'error':\n      return CircleAlert;\n    case 'warning':\n      return TriangleAlert;\n    case 'info':\n      return Info;\n    default:\n      return Info;\n  }\n};\n\nconst AlertVariantContext: Context<AlertVariant> = createContext<AlertVariant>('info');\n\nexport const useAlertVariant = (): AlertVariant => useContext(AlertVariantContext);\n\n/**\n * Alert component that displays important information with different severity levels.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" showIcon>\n *   <Alert.Title>Success! Your changes have been saved</Alert.Title>\n *   <Alert.Description>\n *     This is an alert with icon, title and description.\n *   </Alert.Description>\n * </Alert>\n * ```\n */\nconst Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  AlertProps\n>(({variant = 'info', showIcon = true, children, className, style, ...rest}: AlertProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = getDefaultIcon(variant);\n\n  return (\n    <AlertVariantContext.Provider value={variant}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('alert')),\n          styles['alert'],\n          styles['variant'],\n          withVendorCSSClassPrefix(bem('alert', null, variant)),\n          className,\n        )}\n        {...rest}\n      >\n        {showIcon && (\n          <div className={cx(withVendorCSSClassPrefix(bem('alert', 'icon')), styles['icon'])}>\n            <IconComponent />\n          </div>\n        )}\n        <div className={cx(withVendorCSSClassPrefix(bem('alert', 'content')), styles['content'])}>{children}</div>\n      </div>\n    </AlertVariantContext.Provider>\n  );\n});\n\n/**\n * Alert title component.\n */\nconst AlertTitle: FC<AlertTitleProps> = ({children, className, style, ...rest}: AlertTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"h3\"\n      variant=\"h6\"\n      fontWeight={600}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'title')), styles['title'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Alert description component.\n */\nconst AlertDescription: FC<AlertDescriptionProps> = ({children, className, style, ...rest}: AlertDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nAlert.displayName = 'Alert';\nAlertTitle.displayName = 'Alert.Title';\nAlertDescription.displayName = 'Alert.Description';\n\n(Alert as any).Title = AlertTitle;\n(Alert as any).Description = AlertDescription;\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Description: typeof AlertDescription;\n  Title: typeof AlertTitle;\n}\n\nexport default Alert as AlertComponent;\nexport {Alert, AlertTitle, AlertDescription};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyDA,MAAM,kBAAkB,YAAuD;AAC7E,SAAQ,SAAR;EACE,KAAK,UACH,QAAOA;EACT,KAAK,QACH,QAAOC;EACT,KAAK,UACH,QAAOC;EACT,KAAK,OACH,QAAOC;EACT,QACE,QAAOA;;;AAIb,MAAMC,+CAAyE,OAAO;AAEtF,MAAa,8CAAiD,oBAAoB;;;;;;;;;;;;;;AAelF,MAAMC,+BAGH,EAAC,UAAU,QAAQ,WAAW,MAAM,UAAU,WAAW,MAAO,GAAG,QAAmB,QAA6B;CACpH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAuCC,6BAAU,OAAO,aAAa,QAAQ;CACnF,MAAMC,gBAA6C,eAAe,QAAQ;AAE1E,QACE,2CAAC,oBAAoB;EAAS,OAAO;YACnC,4CAAC;GACM;GACL,MAAK;GACE;GACP,gHAC+B,QAAQ,CAAC,EACtC,OAAO,UACP,OAAO,2FACsB,SAAS,MAAM,QAAQ,CAAC,EACrD,UACD;GACD,GAAI;cAEH,YACC,2CAAC;IAAI,gHAA2C,SAAS,OAAO,CAAC,EAAE,OAAO,QAAQ;cAChF,2CAAC,kBAAgB;KACb,EAER,2CAAC;IAAI,gHAA2C,SAAS,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAe;IACtG;GACuB;EAEjC;;;;AAKF,MAAMC,cAAmC,EAAC,UAAU,WAAW,MAAO,GAAG,WAA2B;CAClG,MAAM,EAAC,OAAO,gBAA4CJ,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACG;EACC,WAAU;EACV,SAAQ;EACR,YAAY;EACL;EACP,gHAA2C,SAAS,QAAQ,CAAC,EAAE,OAAO,UAAU,UAAU;EAC1F,GAAI;EAEH;GACU;;;;;AAOjB,MAAMC,oBAA+C,EAAC,UAAU,WAAW,MAAO,GAAG,WAAiC;CACpH,MAAM,EAAC,OAAO,gBAA4CN,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACG;EACC,WAAU;EACV,SAAQ;EACD;EACP,gHAA2C,SAAS,cAAc,CAAC,EAAE,OAAO,gBAAgB,UAAU;EACtG,GAAI;EAEH;GACU;;AAIjB,MAAM,cAAc;AACpB,WAAW,cAAc;AACzB,iBAAiB,cAAc;AAE/B,AAAC,MAAc,QAAQ;AACvB,AAAC,MAAc,cAAc;AAO7B,oBAAe"}
+{"version":3,"file":"Alert.cjs","names":["CircleCheck","CircleAlert","TriangleAlert","Info","AlertVariantContext: Context<AlertVariant>","Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","cx","AlertTitle: FC<AlertTitleProps>","Typography","AlertDescription: FC<AlertDescriptionProps>"],"sources":["../../../../../src/components/primitives/Alert/Alert.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  Context,\n  forwardRef,\n  HTMLAttributes,\n  ReactNode,\n  Ref,\n  RefAttributes,\n  ForwardRefExoticComponent,\n  createContext,\n  useContext,\n  FC,\n  SVGProps,\n} from 'react';\nimport useStyles from './Alert.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport CircleAlert from '../Icons/CircleAlert';\nimport CircleCheck from '../Icons/CircleCheck';\nimport Info from '../Icons/Info';\nimport TriangleAlert from '../Icons/TriangleAlert';\nimport Typography from '../Typography/Typography';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\nexport interface AlertProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Alert content\n   */\n  children?: ReactNode;\n  /**\n   * Whether to show the default icon for the variant\n   */\n  showIcon?: boolean;\n  /**\n   * The visual variant of the alert that determines color scheme and icon\n   */\n  variant?: AlertVariant;\n}\n\nexport interface AlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Title content\n   */\n  children?: ReactNode;\n}\n\nexport interface AlertDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Description content\n   */\n  children?: ReactNode;\n}\n\nconst getDefaultIcon = (variant: AlertVariant): FC<SVGProps<SVGSVGElement>> => {\n  switch (variant) {\n    case 'success':\n      return CircleCheck;\n    case 'error':\n      return CircleAlert;\n    case 'warning':\n      return TriangleAlert;\n    case 'info':\n      return Info;\n    default:\n      return Info;\n  }\n};\n\nconst AlertVariantContext: Context<AlertVariant> = createContext<AlertVariant>('info');\n\nexport const useAlertVariant = (): AlertVariant => useContext(AlertVariantContext);\n\n/**\n * Alert component that displays important information with different severity levels.\n *\n * @example\n * ```tsx\n * <Alert variant=\"success\" showIcon>\n *   <Alert.Title>Success! Your changes have been saved</Alert.Title>\n *   <Alert.Description>\n *     This is an alert with icon, title and description.\n *   </Alert.Description>\n * </Alert>\n * ```\n */\nconst Alert: ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> = forwardRef<\n  HTMLDivElement,\n  AlertProps\n>(({variant = 'info', showIcon = true, children, className, style, ...rest}: AlertProps, ref: Ref<HTMLDivElement>) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n  const IconComponent: FC<SVGProps<SVGSVGElement>> = getDefaultIcon(variant);\n\n  return (\n    <AlertVariantContext.Provider value={variant}>\n      <div\n        ref={ref}\n        role=\"alert\"\n        style={style}\n        className={cx(\n          withVendorCSSClassPrefix(bem('alert')),\n          styles['alert'],\n          styles['variant'],\n          withVendorCSSClassPrefix(bem('alert', null, variant)),\n          className,\n        )}\n        {...rest}\n      >\n        {showIcon && (\n          <div className={cx(withVendorCSSClassPrefix(bem('alert', 'icon')), styles['icon'])}>\n            <IconComponent />\n          </div>\n        )}\n        <div className={cx(withVendorCSSClassPrefix(bem('alert', 'content')), styles['content'])}>{children}</div>\n      </div>\n    </AlertVariantContext.Provider>\n  );\n});\n\n/**\n * Alert title component.\n */\nconst AlertTitle: FC<AlertTitleProps> = ({children, className, style, ...rest}: AlertTitleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"h3\"\n      variant=\"h6\"\n      fontWeight={600}\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'title')), styles['title'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\n/**\n * Alert description component.\n */\nconst AlertDescription: FC<AlertDescriptionProps> = ({children, className, style, ...rest}: AlertDescriptionProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const variant: AlertVariant = useAlertVariant();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme, variant);\n\n  const {color, ...filteredRest} = rest;\n\n  return (\n    <Typography\n      component=\"p\"\n      variant=\"body2\"\n      style={style}\n      className={cx(withVendorCSSClassPrefix(bem('alert', 'description')), styles['description'], className)}\n      {...filteredRest}\n    >\n      {children}\n    </Typography>\n  );\n};\n\nAlert.displayName = 'Alert';\nAlertTitle.displayName = 'Alert.Title';\nAlertDescription.displayName = 'Alert.Description';\n\n(Alert as any).Title = AlertTitle;\n(Alert as any).Description = AlertDescription;\n\nexport interface AlertComponent extends ForwardRefExoticComponent<AlertProps & RefAttributes<HTMLDivElement>> {\n  Description: typeof AlertDescription;\n  Title: typeof AlertTitle;\n}\n\nexport default Alert as AlertComponent;\nexport {Alert, AlertTitle, AlertDescription};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyDA,MAAM,kBAAkB,YAAuD;AAC7E,SAAQ,SAAR;EACE,KAAK,UACH,QAAOA;EACT,KAAK,QACH,QAAOC;EACT,KAAK,UACH,QAAOC;EACT,KAAK,OACH,QAAOC;EACT,QACE,QAAOA;;;AAIb,MAAMC,+CAAyE,OAAO;AAEtF,MAAa,8CAAiD,oBAAoB;;;;;;;;;;;;;;AAelF,MAAMC,+BAGH,EAAC,UAAU,QAAQ,WAAW,MAAM,UAAU,WAAW,MAAO,GAAG,QAAmB,QAA6B;CACpH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAuCC,6BAAU,OAAO,aAAa,QAAQ;CACnF,MAAMC,gBAA6C,eAAe,QAAQ;AAE1E,QACE,2CAAC,oBAAoB;EAAS,OAAO;YACnC,4CAAC;GACM;GACL,MAAK;GACE;GACP,WAAWC,kGACoB,QAAQ,CAAC,EACtC,OAAO,UACP,OAAO,2FACsB,SAAS,MAAM,QAAQ,CAAC,EACrD,UACD;GACD,GAAI;cAEH,YACC,2CAAC;IAAI,WAAWA,kGAAgC,SAAS,OAAO,CAAC,EAAE,OAAO,QAAQ;cAChF,2CAAC,kBAAgB;KACb,EAER,2CAAC;IAAI,WAAWA,kGAAgC,SAAS,UAAU,CAAC,EAAE,OAAO,WAAW;IAAG;KAAe;IACtG;GACuB;EAEjC;;;;AAKF,MAAMC,cAAmC,EAAC,UAAU,WAAW,MAAO,GAAG,WAA2B;CAClG,MAAM,EAAC,OAAO,gBAA4CL,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACI;EACC,WAAU;EACV,SAAQ;EACR,YAAY;EACL;EACP,WAAWF,kGAAgC,SAAS,QAAQ,CAAC,EAAE,OAAO,UAAU,UAAU;EAC1F,GAAI;EAEH;GACU;;;;;AAOjB,MAAMG,oBAA+C,EAAC,UAAU,WAAW,MAAO,GAAG,WAAiC;CACpH,MAAM,EAAC,OAAO,gBAA4CP,0BAAU;CAEpE,MAAMC,SAAuCC,6BAAU,OAAO,aADhC,iBAAiB,CACoC;CAEnF,MAAM,EAAC,MAAO,GAAG,iBAAgB;AAEjC,QACE,2CAACI;EACC,WAAU;EACV,SAAQ;EACD;EACP,WAAWF,kGAAgC,SAAS,cAAc,CAAC,EAAE,OAAO,gBAAgB,UAAU;EACtG,GAAI;EAEH;GACU;;AAIjB,MAAM,cAAc;AACpB,WAAW,cAAc;AACzB,iBAAiB,cAAc;AAE/B,AAAC,MAAc,QAAQ;AACvB,AAAC,MAAc,cAAc;AAO7B,oBAAe"}

package/dist/cjs/components/primitives/Alert/Alert.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/Alert/Alert.styles.ts
 /**
@@ -13,7 +12,7 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, variant) => (0, react.useMemo)(() => {
-	const baseAlert = __emotion_css.css`
+	const baseAlert = require_emotion.css`
       padding: calc(${theme.vars.spacing.unit} * 2);
       border-radius: ${theme.vars.borderRadius.medium};
       border: 1px solid;
@@ -23,41 +22,41 @@ const useStyles = (theme, colorScheme, variant) => (0, react.useMemo)(() => {
       align-items: flex-start;
     `;
 	const variantStyles = {
-		error: __emotion_css.css`
+		error: require_emotion.css`
         background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, white);
         border-color: ${theme.vars.colors.error.main};
         color: ${theme.vars.colors.error.main};
       `,
-		info: __emotion_css.css`
+		info: require_emotion.css`
         background-color: color-mix(in srgb, ${theme.vars.colors.info.main} 20%, white);
         border-color: ${theme.vars.colors.info.main};
         color: ${theme.vars.colors.info.main};
       `,
-		success: __emotion_css.css`
+		success: require_emotion.css`
         background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, white);
         border-color: ${theme.vars.colors.success.main};
         color: ${theme.vars.colors.success.main};
       `,
-		warning: __emotion_css.css`
+		warning: require_emotion.css`
         background-color: color-mix(in srgb, ${theme.vars.colors.warning.main} 20%, white);
         border-color: ${theme.vars.colors.warning.main};
         color: ${theme.vars.colors.warning.main};
       `
 	};
-	const iconStyles = __emotion_css.css`
+	const iconStyles = require_emotion.css`
       flex-shrink: 0;
       margin-top: calc(${theme.vars.spacing.unit} * 0.25);
       width: calc(${theme.vars.spacing.unit} * 2.5);
       height: calc(${theme.vars.spacing.unit} * 2.5);
       color: ${theme.vars.colors[variant]?.contrastText};
     `;
-	const contentStyles = __emotion_css.css`
+	const contentStyles = require_emotion.css`
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-	const titleStyles = __emotion_css.css`
+	const titleStyles = require_emotion.css`
       margin: 0;
       font-size: ${theme.vars.typography.fontSizes.sm};
       font-weight: 600;
@@ -67,7 +66,7 @@ const useStyles = (theme, colorScheme, variant) => (0, react.useMemo)(() => {
 	return {
 		alert: baseAlert,
 		content: contentStyles,
-		description: __emotion_css.css`
+		description: require_emotion.css`
       margin: 0;
       font-size: ${theme.vars.typography.fontSizes.sm};
       line-height: 1.4;

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.styles.cjs","names":["baseAlert: string","variantStyles: Record<string, string>","iconStyles: string","contentStyles: string","titleStyles: string"],"sources":["../../../../../src/components/primitives/Alert/Alert.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 AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Creates styles for the Alert 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 alert variant\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, variant: AlertVariant): Record<string, string> =>\n  useMemo(() => {\n    const baseAlert: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n      border-radius: ${theme.vars.borderRadius.medium};\n      border: 1px solid;\n      font-family: ${theme.vars.typography.fontFamily};\n      display: flex;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      align-items: flex-start;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      error: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, white);\n        border-color: ${theme.vars.colors.error.main};\n        color: ${theme.vars.colors.error.main};\n      `,\n      info: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.info.main} 20%, white);\n        border-color: ${theme.vars.colors.info.main};\n        color: ${theme.vars.colors.info.main};\n      `,\n      success: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, white);\n        border-color: ${theme.vars.colors.success.main};\n        color: ${theme.vars.colors.success.main};\n      `,\n      warning: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.warning.main} 20%, white);\n        border-color: ${theme.vars.colors.warning.main};\n        color: ${theme.vars.colors.warning.main};\n      `,\n    };\n\n    const iconStyles: string = css`\n      flex-shrink: 0;\n      margin-top: calc(${theme.vars.spacing.unit} * 0.25);\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const contentStyles: string = css`\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 600;\n      line-height: 1.4;\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.4;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    return {\n      alert: baseAlert,\n      content: contentStyles,\n      description: descriptionStyles,\n      icon: iconStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,aAAa,OAAc,aAAqB,qCACtC;CACZ,MAAMA,YAAoB,iBAAG;sBACX,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;;kBAEpC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwC;EAC5C,OAAO,iBAAG;+CAC+B,MAAM,KAAK,OAAO,MAAM,KAAK;wBACpD,MAAM,KAAK,OAAO,MAAM,KAAK;iBACpC,MAAM,KAAK,OAAO,MAAM,KAAK;;EAExC,MAAM,iBAAG;+CACgC,MAAM,KAAK,OAAO,KAAK,KAAK;wBACnD,MAAM,KAAK,OAAO,KAAK,KAAK;iBACnC,MAAM,KAAK,OAAO,KAAK,KAAK;;EAEvC,SAAS,iBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE1C,SAAS,iBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE3C;CAED,MAAMC,aAAqB,iBAAG;;yBAET,MAAM,KAAK,QAAQ,KAAK;oBAC7B,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;eAC9B,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,iBAAG;;;;aAIxB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,iBAAG;;mBAEhB,MAAM,KAAK,WAAW,UAAU,GAAG;;;eAGvC,MAAM,KAAK,OAAO,UAAU,aAAa;;AAUpD,QAAO;EACL,OAAO;EACP,SAAS;EACT,aAVgC,iBAAG;;mBAEtB,MAAM,KAAK,WAAW,UAAU,GAAG;;eAEvC,MAAM,KAAK,OAAO,KAAK,UAAU;;EAO1C,MAAM;EACN,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAQ,CAAC;AAEnC,2BAAe"}
+{"version":3,"file":"Alert.styles.cjs","names":["baseAlert: string","variantStyles: Record<string, string>","iconStyles: string","contentStyles: string","titleStyles: string"],"sources":["../../../../../src/components/primitives/Alert/Alert.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 AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Creates styles for the Alert 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 alert variant\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, variant: AlertVariant): Record<string, string> =>\n  useMemo(() => {\n    const baseAlert: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n      border-radius: ${theme.vars.borderRadius.medium};\n      border: 1px solid;\n      font-family: ${theme.vars.typography.fontFamily};\n      display: flex;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      align-items: flex-start;\n    `;\n\n    const variantStyles: Record<string, string> = {\n      error: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, white);\n        border-color: ${theme.vars.colors.error.main};\n        color: ${theme.vars.colors.error.main};\n      `,\n      info: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.info.main} 20%, white);\n        border-color: ${theme.vars.colors.info.main};\n        color: ${theme.vars.colors.info.main};\n      `,\n      success: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, white);\n        border-color: ${theme.vars.colors.success.main};\n        color: ${theme.vars.colors.success.main};\n      `,\n      warning: css`\n        background-color: color-mix(in srgb, ${theme.vars.colors.warning.main} 20%, white);\n        border-color: ${theme.vars.colors.warning.main};\n        color: ${theme.vars.colors.warning.main};\n      `,\n    };\n\n    const iconStyles: string = css`\n      flex-shrink: 0;\n      margin-top: calc(${theme.vars.spacing.unit} * 0.25);\n      width: calc(${theme.vars.spacing.unit} * 2.5);\n      height: calc(${theme.vars.spacing.unit} * 2.5);\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const contentStyles: string = css`\n      flex: 1;\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const titleStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-weight: 600;\n      line-height: 1.4;\n      color: ${theme.vars.colors[variant]?.contrastText};\n    `;\n\n    const descriptionStyles: string = css`\n      margin: 0;\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      line-height: 1.4;\n      color: ${theme.vars.colors.text.secondary};\n    `;\n\n    return {\n      alert: baseAlert,\n      content: contentStyles,\n      description: descriptionStyles,\n      icon: iconStyles,\n      title: titleStyles,\n      variant: variantStyles[variant],\n    };\n  }, [theme, colorScheme, variant]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,aAAa,OAAc,aAAqB,qCACtC;CACZ,MAAMA,YAAoB,mBAAG;sBACX,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;;kBAEpC,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,gBAAwC;EAC5C,OAAO,mBAAG;+CAC+B,MAAM,KAAK,OAAO,MAAM,KAAK;wBACpD,MAAM,KAAK,OAAO,MAAM,KAAK;iBACpC,MAAM,KAAK,OAAO,MAAM,KAAK;;EAExC,MAAM,mBAAG;+CACgC,MAAM,KAAK,OAAO,KAAK,KAAK;wBACnD,MAAM,KAAK,OAAO,KAAK,KAAK;iBACnC,MAAM,KAAK,OAAO,KAAK,KAAK;;EAEvC,SAAS,mBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE1C,SAAS,mBAAG;+CAC6B,MAAM,KAAK,OAAO,QAAQ,KAAK;wBACtD,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE3C;CAED,MAAMC,aAAqB,mBAAG;;yBAET,MAAM,KAAK,QAAQ,KAAK;oBAC7B,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;eAC9B,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,mBAAG;;;;aAIxB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,cAAsB,mBAAG;;mBAEhB,MAAM,KAAK,WAAW,UAAU,GAAG;;;eAGvC,MAAM,KAAK,OAAO,UAAU,aAAa;;AAUpD,QAAO;EACL,OAAO;EACP,SAAS;EACT,aAVgC,mBAAG;;mBAEtB,MAAM,KAAK,WAAW,UAAU,GAAG;;eAEvC,MAAM,KAAK,OAAO,KAAK,UAAU;;EAO1C,MAAM;EACN,OAAO;EACP,SAAS,cAAc;EACxB;GACA;CAAC;CAAO;CAAa;CAAQ,CAAC;AAEnC,2BAAe"}

package/dist/cjs/components/primitives/Avatar/Avatar.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_Avatar_styles = require('./Avatar.styles.cjs');
 let __thunderid_browser = require("@thunderid/browser");
@@ -7,8 +8,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/Avatar/Avatar.tsx
 const Avatar = ({ alt = "User avatar", background = "random", className = "", imageUrl, name, size = 64, variant = "circular", isLoading = false }) => {
@@ -54,19 +53,19 @@ const Avatar = ({ alt = "User avatar", background = "random", className = "", im
 		if (hasImage) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 			src: resolvedIcon?.imgSrc,
 			alt,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "image")), styles["image"])
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "image")), styles["image"])
 		});
 		if (name) return getInitials(name);
-		if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "skeleton")), styles["skeleton"]) });
+		if (isLoading) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "skeleton")), styles["skeleton"]) });
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 			xmlns: "http://www.w3.org/2000/svg",
 			viewBox: "0 0 640 640",
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "icon")), styles["icon"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "icon")), styles["icon"]),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M240 192C240 147.8 275.8 112 320 112C364.2 112 400 147.8 400 192C400 236.2 364.2 272 320 272C275.8 272 240 236.2 240 192zM448 192C448 121.3 390.7 64 320 64C249.3 64 192 121.3 192 192C192 262.7 249.3 320 320 320C390.7 320 448 262.7 448 192zM144 544C144 473.3 201.3 416 272 416L368 416C438.7 416 496 473.3 496 544L496 552C496 565.3 506.7 576 520 576C533.3 576 544 565.3 544 552L544 544C544 446.8 465.2 368 368 368L272 368C174.8 368 96 446.8 96 544L96 552C96 565.3 106.7 576 120 576C133.3 576 144 565.3 144 552L144 544z" })
 		});
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar")), styles["avatar"], styles["variant"], (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", null, variant)), isDefaultState && (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "default")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar")), styles["avatar"], styles["variant"], (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", null, variant)), isDefaultState && (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("avatar", "default")), className),
 		children: renderContent()
 	});
 };