@thunderid/react 0.12.0 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.cjs","names":["Spinner: FC<SpinnerProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.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 {FC, CSSProperties} from 'react';\nimport useStyles from './Spinner.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\nexport interface SpinnerProps {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom color for the spinner\n   */\n  color?: string;\n  /**\n   * Size of the spinner\n   */\n  size?: SpinnerSize;\n  /**\n   * Custom styles\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Spinner component for loading states\n *\n * @example\n * ```tsx\n * // Basic spinner\n * <Spinner />\n *\n * // Large spinner with custom color\n * <Spinner size=\"large\" color=\"#3b82f6\" />\n *\n * // Small spinner\n * <Spinner size=\"small\" />\n * ```\n */\nconst Spinner: FC<SpinnerProps> = ({size = 'medium', color, className, style}: SpinnerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size, color);\n\n  const spinnerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('spinner')),\n    styles['spinner'],\n    size === 'small' && styles['spinnerSmall'],\n    size === 'medium' && styles['spinnerMedium'],\n    size === 'large' && styles['spinnerLarge'],\n    className,\n  );\n\n  return <span className={spinnerClassName} style={style} role=\"status\" aria-label=\"Loading\" />;\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,WAA6B,EAAC,OAAO,UAAU,OAAO,WAAW,YAAyB;CAC9F,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,+BAAU,OAAO,aAAa,MAAM,MAAM;AAWjF,QAAO,2CAAC;EAAK,gHARkB,UAAU,CAAC,EACxC,OAAO,YACP,SAAS,WAAW,OAAO,iBAC3B,SAAS,YAAY,OAAO,kBAC5B,SAAS,WAAW,OAAO,iBAC3B,UACD;EAEgD;EAAO,MAAK;EAAS,cAAW;GAAY;;AAG/F,sBAAe"}
+{"version":3,"file":"Spinner.cjs","names":["Spinner: FC<SpinnerProps>","useTheme","styles: Record<string, string>","useStyles","cx"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Spinner.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\nexport interface SpinnerProps {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Custom color for the spinner\n   */\n  color?: string;\n  /**\n   * Size of the spinner\n   */\n  size?: SpinnerSize;\n  /**\n   * Optional explicit width/height (CSS length, e.g. `'24px'` or `'calc(...)'`) that overrides\n   * the `size`-based default dimensions. Generates its own Emotion class internally rather than\n   * accepting an inline `style` object, so it participates in the shared CSP nonce automatically.\n   */\n  widthOverride?: string;\n}\n\n/**\n * Spinner component for loading states\n *\n * @example\n * ```tsx\n * // Basic spinner\n * <Spinner />\n *\n * // Large spinner with custom color\n * <Spinner size=\"large\" color=\"#3b82f6\" />\n *\n * // Small spinner\n * <Spinner size=\"small\" />\n * ```\n */\nconst Spinner: FC<SpinnerProps> = ({size = 'medium', color, className, widthOverride = undefined}: SpinnerProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size, color, widthOverride);\n\n  const spinnerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('spinner')),\n    styles['spinner'],\n    size === 'small' && styles['spinnerSmall'],\n    size === 'medium' && styles['spinnerMedium'],\n    size === 'large' && styles['spinnerLarge'],\n    widthOverride && styles['spinnerCustomSize'],\n    className,\n  );\n\n  return <span className={spinnerClassName} role=\"status\" aria-label=\"Loading\" />;\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAMA,WAA6B,EAAC,OAAO,UAAU,OAAO,WAAW,gBAAgB,aAA6B;CAClH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,+BAAU,OAAO,aAAa,MAAM,OAAO,cAAc;AAYhG,QAAO,2CAAC;EAAK,WAVoBC,kGACF,UAAU,CAAC,EACxC,OAAO,YACP,SAAS,WAAW,OAAO,iBAC3B,SAAS,YAAY,OAAO,kBAC5B,SAAS,WAAW,OAAO,iBAC3B,iBAAiB,OAAO,sBACxB,UACD;EAEyC,MAAK;EAAS,cAAW;GAAY;;AAGjF,sBAAe"}

package/dist/cjs/components/primitives/Spinner/Spinner.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/Spinner/Spinner.styles.ts
 /**
@@ -11,9 +10,12 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @param colorScheme - The current color scheme (used for memoization)
 * @param size - The size of the spinner
 * @param color - The color of the spinner
+* @param customSize - Optional explicit width/height (CSS length) that overrides the size-based
+* default, e.g. when a parent component (like `Button`) needs the spinner to track a
+* theme-derived dimension instead of one of the fixed `size` presets.
 * @returns Object containing CSS class names for component styling
 */
-const useStyles = (theme, colorScheme, size, color) => (0, react.useMemo)(() => {
+const useStyles = (theme, colorScheme, size, color, customSize) => (0, react.useMemo)(() => {
 	const spinnerColor = color || theme.vars.colors.primary.main;
 	const spinnerSizes = {
 		large: "32px",
@@ -21,13 +23,13 @@ const useStyles = (theme, colorScheme, size, color) => (0, react.useMemo)(() =>
 		small: "16px"
 	};
 	const spinnerSize = spinnerSizes[size];
-	const spinner = __emotion_css.css`
+	const spinner = require_emotion.css`
       width: ${spinnerSize};
       height: ${spinnerSize};
       border: 2px solid transparent;
       border-top: 2px solid ${spinnerColor};
       border-radius: 50%;
-      animation: ${__emotion_css.keyframes`
+      animation: ${require_emotion.keyframes`
       0% {
         transform: rotate(0deg);
       }
@@ -37,20 +39,25 @@ const useStyles = (theme, colorScheme, size, color) => (0, react.useMemo)(() =>
     `} 1s linear infinite;
       display: inline-block;
     `;
-	const spinnerSmall = __emotion_css.css`
+	const spinnerSmall = require_emotion.css`
       width: ${spinnerSizes["small"]};
       height: ${spinnerSizes["small"]};
     `;
-	const spinnerMedium = __emotion_css.css`
+	const spinnerMedium = require_emotion.css`
       width: ${spinnerSizes["medium"]};
       height: ${spinnerSizes["medium"]};
     `;
-	return {
-		spinner,
-		spinnerLarge: __emotion_css.css`
+	const spinnerLarge = require_emotion.css`
       width: ${spinnerSizes["large"]};
       height: ${spinnerSizes["large"]};
-    `,
+    `;
+	return {
+		spinner,
+		spinnerCustomSize: customSize ? require_emotion.css`
+          width: ${customSize};
+          height: ${customSize};
+        ` : "",
+		spinnerLarge,
 		spinnerMedium,
 		spinnerSmall
 	};
@@ -58,7 +65,8 @@ const useStyles = (theme, colorScheme, size, color) => (0, react.useMemo)(() =>
 	theme,
 	colorScheme,
 	size,
-	color
+	color,
+	customSize
 ]);
 var Spinner_styles_default = useStyles;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.styles.cjs","names":["spinnerColor: string","spinnerSizes: Record<string, string>","spinnerSize: string","spinner: string","spinnerSmall: string","spinnerMedium: string"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css, keyframes} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Spinner component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the spinner\n * @param color - The color of the spinner\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string): Record<string, string> =>\n  useMemo(() => {\n    const spinnerColor: string = color || theme.vars.colors.primary.main;\n\n    const spinnerSizes: Record<string, string> = {\n      large: '32px',\n      medium: '20px',\n      small: '16px',\n    };\n\n    const spinnerSize: string = spinnerSizes[size];\n\n    const spinAnimation: string = keyframes`\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    `;\n\n    const spinner: string = css`\n      width: ${spinnerSize};\n      height: ${spinnerSize};\n      border: 2px solid transparent;\n      border-top: 2px solid ${spinnerColor};\n      border-radius: 50%;\n      animation: ${spinAnimation} 1s linear infinite;\n      display: inline-block;\n    `;\n\n    const spinnerSmall: string = css`\n      width: ${spinnerSizes['small']};\n      height: ${spinnerSizes['small']};\n    `;\n\n    const spinnerMedium: string = css`\n      width: ${spinnerSizes['medium']};\n      height: ${spinnerSizes['medium']};\n    `;\n\n    const spinnerLarge: string = css`\n      width: ${spinnerSizes['large']};\n      height: ${spinnerSizes['large']};\n    `;\n\n    return {\n      spinner,\n      spinnerLarge,\n      spinnerMedium,\n      spinnerSmall,\n    };\n  }, [theme, colorScheme, size, color]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,aAAa,OAAc,aAAqB,MAAmB,mCACzD;CACZ,MAAMA,eAAuB,SAAS,MAAM,KAAK,OAAO,QAAQ;CAEhE,MAAMC,eAAuC;EAC3C,OAAO;EACP,QAAQ;EACR,OAAO;EACR;CAED,MAAMC,cAAsB,aAAa;CAWzC,MAAMC,UAAkB,iBAAG;eAChB,YAAY;gBACX,YAAY;;8BAEE,aAAa;;mBAbT,uBAAS;;;;;;;MAeV;;;CAI7B,MAAMC,eAAuB,iBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;CAGlC,MAAMC,gBAAwB,iBAAG;eACtB,aAAa,UAAU;gBACtB,aAAa,UAAU;;AAQnC,QAAO;EACL;EACA,cAP2B,iBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;EAMhC;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAM;CAAM,CAAC;AAEvC,6BAAe"}
+{"version":3,"file":"Spinner.styles.cjs","names":["spinnerColor: string","spinnerSizes: Record<string, string>","spinnerSize: string","spinner: string","spinnerSmall: string","spinnerMedium: string","spinnerLarge: string"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.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, keyframes} from '../../../styles/emotion';\n\nexport type SpinnerSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Spinner component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the spinner\n * @param color - The color of the spinner\n * @param customSize - Optional explicit width/height (CSS length) that overrides the size-based\n * default, e.g. when a parent component (like `Button`) needs the spinner to track a\n * theme-derived dimension instead of one of the fixed `size` presets.\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  size: SpinnerSize,\n  color?: string,\n  customSize?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const spinnerColor: string = color || theme.vars.colors.primary.main;\n\n    const spinnerSizes: Record<string, string> = {\n      large: '32px',\n      medium: '20px',\n      small: '16px',\n    };\n\n    const spinnerSize: string = spinnerSizes[size];\n\n    const spinAnimation: string = keyframes`\n      0% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(360deg);\n      }\n    `;\n\n    const spinner: string = css`\n      width: ${spinnerSize};\n      height: ${spinnerSize};\n      border: 2px solid transparent;\n      border-top: 2px solid ${spinnerColor};\n      border-radius: 50%;\n      animation: ${spinAnimation} 1s linear infinite;\n      display: inline-block;\n    `;\n\n    const spinnerSmall: string = css`\n      width: ${spinnerSizes['small']};\n      height: ${spinnerSizes['small']};\n    `;\n\n    const spinnerMedium: string = css`\n      width: ${spinnerSizes['medium']};\n      height: ${spinnerSizes['medium']};\n    `;\n\n    const spinnerLarge: string = css`\n      width: ${spinnerSizes['large']};\n      height: ${spinnerSizes['large']};\n    `;\n\n    const spinnerCustomSize: string = customSize\n      ? css`\n          width: ${customSize};\n          height: ${customSize};\n        `\n      : '';\n\n    return {\n      spinner,\n      spinnerCustomSize,\n      spinnerLarge,\n      spinnerMedium,\n      spinnerSmall,\n    };\n  }, [theme, colorScheme, size, color, customSize]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,MACA,OACA,wCAEc;CACZ,MAAMA,eAAuB,SAAS,MAAM,KAAK,OAAO,QAAQ;CAEhE,MAAMC,eAAuC;EAC3C,OAAO;EACP,QAAQ;EACR,OAAO;EACR;CAED,MAAMC,cAAsB,aAAa;CAWzC,MAAMC,UAAkB,mBAAG;eAChB,YAAY;gBACX,YAAY;;8BAEE,aAAa;;mBAbT,yBAAS;;;;;;;MAeV;;;CAI7B,MAAMC,eAAuB,mBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;CAGlC,MAAMC,gBAAwB,mBAAG;eACtB,aAAa,UAAU;gBACtB,aAAa,UAAU;;CAGnC,MAAMC,eAAuB,mBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;AAUlC,QAAO;EACL;EACA,mBATgC,aAC9B,mBAAG;mBACQ,WAAW;oBACV,WAAW;YAEvB;EAKF;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAM;CAAO;CAAW,CAAC;AAEnD,6BAAe"}

package/dist/cjs/components/primitives/TextField/TextField.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,22 +8,20 @@ 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/TextField/TextField.tsx
 const TextField = ({ label, error, required, className, disabled, helperText, startIcon, endIcon, onStartIconClick, onEndIconClick, type = "text", style = {},...rest }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const hasError = !!error;
 	const styles = require_TextField_styles.default(theme, colorScheme, disabled ?? false, hasError, !!startIcon, !!endIcon);
-	const inputClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "input")), styles["input"], hasError && styles["inputError"], disabled && styles["inputDisabled"]);
-	const containerClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "container")), styles["inputContainer"]);
-	const startIconClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "start-icon")), styles["startIcon"]);
-	const endIconClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "end-icon")), styles["endIcon"]);
+	const inputClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "input")), styles["input"], hasError && styles["inputError"], disabled && styles["inputDisabled"]);
+	const containerClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "container")), styles["inputContainer"]);
+	const startIconClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "start-icon")), styles["startIcon"]);
+	const endIconClassName = require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "end-icon")), styles["endIcon"]);
 	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)("text-field")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field")), className),
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
 			required,

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.cjs","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/TextField/TextField.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, ReactNode} from 'react';\nimport useStyles from './TextField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Icon to display at the end (right) of the input\n   */\n  endIcon?: ReactNode;\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   * Click handler for the end icon\n   */\n  onEndIconClick?: () => void;\n  /**\n   * Click handler for the start icon\n   */\n  onStartIconClick?: () => void;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of the input\n   */\n  startIcon?: ReactNode;\n}\n\nconst TextField: FC<TextFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  startIcon,\n  endIcon,\n  onStartIconClick,\n  onEndIconClick,\n  type = 'text',\n  style = {},\n  ...rest\n}: TextFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const hasStartIcon = !!startIcon;\n  const hasEndIcon = !!endIcon;\n  const styles: Record<string, string> = useStyles(\n    theme,\n    colorScheme,\n    disabled ?? false,\n    hasError,\n    hasStartIcon,\n    hasEndIcon,\n  );\n\n  const inputClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'input')),\n    styles['input'],\n    hasError && styles['inputError'],\n    disabled && styles['inputDisabled'],\n  );\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n  const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {startIcon && (\n          <div\n            className={startIconClassName}\n            onClick={onStartIconClick}\n            role={onStartIconClick ? 'button' : undefined}\n            tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n            aria-label=\"Start icon\"\n          >\n            {startIcon}\n          </div>\n        )}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {endIcon && (\n          <div\n            className={endIconClassName}\n            onClick={onEndIconClick}\n            role={onEndIconClick ? 'button' : undefined}\n            tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n            aria-label=\"End icon\"\n          >\n            {endIcon}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;AAsDA,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,SACA,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,iCACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,sHACyB,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,0HACyB,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAMC,0HAA6D,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMC,wHAA2D,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;;IACb,aACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,2CAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,cAAW;eAEV;MACG;;IAEJ;GACM;;AAIlB,wBAAe"}
+{"version":3,"file":"TextField.cjs","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","cx","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/TextField/TextField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './TextField.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 TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Icon to display at the end (right) of the input\n   */\n  endIcon?: ReactNode;\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   * Click handler for the end icon\n   */\n  onEndIconClick?: () => void;\n  /**\n   * Click handler for the start icon\n   */\n  onStartIconClick?: () => void;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of the input\n   */\n  startIcon?: ReactNode;\n}\n\nconst TextField: FC<TextFieldProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  startIcon,\n  endIcon,\n  onStartIconClick,\n  onEndIconClick,\n  type = 'text',\n  style = {},\n  ...rest\n}: TextFieldProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const hasStartIcon = !!startIcon;\n  const hasEndIcon = !!endIcon;\n  const styles: Record<string, string> = useStyles(\n    theme,\n    colorScheme,\n    disabled ?? false,\n    hasError,\n    hasStartIcon,\n    hasEndIcon,\n  );\n\n  const inputClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'input')),\n    styles['input'],\n    hasError && styles['inputError'],\n    disabled && styles['inputDisabled'],\n  );\n\n  const containerClassName: string = cx(\n    withVendorCSSClassPrefix(bem('text-field', 'container')),\n    styles['inputContainer'],\n  );\n\n  const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n  const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={hasError}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={containerClassName}>\n        {startIcon && (\n          <div\n            className={startIconClassName}\n            onClick={onStartIconClick}\n            role={onStartIconClick ? 'button' : undefined}\n            tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n            aria-label=\"Start icon\"\n          >\n            {startIcon}\n          </div>\n        )}\n        <input\n          className={inputClassName}\n          type={type}\n          disabled={disabled}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        {endIcon && (\n          <div\n            className={endIconClassName}\n            onClick={onEndIconClick}\n            role={onEndIconClick ? 'button' : undefined}\n            tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n            aria-label=\"End icon\"\n          >\n            {endIcon}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;AAsDA,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,SACA,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,iCACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,iBAAyBC,kGACA,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,qBAA6BD,kGACJ,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAME,qBAA6BF,kGAAgC,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMG,mBAA2BH,kGAAgC,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,4CAACI;EACQ;EACK;EACZ,WAAWJ,kGAAgC,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,2CAACK;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;;IACb,aACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,2CAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,cAAW;eAEV;MACG;;IAEJ;GACM;;AAIlB,wBAAe"}

package/dist/cjs/components/primitives/TextField/TextField.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/TextField/TextField.styles.ts
 /**
@@ -18,12 +17,12 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => (0, react.useMemo)(() => {
 	const inlineStartPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
 	const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
-	const inputContainer = __emotion_css.css`
+	const inputContainer = require_emotion.css`
       position: relative;
       display: flex;
       align-items: center;
     `;
-	const input = __emotion_css.css`
+	const input = require_emotion.css`
       width: 100%;
       padding-block: ${theme.vars.spacing.unit};
       padding-inline-start: ${inlineStartPadding};
@@ -58,7 +57,7 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndI
         opacity: 0.7;
       }
     `;
-	const inputError = __emotion_css.css`
+	const inputError = require_emotion.css`
       border-color: ${theme.vars.colors.error.main};
 
       &:focus {
@@ -70,12 +69,12 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndI
         border-color: ${theme.vars.colors.error.main};
       }
     `;
-	const inputDisabled = __emotion_css.css`
+	const inputDisabled = require_emotion.css`
       background-color: ${theme.vars.colors.background.disabled};
       opacity: 0.6;
       cursor: not-allowed;
     `;
-	const icon = __emotion_css.css`
+	const icon = require_emotion.css`
       position: absolute;
       background: none;
       border: none;
@@ -101,12 +100,12 @@ const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndI
         outline-offset: 2px;
       }
     `;
-	const startIcon = __emotion_css.css`
+	const startIcon = require_emotion.css`
       ${icon};
       inset-inline-start: ${theme.vars.spacing.unit};
     `;
 	return {
-		endIcon: __emotion_css.css`
+		endIcon: require_emotion.css`
       ${icon};
       inset-inline-end: ${theme.vars.spacing.unit};
     `,

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

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.cjs","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["// Copyright 2024 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 TextField 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 disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasStartIcon: boolean,\n  hasEndIcon: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const inlineStartPadding: string = hasStartIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n    const inlineEndPadding: string = hasEndIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: center;\n    `;\n\n    const input: string = css`\n      width: 100%;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline-start: ${inlineStartPadding};\n      padding-inline-end: ${inlineEndPadding};\n      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\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      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n    `;\n\n    const inputError: 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 inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const icon: string = css`\n      position: absolute;\n      background: none;\n      border: none;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${theme.vars.colors.text.secondary};\n      opacity: ${disabled ? 0.5 : 1};\n      top: 50%;\n      transform: translateY(-50%);\n      transition:\n        color 0.2s ease,\n        opacity 0.2s ease;\n\n      &:hover:not(:disabled) {\n        color: ${theme.vars.colors.text.primary};\n      }\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n    `;\n\n    const startIcon: string = css`\n      ${icon};\n      inset-inline-start: ${theme.vars.spacing.unit};\n    `;\n\n    const endIcon: string = css`\n      ${icon};\n      inset-inline-end: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      endIcon,\n      icon,\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n      startIcon,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,wCAEc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,MAAMC,mBAA2B,aAC7B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAEpC,MAAMC,iBAAyB,iBAAG;;;;;CAMlC,MAAMC,QAAgB,iBAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,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;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,iBAAG;sBACZ,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,gBAAwB,iBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,iBAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,iBAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,iBAAG;QACvB,KAAK;0BACa,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAW,CAAC;AAExE,+BAAe"}
+{"version":3,"file":"TextField.styles.cjs","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["// Copyright 2024 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 TextField 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 disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  hasError: boolean,\n  hasStartIcon: boolean,\n  hasEndIcon: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const inlineStartPadding: string = hasStartIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n    const inlineEndPadding: string = hasEndIcon\n      ? `calc(${theme.vars.spacing.unit} * 5)`\n      : `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n    const inputContainer: string = css`\n      position: relative;\n      display: flex;\n      align-items: center;\n    `;\n\n    const input: string = css`\n      width: 100%;\n      padding-block: ${theme.vars.spacing.unit};\n      padding-inline-start: ${inlineStartPadding};\n      padding-inline-end: ${inlineEndPadding};\n      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};\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      &:focus {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n        cursor: not-allowed;\n      }\n\n      &:hover:not(:disabled) {\n        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n      }\n\n      &::placeholder {\n        color: ${theme.vars.colors.text.secondary};\n        opacity: 0.7;\n      }\n    `;\n\n    const inputError: 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 inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      opacity: 0.6;\n      cursor: not-allowed;\n    `;\n\n    const icon: string = css`\n      position: absolute;\n      background: none;\n      border: none;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ${theme.vars.colors.text.secondary};\n      opacity: ${disabled ? 0.5 : 1};\n      top: 50%;\n      transform: translateY(-50%);\n      transition:\n        color 0.2s ease,\n        opacity 0.2s ease;\n\n      &:hover:not(:disabled) {\n        color: ${theme.vars.colors.text.primary};\n      }\n\n      &:focus {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n    `;\n\n    const startIcon: string = css`\n      ${icon};\n      inset-inline-start: ${theme.vars.spacing.unit};\n    `;\n\n    const endIcon: string = css`\n      ${icon};\n      inset-inline-end: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      endIcon,\n      icon,\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n      startIcon,\n    };\n  }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,wCAEc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,MAAMC,mBAA2B,aAC7B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAEpC,MAAMC,iBAAyB,mBAAG;;;;;CAMlC,MAAMC,QAAgB,mBAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,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;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,mBAAG;sBACZ,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,gBAAwB,mBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,mBAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,mBAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,mBAAG;QACvB,KAAK;0BACa,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAW,CAAC;AAExE,+BAAe"}

package/dist/cjs/components/primitives/Toggle/Toggle.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_Toggle_styles = require('./Toggle.styles.cjs');
 const require_FormControl = require('../FormControl/FormControl.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/Toggle/Toggle.tsx
 /**
@@ -28,29 +27,29 @@ const Toggle = ({ label, error, className, required, helperText, style = {},...r
 	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)("toggle")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle")), className),
 		helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 5.5)`,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
 			style,
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "container")), styles["container"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "container")), styles["container"]),
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 					type: "checkbox",
 					role: "switch",
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "input")), styles["input"]),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "input")), styles["input"]),
 					"aria-invalid": hasError,
 					"aria-required": required,
 					...rest
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "track")), styles["track"]),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "thumb")), styles["thumb"]) })
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "track")), styles["track"]),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "thumb")), styles["thumb"]) })
 				}),
 				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
 					required,
 					error: hasError,
 					variant: "inline",
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "label")), styles["label"], styles["errorLabel"], { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "label", "error"))]: hasError }),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "label")), styles["label"], styles["errorLabel"], { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "label", "error"))]: hasError }),
 					children: label
 				})
 			]

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","names":["Toggle: FC<ToggleProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.tsx"],"sourcesContent":["// Copyright 2026 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 './Toggle.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\n/**\n * Props for the Toggle component.\n */\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  required?: boolean;\n}\n\n/**\n * A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input\n * and styled to look like a switch.\n *\n * The component is wrapped in a FormControl to display error messages and helper text.\n * The label is associated with the input for accessibility.\n *\n * @param props - Props for the Toggle component\n * @returns A JSX element representing the Toggle\n */\nconst Toggle: FC<ToggleProps> = ({label, error, className, required, helperText, style = {}, ...rest}: ToggleProps) => {\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('toggle')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 5.5)`}\n    >\n      <label style={style} className={cx(withVendorCSSClassPrefix(bem('toggle', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className={cx(withVendorCSSClassPrefix(bem('toggle', 'input')), styles['input'])}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        <div className={cx(withVendorCSSClassPrefix(bem('toggle', 'track')), styles['track'])}>\n          <span className={cx(withVendorCSSClassPrefix(bem('toggle', 'thumb')), styles['thumb'])} />\n        </div>\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('toggle', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('toggle', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </label>\n    </FormControl>\n  );\n};\n\nexport default Toggle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,UAA2B,EAAC,OAAO,OAAO,WAAW,UAAU,YAAY,QAAQ,EAAE,CAAE,GAAG,WAAuB;CACrH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,gHAA2C,SAAS,CAAC,EAAE,UAAU;EACjE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAa;GAAO,gHAA2C,UAAU,YAAY,CAAC,EAAE,OAAO,aAAa;;IAC3G,2CAAC;KACC,MAAK;KACL,MAAK;KACL,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;KAChF,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACF,2CAAC;KAAI,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;eACnF,2CAAC,UAAK,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAI;MACtF;IACL,SACC,2CAACC;KACW;KACV,OAAO;KACP,SAAQ;KACR,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACvE,UAAU,SAAS,QAAQ,CAAC,GAAG,UAC9D,CAAC;eAED;MACU;;IAET;GACI;;AAIlB,qBAAe"}
+{"version":3,"file":"Toggle.cjs","names":["Toggle: FC<ToggleProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.tsx"],"sourcesContent":["// Copyright 2026 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 './Toggle.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\n/**\n * Props for the Toggle component.\n */\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  required?: boolean;\n}\n\n/**\n * A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input\n * and styled to look like a switch.\n *\n * The component is wrapped in a FormControl to display error messages and helper text.\n * The label is associated with the input for accessibility.\n *\n * @param props - Props for the Toggle component\n * @returns A JSX element representing the Toggle\n */\nconst Toggle: FC<ToggleProps> = ({label, error, className, required, helperText, style = {}, ...rest}: ToggleProps) => {\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('toggle')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 5.5)`}\n    >\n      <label style={style} className={cx(withVendorCSSClassPrefix(bem('toggle', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className={cx(withVendorCSSClassPrefix(bem('toggle', 'input')), styles['input'])}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        <div className={cx(withVendorCSSClassPrefix(bem('toggle', 'track')), styles['track'])}>\n          <span className={cx(withVendorCSSClassPrefix(bem('toggle', 'thumb')), styles['thumb'])} />\n        </div>\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('toggle', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('toggle', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </label>\n    </FormControl>\n  );\n};\n\nexport default Toggle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAgCA,MAAMA,UAA2B,EAAC,OAAO,OAAO,WAAW,UAAU,YAAY,QAAQ,EAAE,CAAE,GAAG,WAAuB;CACrH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,WAAWC,kGAAgC,SAAS,CAAC,EAAE,UAAU;EACjE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAa;GAAO,WAAWA,kGAAgC,UAAU,YAAY,CAAC,EAAE,OAAO,aAAa;;IAC3G,2CAAC;KACC,MAAK;KACL,MAAK;KACL,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;KAChF,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACF,2CAAC;KAAI,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;eACnF,2CAAC,UAAK,WAAWA,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAI;MACtF;IACL,SACC,2CAACC;KACW;KACV,OAAO;KACP,SAAQ;KACR,WAAWD,kGAAgC,UAAU,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACvE,UAAU,SAAS,QAAQ,CAAC,GAAG,UAC9D,CAAC;eAED;MACU;;IAET;GACI;;AAIlB,qBAAe"}

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

@@ -1,17 +1,16 @@
 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/Toggle/Toggle.styles.ts
 const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)(() => {
-	const containerStyles = __emotion_css.css`
+	const containerStyles = require_emotion.css`
       display: inline-flex;
       align-items: center;
       cursor: pointer;
     `;
-	const inputStyles = __emotion_css.css`
+	const inputStyles = require_emotion.css`
       border: 0;
       clip: rect(0 0 0 0);
       height: 1px;
@@ -32,7 +31,7 @@ const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)
         opacity: 0.6;
       }
     `;
-	const trackStyles = __emotion_css.css`
+	const trackStyles = require_emotion.css`
       position: relative;
       display: inline-flex;
       align-items: center;
@@ -52,7 +51,7 @@ const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)
         opacity: 0.4;
       }
     `;
-	const thumbStyles = __emotion_css.css`
+	const thumbStyles = require_emotion.css`
       position: absolute;
       left: 2px;
       width: 16px;
@@ -65,7 +64,7 @@ const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)
         transform: translateX(16px);
       }
     `;
-	const labelStyles = __emotion_css.css`
+	const labelStyles = require_emotion.css`
       margin-left: calc(${theme.vars.spacing.unit} * 1.5);
       color: ${theme.vars.colors.text.primary};
       font-size: ${theme.vars.typography.fontSizes.sm};
@@ -77,7 +76,7 @@ const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)
         opacity: 0.6;
       }
     `;
-	const errorLabelStyles = __emotion_css.css`
+	const errorLabelStyles = require_emotion.css`
       color: ${theme.vars.colors.error.main};
     `;
 	return {

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

@@ -1 +1 @@
-{"version":3,"file":"Toggle.styles.cjs","names":["containerStyles: string","inputStyles: string","trackStyles: string","thumbStyles: string","labelStyles: string","errorLabelStyles: string"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.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, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n    `;\n\n    const inputStyles: string = css`\n      border: 0;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n\n      &:focus-visible + div {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled + div {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const trackStyles: string = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      width: 36px;\n      height: 20px;\n      background-color: ${theme.vars.colors.text.secondary};\n      opacity: 0.2;\n      border-radius: 9999px;\n      transition: all 0.2s ease-in-out;\n\n      input:checked + & {\n        background-color: ${theme.vars.colors.primary.main};\n        opacity: 1;\n      }\n\n      input:disabled + & {\n        opacity: 0.4;\n      }\n    `;\n\n    const thumbStyles: string = css`\n      position: absolute;\n      left: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: #fff;\n      border-radius: 50%;\n      transition: transform 0.2s ease-in-out;\n\n      input:checked + * > & {\n        transform: translateX(16px);\n      }\n    `;\n\n    const labelStyles: string = css`\n      margin-left: calc(${theme.vars.spacing.unit} * 1.5);\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      input:disabled ~ & {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    return {\n      container: containerStyles,\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      thumb: thumbStyles,\n      track: trackStyles,\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAOA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,kBAA0B,iBAAG;;;;;CAMnC,MAAMC,cAAsB,iBAAG;;;;;;;;;;;;6BAYN,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,cAAsB,iBAAG;;;;;;0BAMT,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;4BAM/B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;CASvD,MAAMC,cAAsB,iBAAG;;;;;;;;;;;;;CAc/B,MAAMC,cAAsB,iBAAG;0BACT,MAAM,KAAK,QAAQ,KAAK;eACnC,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;;;;;CASlD,MAAMC,mBAA2B,iBAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;AAGxC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}
+{"version":3,"file":"Toggle.styles.cjs","names":["containerStyles: string","inputStyles: string","trackStyles: string","thumbStyles: string","labelStyles: string","errorLabelStyles: string"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.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, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n    `;\n\n    const inputStyles: string = css`\n      border: 0;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n\n      &:focus-visible + div {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled + div {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const trackStyles: string = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      width: 36px;\n      height: 20px;\n      background-color: ${theme.vars.colors.text.secondary};\n      opacity: 0.2;\n      border-radius: 9999px;\n      transition: all 0.2s ease-in-out;\n\n      input:checked + & {\n        background-color: ${theme.vars.colors.primary.main};\n        opacity: 1;\n      }\n\n      input:disabled + & {\n        opacity: 0.4;\n      }\n    `;\n\n    const thumbStyles: string = css`\n      position: absolute;\n      left: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: #fff;\n      border-radius: 50%;\n      transition: transform 0.2s ease-in-out;\n\n      input:checked + * > & {\n        transform: translateX(16px);\n      }\n    `;\n\n    const labelStyles: string = css`\n      margin-left: calc(${theme.vars.spacing.unit} * 1.5);\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      input:disabled ~ & {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    return {\n      container: containerStyles,\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      thumb: thumbStyles,\n      track: trackStyles,\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;;;AAOA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,kBAA0B,mBAAG;;;;;CAMnC,MAAMC,cAAsB,mBAAG;;;;;;;;;;;;6BAYN,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,cAAsB,mBAAG;;;;;;0BAMT,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;4BAM/B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;CASvD,MAAMC,cAAsB,mBAAG;;;;;;;;;;;;;CAc/B,MAAMC,cAAsB,mBAAG;0BACT,MAAM,KAAK,QAAQ,KAAK;eACnC,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;;;;;CASlD,MAAMC,mBAA2B,mBAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;AAGxC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}

package/dist/cjs/components/primitives/Tooltip/Tooltip.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_Tooltip_styles = require('./Tooltip.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/Tooltip/Tooltip.tsx
 /**
@@ -37,7 +36,7 @@ const Tooltip = ({ className = "", helperText = "", style = {}, position = "bott
 		role: "button",
 		"aria-label": ariaLabel,
 		"aria-describedby": isVisible && helperText ? tooltipId : void 0,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", "container")), className, styles["container"]),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", "container")), className, styles["container"]),
 		style,
 		onMouseEnter: () => setIsVisible(true),
 		onMouseLeave: () => setIsVisible(false),
@@ -48,8 +47,8 @@ const Tooltip = ({ className = "", helperText = "", style = {}, position = "bott
 		children: [children, isVisible && helperText && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			id: tooltipId,
 			role: "tooltip",
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", "box")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", position)), styles["box"], styles[position || "bottom"]),
-			children: [helperText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", "arrow")), styles["arrow"], styles[`${position}-arrow`]) })]
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", "box")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", position)), styles["box"], styles[position || "bottom"]),
+			children: [helperText, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("tooltip", "arrow")), styles["arrow"], styles[`${position}-arrow`]) })]
 		})]
 	});
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","names":["Tooltip: FC<Tooltiprops>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["// Copyright 2026 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, ReactNode, useId, useState, KeyboardEvent} from 'react';\nimport useStyles from './Tooltip.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\n/**\n * Props for the Tooltip component.\n */\nexport interface Tooltiprops extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  helperText?: string;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  children?: ReactNode;\n  ariaLabel?: string;\n}\n\n/**\n * A Tooltip component that convert any react or html element to a tooltip.\n * When a user hover on it, they will see a small tooltip with some info.\n *\n * It will take a children, which can be a react element or html element.\n *\n * @param props - Props for the Tooltip component\n * @returns A JSX element representing the Tooltip\n */\nconst Tooltip: FC<Tooltiprops> = ({\n  className = '',\n  helperText = '',\n  style = {},\n  position = 'bottom',\n  children = null,\n  ariaLabel = 'More Info',\n  ...rest\n}: Tooltiprops) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  // Unique ID to connect trigger button to tooltip box via ARIA\n  const tooltipId = useId();\n\n  // Close tooltip if user presses ESC while focused\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' && isVisible) {\n      setIsVisible(false);\n    }\n\n    // Optional: Prevent Space key from scrolling the page\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      setIsVisible((prev) => !prev);\n    }\n  };\n  return (\n    <div\n      tabIndex={0}\n      role=\"button\"\n      aria-label={ariaLabel}\n      aria-describedby={isVisible && helperText ? tooltipId : undefined}\n      className={cx(withVendorCSSClassPrefix(bem('tooltip', 'container')), className, styles['container'])}\n      style={style}\n      onMouseEnter={() => setIsVisible(true)}\n      onMouseLeave={() => setIsVisible(false)}\n      onFocus={() => setIsVisible(true)} /* Trigger on Tab Focus */\n      onBlur={() => setIsVisible(false)} /* Hide on Tab Blur */\n      onKeyDown={handleKeyDown} /* Allow ESC to dismiss */\n      {...rest}\n    >\n      {children}\n      {isVisible && helperText && (\n        <div\n          id={tooltipId}\n          role=\"tooltip\"\n          className={cx(\n            withVendorCSSClassPrefix(bem('tooltip', 'box')),\n            withVendorCSSClassPrefix(bem('tooltip', position)),\n            styles['box'],\n            styles[position || 'bottom'],\n          )}\n        >\n          {helperText}\n          <span\n            className={cx(\n              withVendorCSSClassPrefix(bem('tooltip', 'arrow')),\n              styles['arrow'],\n              styles[`${position}-arrow`],\n            )}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,WAA4B,EAChC,YAAY,IACZ,aAAa,IACb,QAAQ,EAAE,EACV,WAAW,UACX,WAAW,MACX,YAAY,YACZ,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,+BAAU,OAAO,YAAY;CACpE,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAG1D,MAAM,8BAAmB;CAGzB,MAAM,iBAAiB,MAAqC;AAC1D,MAAI,EAAE,QAAQ,YAAY,UACxB,cAAa,MAAM;AAIrB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,KAAE,gBAAgB;AAClB,iBAAc,SAAS,CAAC,KAAK;;;AAGjC,QACE,4CAAC;EACC,UAAU;EACV,MAAK;EACL,cAAY;EACZ,oBAAkB,aAAa,aAAa,YAAY;EACxD,gHAA2C,WAAW,YAAY,CAAC,EAAE,WAAW,OAAO,aAAa;EAC7F;EACP,oBAAoB,aAAa,KAAK;EACtC,oBAAoB,aAAa,MAAM;EACvC,eAAe,aAAa,KAAK;EACjC,cAAc,aAAa,MAAM;EACjC,WAAW;EACX,GAAI;aAEH,UACA,aAAa,cACZ,4CAAC;GACC,IAAI;GACJ,MAAK;GACL,gHAC+B,WAAW,MAAM,CAAC,iFAClB,WAAW,SAAS,CAAC,EAClD,OAAO,QACP,OAAO,YAAY,UACpB;cAEA,YACD,2CAAC,UACC,gHAC+B,WAAW,QAAQ,CAAC,EACjD,OAAO,UACP,OAAO,GAAG,SAAS,SACpB,GACD;IACE;GAEJ;;AAIV,sBAAe"}
+{"version":3,"file":"Tooltip.cjs","names":["Tooltip: FC<Tooltiprops>","useTheme","styles: Record<string, string>","useStyles","cx"],"sources":["../../../../../src/components/primitives/Tooltip/Tooltip.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, ReactNode, useId, useState, KeyboardEvent} from 'react';\nimport useStyles from './Tooltip.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\n/**\n * Props for the Tooltip component.\n */\nexport interface Tooltiprops extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  helperText?: string;\n  position?: 'top' | 'bottom' | 'left' | 'right';\n  children?: ReactNode;\n  ariaLabel?: string;\n}\n\n/**\n * A Tooltip component that convert any react or html element to a tooltip.\n * When a user hover on it, they will see a small tooltip with some info.\n *\n * It will take a children, which can be a react element or html element.\n *\n * @param props - Props for the Tooltip component\n * @returns A JSX element representing the Tooltip\n */\nconst Tooltip: FC<Tooltiprops> = ({\n  className = '',\n  helperText = '',\n  style = {},\n  position = 'bottom',\n  children = null,\n  ariaLabel = 'More Info',\n  ...rest\n}: Tooltiprops) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [isVisible, setIsVisible] = useState<boolean>(false);\n\n  // Unique ID to connect trigger button to tooltip box via ARIA\n  const tooltipId = useId();\n\n  // Close tooltip if user presses ESC while focused\n  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' && isVisible) {\n      setIsVisible(false);\n    }\n\n    // Optional: Prevent Space key from scrolling the page\n    if (e.key === ' ' || e.key === 'Enter') {\n      e.preventDefault();\n      setIsVisible((prev) => !prev);\n    }\n  };\n  return (\n    <div\n      tabIndex={0}\n      role=\"button\"\n      aria-label={ariaLabel}\n      aria-describedby={isVisible && helperText ? tooltipId : undefined}\n      className={cx(withVendorCSSClassPrefix(bem('tooltip', 'container')), className, styles['container'])}\n      style={style}\n      onMouseEnter={() => setIsVisible(true)}\n      onMouseLeave={() => setIsVisible(false)}\n      onFocus={() => setIsVisible(true)} /* Trigger on Tab Focus */\n      onBlur={() => setIsVisible(false)} /* Hide on Tab Blur */\n      onKeyDown={handleKeyDown} /* Allow ESC to dismiss */\n      {...rest}\n    >\n      {children}\n      {isVisible && helperText && (\n        <div\n          id={tooltipId}\n          role=\"tooltip\"\n          className={cx(\n            withVendorCSSClassPrefix(bem('tooltip', 'box')),\n            withVendorCSSClassPrefix(bem('tooltip', position)),\n            styles['box'],\n            styles[position || 'bottom'],\n          )}\n        >\n          {helperText}\n          <span\n            className={cx(\n              withVendorCSSClassPrefix(bem('tooltip', 'arrow')),\n              styles['arrow'],\n              styles[`${position}-arrow`],\n            )}\n          />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Tooltip;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6BA,MAAMA,WAA4B,EAChC,YAAY,IACZ,aAAa,IACb,QAAQ,EAAE,EACV,WAAW,UACX,WAAW,MACX,YAAY,YACZ,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,+BAAU,OAAO,YAAY;CACpE,MAAM,CAAC,WAAW,oCAAkC,MAAM;CAG1D,MAAM,8BAAmB;CAGzB,MAAM,iBAAiB,MAAqC;AAC1D,MAAI,EAAE,QAAQ,YAAY,UACxB,cAAa,MAAM;AAIrB,MAAI,EAAE,QAAQ,OAAO,EAAE,QAAQ,SAAS;AACtC,KAAE,gBAAgB;AAClB,iBAAc,SAAS,CAAC,KAAK;;;AAGjC,QACE,4CAAC;EACC,UAAU;EACV,MAAK;EACL,cAAY;EACZ,oBAAkB,aAAa,aAAa,YAAY;EACxD,WAAWC,kGAAgC,WAAW,YAAY,CAAC,EAAE,WAAW,OAAO,aAAa;EAC7F;EACP,oBAAoB,aAAa,KAAK;EACtC,oBAAoB,aAAa,MAAM;EACvC,eAAe,aAAa,KAAK;EACjC,cAAc,aAAa,MAAM;EACjC,WAAW;EACX,GAAI;aAEH,UACA,aAAa,cACZ,4CAAC;GACC,IAAI;GACJ,MAAK;GACL,WAAWA,kGACoB,WAAW,MAAM,CAAC,iFAClB,WAAW,SAAS,CAAC,EAClD,OAAO,QACP,OAAO,YAAY,UACpB;cAEA,YACD,2CAAC,UACC,WAAWA,kGACoB,WAAW,QAAQ,CAAC,EACjD,OAAO,UACP,OAAO,GAAG,SAAS,SACpB,GACD;IACE;GAEJ;;AAIV,sBAAe"}

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

@@ -1,20 +1,19 @@
 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/Tooltip/Tooltip.styles.ts
 const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
-	const fadeInAnimation = __emotion_css.keyframes`
+	const fadeInAnimation = require_emotion.keyframes`
      from { opacity: 0; }
      to { opacity: 1; }
     `;
-	const containerStyles = __emotion_css.css`
+	const containerStyles = require_emotion.css`
       position: relative;
       display: inline-block;
     `;
-	const boxStyles = __emotion_css.css`
+	const boxStyles = require_emotion.css`
       position: absolute;
       background-color: #333;
       color: #fff;
@@ -31,58 +30,58 @@ const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
       overflow-wrap: break-word;
       text-align: start;
     `;
-	const topStyles = __emotion_css.css`
+	const topStyles = require_emotion.css`
       bottom: 100%;
       left: 50%;
       transform: translateX(-50%);
       margin-bottom: 8px;
     `;
-	const bottomStyles = __emotion_css.css`
+	const bottomStyles = require_emotion.css`
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       margin-top: 8px;
     `;
-	const leftStyles = __emotion_css.css`
+	const leftStyles = require_emotion.css`
       right: 100%;
       top: 50%;
       transform: translateY(-50%);
       margin-right: 8px;
     `;
-	const rightStyles = __emotion_css.css`
+	const rightStyles = require_emotion.css`
       left: 100%;
       top: 50%;
       transform: translateY(-50%);
       margin-left: 8px;
     `;
-	const arrowStyles = __emotion_css.css`
+	const arrowStyles = require_emotion.css`
       position: absolute;
       width: 0;
       height: 0;
       border-style: solid;
     `;
-	const topArrowStyles = __emotion_css.css`
+	const topArrowStyles = require_emotion.css`
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       border-width: 5px 5px 0 5px;
       border-color: #333 transparent transparent transparent;
     `;
-	const bottomArrowStyles = __emotion_css.css`
+	const bottomArrowStyles = require_emotion.css`
       bottom: 100%;
       left: 50%;
       transform: translateX(-50%);
       border-width: 0 5px 5px 5px;
       border-color: transparent transparent #333 transparent;
     `;
-	const leftArrowStyles = __emotion_css.css`
+	const leftArrowStyles = require_emotion.css`
       left: 100%;
       top: 50%;
       transform: translateY(-50%);
       border-width: 5px 0 5px 5px;
       border-color: transparent transparent transparent #333;
     `;
-	const rightArrowStyles = __emotion_css.css`
+	const rightArrowStyles = require_emotion.css`
       right: 100%;
       top: 50%;
       transform: translateY(-50%);

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.styles.cjs","names":["containerStyles: string","boxStyles: string","topStyles: string","bottomStyles: string","leftStyles: string","rightStyles: string","arrowStyles: string","topArrowStyles: string","bottomArrowStyles: string","leftArrowStyles: string","rightArrowStyles: string"],"sources":["../../../../../src/components/primitives/Tooltip/Tooltip.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css, keyframes} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const fadeInAnimation = keyframes`\n     from { opacity: 0; }\n     to { opacity: 1; }\n    `;\n\n    const containerStyles: string = css`\n      position: relative;\n      display: inline-block;\n    `;\n\n    //   white-space: nowrap;\n    const boxStyles: string = css`\n      position: absolute;\n      background-color: #333;\n      color: #fff;\n      padding: 6px 12px;\n      border-radius: 6px;\n      font-size: 0.85rem;\n      z-index: 1000;\n      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);\n      animation: ${fadeInAnimation} 0.15s ease-in-out;\n\n      min-width: 250px;\n      white-space: normal;\n      word-break: break-word;\n      overflow-wrap: break-word;\n      text-align: start;\n    `;\n\n    const topStyles: string = css`\n      bottom: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      margin-bottom: 8px;\n    `;\n\n    const bottomStyles: string = css`\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      margin-top: 8px;\n    `;\n\n    const leftStyles: string = css`\n      right: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      margin-right: 8px;\n    `;\n\n    const rightStyles: string = css`\n      left: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      margin-left: 8px;\n    `;\n\n    const arrowStyles: string = css`\n      position: absolute;\n      width: 0;\n      height: 0;\n      border-style: solid;\n    `;\n\n    const topArrowStyles: string = css`\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border-width: 5px 5px 0 5px;\n      border-color: #333 transparent transparent transparent;\n    `;\n\n    const bottomArrowStyles: string = css`\n      bottom: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border-width: 0 5px 5px 5px;\n      border-color: transparent transparent #333 transparent;\n    `;\n\n    const leftArrowStyles: string = css`\n      left: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      border-width: 5px 0 5px 5px;\n      border-color: transparent transparent transparent #333;\n    `;\n\n    const rightArrowStyles: string = css`\n      right: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      border-width: 5px 5px 5px 0;\n      border-color: transparent #333 transparent transparent;\n    `;\n\n    return {\n      container: containerStyles,\n      box: boxStyles,\n      top: topStyles,\n      bottom: bottomStyles,\n      left: leftStyles,\n      right: rightStyles,\n      arrow: arrowStyles,\n      'top-arrow': topArrowStyles,\n      'bottom-arrow': bottomArrowStyles,\n      'left-arrow': leftArrowStyles,\n      'right-arrow': rightArrowStyles,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAOA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAM,kBAAkB,uBAAS;;;;CAKjC,MAAMA,kBAA0B,iBAAG;;;;CAMnC,MAAMC,YAAoB,iBAAG;;;;;;;;;mBASd,gBAAgB;;;;;;;;CAS/B,MAAMC,YAAoB,iBAAG;;;;;;CAO7B,MAAMC,eAAuB,iBAAG;;;;;;CAOhC,MAAMC,aAAqB,iBAAG;;;;;;CAO9B,MAAMC,cAAsB,iBAAG;;;;;;CAO/B,MAAMC,cAAsB,iBAAG;;;;;;CAO/B,MAAMC,iBAAyB,iBAAG;;;;;;;CAQlC,MAAMC,oBAA4B,iBAAG;;;;;;;CAQrC,MAAMC,kBAA0B,iBAAG;;;;;;;CAQnC,MAAMC,mBAA2B,iBAAG;;;;;;;AAQpC,QAAO;EACL,WAAW;EACX,KAAK;EACL,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;EACP,OAAO;EACP,aAAa;EACb,gBAAgB;EAChB,cAAc;EACd,eAAe;EAChB;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,6BAAe"}
+{"version":3,"file":"Tooltip.styles.cjs","names":["containerStyles: string","boxStyles: string","topStyles: string","bottomStyles: string","leftStyles: string","rightStyles: string","arrowStyles: string","topArrowStyles: string","bottomArrowStyles: string","leftArrowStyles: string","rightArrowStyles: string"],"sources":["../../../../../src/components/primitives/Tooltip/Tooltip.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, keyframes} from '../../../styles/emotion';\n\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const fadeInAnimation = keyframes`\n     from { opacity: 0; }\n     to { opacity: 1; }\n    `;\n\n    const containerStyles: string = css`\n      position: relative;\n      display: inline-block;\n    `;\n\n    //   white-space: nowrap;\n    const boxStyles: string = css`\n      position: absolute;\n      background-color: #333;\n      color: #fff;\n      padding: 6px 12px;\n      border-radius: 6px;\n      font-size: 0.85rem;\n      z-index: 1000;\n      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.15);\n      animation: ${fadeInAnimation} 0.15s ease-in-out;\n\n      min-width: 250px;\n      white-space: normal;\n      word-break: break-word;\n      overflow-wrap: break-word;\n      text-align: start;\n    `;\n\n    const topStyles: string = css`\n      bottom: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      margin-bottom: 8px;\n    `;\n\n    const bottomStyles: string = css`\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      margin-top: 8px;\n    `;\n\n    const leftStyles: string = css`\n      right: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      margin-right: 8px;\n    `;\n\n    const rightStyles: string = css`\n      left: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      margin-left: 8px;\n    `;\n\n    const arrowStyles: string = css`\n      position: absolute;\n      width: 0;\n      height: 0;\n      border-style: solid;\n    `;\n\n    const topArrowStyles: string = css`\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border-width: 5px 5px 0 5px;\n      border-color: #333 transparent transparent transparent;\n    `;\n\n    const bottomArrowStyles: string = css`\n      bottom: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border-width: 0 5px 5px 5px;\n      border-color: transparent transparent #333 transparent;\n    `;\n\n    const leftArrowStyles: string = css`\n      left: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      border-width: 5px 0 5px 5px;\n      border-color: transparent transparent transparent #333;\n    `;\n\n    const rightArrowStyles: string = css`\n      right: 100%;\n      top: 50%;\n      transform: translateY(-50%);\n      border-width: 5px 5px 5px 0;\n      border-color: transparent #333 transparent transparent;\n    `;\n\n    return {\n      container: containerStyles,\n      box: boxStyles,\n      top: topStyles,\n      bottom: bottomStyles,\n      left: leftStyles,\n      right: rightStyles,\n      arrow: arrowStyles,\n      'top-arrow': topArrowStyles,\n      'bottom-arrow': bottomArrowStyles,\n      'left-arrow': leftArrowStyles,\n      'right-arrow': rightArrowStyles,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;AAOA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAM,kBAAkB,yBAAS;;;;CAKjC,MAAMA,kBAA0B,mBAAG;;;;CAMnC,MAAMC,YAAoB,mBAAG;;;;;;;;;mBASd,gBAAgB;;;;;;;;CAS/B,MAAMC,YAAoB,mBAAG;;;;;;CAO7B,MAAMC,eAAuB,mBAAG;;;;;;CAOhC,MAAMC,aAAqB,mBAAG;;;;;;CAO9B,MAAMC,cAAsB,mBAAG;;;;;;CAO/B,MAAMC,cAAsB,mBAAG;;;;;;CAO/B,MAAMC,iBAAyB,mBAAG;;;;;;;CAQlC,MAAMC,oBAA4B,mBAAG;;;;;;;CAQrC,MAAMC,kBAA0B,mBAAG;;;;;;;CAQnC,MAAMC,mBAA2B,mBAAG;;;;;;;AAQpC,QAAO;EACL,WAAW;EACX,KAAK;EACL,KAAK;EACL,QAAQ;EACR,MAAM;EACN,OAAO;EACP,OAAO;EACP,aAAa;EACb,gBAAgB;EAChB,cAAc;EACd,eAAe;EAChB;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,6BAAe"}