@thunderid/react 0.11.4 → 0.13.0

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueInput.styles.cjs","names":["container: string","label: string","requiredIndicator: string","pairsList: string","pairRow: string","pairInput: string","addRow: string","removeButton: string","addButton: string","helperText: string","emptyState: string","readOnlyPair: string","readOnlyKey: string","readOnlyValue: string"],"sources":["../../../../../src/components/primitives/KeyValueInput/KeyValueInput.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 KeyValueInput 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 readOnly - Whether the component is read-only\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  readOnly: boolean,\n  hasError: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      font-family: ${theme.vars.typography.fontFamily};\n      gap: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const label: string = css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.primary};\n      margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const requiredIndicator: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const pairsList: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} / 4);\n    `;\n\n    const pairRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      border-radius: ${theme.vars.borderRadius.small};\n      background-color: transparent;\n      border: none;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n    `;\n\n    const pairInput: string = css`\n      flex: 1;\n      min-width: 0;\n    `;\n\n    const addRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      background-color: transparent;\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const removeButton: string = css`\n      min-width: auto;\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      background-color: transparent;\n      color: ${theme.vars.colors.text.secondary};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.action.hover};\n        color: ${theme.vars.colors.error.main};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const addButton: string = css`\n      min-width: auto;\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      background-color: transparent;\n      color: ${theme.vars.colors.primary.main};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const helperText: string = css`\n      font-size: 0.75rem;\n      color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const emptyState: string = css`\n      padding: ${theme.vars.spacing.unit};\n      text-align: center;\n      color: ${theme.vars.colors.text.secondary};\n      font-style: italic;\n      font-size: 0.75rem;\n    `;\n\n    const readOnlyPair: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 4) 0;\n      min-height: 20px;\n    `;\n\n    const readOnlyKey: string = css`\n      font-size: 0.75rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.secondary};\n      min-width: 80px;\n      flex-shrink: 0;\n    `;\n\n    const readOnlyValue: string = css`\n      font-size: 0.75rem;\n      color: ${theme.vars.colors.text.primary};\n      word-break: break-word;\n      flex: 1;\n    `;\n\n    const counterText: string = css`\n      font-size: 0.75rem;\n      color: ${theme.vars.colors.text.secondary};\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    return {\n      addButton,\n      addRow,\n      container,\n      counterText,\n      emptyState,\n      helperText,\n      label,\n      pairInput,\n      pairRow,\n      pairsList,\n      readOnlyKey,\n      readOnlyPair,\n      readOnlyValue,\n      removeButton,\n      requiredIndicator,\n    };\n  }, [theme, colorScheme, disabled, readOnly, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,aACJ,OACA,aACA,UACA,UACA,sCAEc;CACZ,MAAMA,YAAoB,iBAAG;;;qBAGZ,MAAM,KAAK,WAAW,WAAW;kBACpC,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,QAAgB,iBAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,oBAA4B,iBAAG;eAC1B,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,YAAoB,iBAAG;;;kBAGf,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,UAAkB,iBAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,MAAM;;;;;4BAKzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;CAIvD,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,SAAiB,iBAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;yBAE5B,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,eAAuB,iBAAG;;;;;;eAMrB,MAAM,KAAK,OAAO,KAAK,UAAU;;uBAEzB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,OAAO,MAAM;iBAC1C,MAAM,KAAK,OAAO,MAAM,KAAK;;;;;;;CAQ1C,MAAMC,YAAoB,iBAAG;;;;;;eAMlB,MAAM,KAAK,OAAO,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;;;;;CAQpD,MAAMC,aAAqB,iBAAG;;eAEnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,KAAK,UAAU;yBACjE,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,aAAqB,iBAAG;iBACjB,MAAM,KAAK,QAAQ,KAAK;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,eAAuB,iBAAG;;;kBAGlB,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;;CAI1C,MAAMC,cAAsB,iBAAG;;;eAGpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,gBAAwB,iBAAG;;eAEtB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;AAW1C,QAAO;EACL;EACA;EACA;EACA,aAV0B,iBAAG;;eAEpB,MAAM,KAAK,OAAO,KAAK,UAAU;yBACvB,MAAM,KAAK,QAAQ,KAAK;;EAQ3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAS,CAAC;AAExD,mCAAe"}
+{"version":3,"file":"KeyValueInput.styles.cjs","names":["container: string","label: string","requiredIndicator: string","pairsList: string","pairRow: string","pairInput: string","addRow: string","removeButton: string","addButton: string","helperText: string","emptyState: string","readOnlyPair: string","readOnlyKey: string","readOnlyValue: string"],"sources":["../../../../../src/components/primitives/KeyValueInput/KeyValueInput.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 KeyValueInput 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 readOnly - Whether the component is read-only\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  disabled: boolean,\n  readOnly: boolean,\n  hasError: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      font-family: ${theme.vars.typography.fontFamily};\n      gap: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const label: string = css`\n      font-size: 0.875rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.primary};\n      margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const requiredIndicator: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const pairsList: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} / 4);\n    `;\n\n    const pairRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      border-radius: ${theme.vars.borderRadius.small};\n      background-color: transparent;\n      border: none;\n\n      &:hover {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n    `;\n\n    const pairInput: string = css`\n      flex: 1;\n      min-width: 0;\n    `;\n\n    const addRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      background-color: transparent;\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const removeButton: string = css`\n      min-width: auto;\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      background-color: transparent;\n      color: ${theme.vars.colors.text.secondary};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.action.hover};\n        color: ${theme.vars.colors.error.main};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const addButton: string = css`\n      min-width: auto;\n      width: 24px;\n      height: 24px;\n      padding: 0;\n      background-color: transparent;\n      color: ${theme.vars.colors.primary.main};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const helperText: string = css`\n      font-size: 0.75rem;\n      color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    const emptyState: string = css`\n      padding: ${theme.vars.spacing.unit};\n      text-align: center;\n      color: ${theme.vars.colors.text.secondary};\n      font-style: italic;\n      font-size: 0.75rem;\n    `;\n\n    const readOnlyPair: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} / 2);\n      padding: calc(${theme.vars.spacing.unit} / 4) 0;\n      min-height: 20px;\n    `;\n\n    const readOnlyKey: string = css`\n      font-size: 0.75rem;\n      font-weight: 500;\n      color: ${theme.vars.colors.text.secondary};\n      min-width: 80px;\n      flex-shrink: 0;\n    `;\n\n    const readOnlyValue: string = css`\n      font-size: 0.75rem;\n      color: ${theme.vars.colors.text.primary};\n      word-break: break-word;\n      flex: 1;\n    `;\n\n    const counterText: string = css`\n      font-size: 0.75rem;\n      color: ${theme.vars.colors.text.secondary};\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n    `;\n\n    return {\n      addButton,\n      addRow,\n      container,\n      counterText,\n      emptyState,\n      helperText,\n      label,\n      pairInput,\n      pairRow,\n      pairsList,\n      readOnlyKey,\n      readOnlyPair,\n      readOnlyValue,\n      removeButton,\n      requiredIndicator,\n    };\n  }, [theme, colorScheme, disabled, readOnly, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,MAAM,aACJ,OACA,aACA,UACA,UACA,sCAEc;CACZ,MAAMA,YAAoB,mBAAG;;;qBAGZ,MAAM,KAAK,WAAW,WAAW;kBACpC,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,QAAgB,mBAAG;;;eAGd,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,oBAA4B,mBAAG;eAC1B,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,YAAoB,mBAAG;;;kBAGf,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,UAAkB,mBAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;uBACvB,MAAM,KAAK,aAAa,MAAM;;;;;4BAKzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;CAIvD,MAAMC,YAAoB,mBAAG;;;;CAK7B,MAAMC,SAAiB,mBAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;yBAE5B,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,eAAuB,mBAAG;;;;;;eAMrB,MAAM,KAAK,OAAO,KAAK,UAAU;;uBAEzB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,OAAO,MAAM;iBAC1C,MAAM,KAAK,OAAO,MAAM,KAAK;;;;;;;CAQ1C,MAAMC,YAAoB,mBAAG;;;;;;eAMlB,MAAM,KAAK,OAAO,QAAQ,KAAK;;uBAEvB,MAAM,KAAK,aAAa,MAAM;;;;gBAIrC,WAAW,gBAAgB,UAAU;;;4BAGzB,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;;;;;CAQpD,MAAMC,aAAqB,mBAAG;;eAEnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,KAAK,UAAU;yBACjE,MAAM,KAAK,QAAQ,KAAK;;CAG7C,MAAMC,aAAqB,mBAAG;iBACjB,MAAM,KAAK,QAAQ,KAAK;;eAE1B,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,eAAuB,mBAAG;;;kBAGlB,MAAM,KAAK,QAAQ,KAAK;sBACpB,MAAM,KAAK,QAAQ,KAAK;;;CAI1C,MAAMC,cAAsB,mBAAG;;;eAGpB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,gBAAwB,mBAAG;;eAEtB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;AAW1C,QAAO;EACL;EACA;EACA;EACA,aAV0B,mBAAG;;eAEpB,MAAM,KAAK,OAAO,KAAK,UAAU;yBACvB,MAAM,KAAK,QAAQ,KAAK;;EAQ3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAS,CAAC;AAExD,mCAAe"}

package/dist/cjs/components/primitives/Logo/Logo.cjs

@@ -1,12 +1,11 @@
 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_Logo_styles = require('./Logo.styles.cjs');
 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/Logo/Logo.tsx
 /**
@@ -28,14 +27,14 @@ const Logo = ({ className, src, alt, title, size = "medium" }) => {
 		role: "img",
 		"aria-label": logoAlt,
 		title: logoTitle,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo", size)), styles["emoji"], styles["emojiSize"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo", size)), styles["emoji"], styles["emojiSize"], className),
 		children: resolvedLogo.glyph
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
 		src: resolvedLogo.imgSrc,
 		alt: logoAlt,
 		title: logoTitle,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo", size)), styles["logo"], styles["size"], className)
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("logo", size)), styles["logo"], styles["size"], className)
 	});
 };
 var Logo_default = Logo;

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

@@ -1 +1 @@
-{"version":3,"file":"Logo.cjs","names":["Logo: FC<LogoProps>","useTheme","styles: Record<string, string>","useStyles","logoConfig: Record<string, string> | undefined","logoSpec: string | undefined","logoAlt: string","logoTitle: string | undefined","resolvedLogo: ResolvedLogo"],"sources":["../../../../../src/components/primitives/Logo/Logo.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Logo.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Logo component.\n */\nexport interface LogoProps {\n  /**\n   * Custom alt text for the logo.\n   */\n  alt?: string;\n  /**\n   * Custom CSS class name for the logo.\n   */\n  className?: string;\n  /**\n   * Size of the logo.\n   */\n  size?: LogoSize;\n  /**\n   * Custom logo URL to override theme logo.\n   */\n  src?: string;\n  /**\n   * Custom title for the logo.\n   */\n  title?: string;\n}\n\n/**\n * Logo component that displays the brand logo from theme or custom source.\n *\n * @param props - The props for the Logo component.\n * @returns The rendered Logo component.\n */\nconst Logo: FC<LogoProps> = ({className, src, alt, title, size = 'medium'}: LogoProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size);\n\n  const logoConfig: Record<string, string> | undefined = theme.images?.logo as Record<string, string> | undefined;\n\n  const logoSpec: string | undefined = src || logoConfig?.['url'];\n\n  const logoAlt: string = alt || logoConfig?.['alt'] || 'Logo';\n\n  const logoTitle: string | undefined = title || logoConfig?.['title'];\n\n  if (!logoSpec) {\n    return null;\n  }\n\n  const resolvedLogo: ResolvedLogo = resolveLogoUri(logoSpec, logoAlt);\n\n  if (resolvedLogo.kind === 'emoji') {\n    return (\n      <span\n        role=\"img\"\n        aria-label={logoAlt}\n        title={logoTitle}\n        className={cx(\n          withVendorCSSClassPrefix(bem('logo')),\n          withVendorCSSClassPrefix(bem('logo', size)),\n          styles['emoji'],\n          styles['emojiSize'],\n          className,\n        )}\n      >\n        {resolvedLogo.glyph}\n      </span>\n    );\n  }\n\n  return (\n    <img\n      src={resolvedLogo.imgSrc}\n      alt={logoAlt}\n      title={logoTitle}\n      className={cx(\n        withVendorCSSClassPrefix(bem('logo')),\n        withVendorCSSClassPrefix(bem('logo', size)),\n        styles['logo'],\n        styles['size'],\n        className,\n      )}\n    />\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;;;;;;;;AA2CA,MAAMA,QAAuB,EAAC,WAAW,KAAK,KAAK,OAAO,OAAO,eAAyB;CACxF,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,4BAAU,OAAO,aAAa,KAAK;CAE1E,MAAMC,aAAiD,MAAM,QAAQ;CAErE,MAAMC,WAA+B,OAAO,aAAa;CAEzD,MAAMC,UAAkB,OAAO,aAAa,UAAU;CAEtD,MAAMC,YAAgC,SAAS,aAAa;AAE5D,KAAI,CAAC,SACH,QAAO;CAGT,MAAMC,uDAA4C,UAAU,QAAQ;AAEpE,KAAI,aAAa,SAAS,QACxB,QACE,2CAAC;EACC,MAAK;EACL,cAAY;EACZ,OAAO;EACP,gHAC+B,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,UACP,OAAO,cACP,UACD;YAEA,aAAa;GACT;AAIX,QACE,2CAAC;EACC,KAAK,aAAa;EAClB,KAAK;EACL,OAAO;EACP,gHAC+B,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,SACP,OAAO,SACP,UACD;GACD;;AAIN,mBAAe"}
+{"version":3,"file":"Logo.cjs","names":["Logo: FC<LogoProps>","useTheme","styles: Record<string, string>","useStyles","logoConfig: Record<string, string> | undefined","logoSpec: string | undefined","logoAlt: string","logoTitle: string | undefined","resolvedLogo: ResolvedLogo","cx"],"sources":["../../../../../src/components/primitives/Logo/Logo.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem, resolveLogoUri, ResolvedLogo} from '@thunderid/browser';\nimport {FC} from 'react';\nimport useStyles from './Logo.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\nexport type LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Props for the Logo component.\n */\nexport interface LogoProps {\n  /**\n   * Custom alt text for the logo.\n   */\n  alt?: string;\n  /**\n   * Custom CSS class name for the logo.\n   */\n  className?: string;\n  /**\n   * Size of the logo.\n   */\n  size?: LogoSize;\n  /**\n   * Custom logo URL to override theme logo.\n   */\n  src?: string;\n  /**\n   * Custom title for the logo.\n   */\n  title?: string;\n}\n\n/**\n * Logo component that displays the brand logo from theme or custom source.\n *\n * @param props - The props for the Logo component.\n * @returns The rendered Logo component.\n */\nconst Logo: FC<LogoProps> = ({className, src, alt, title, size = 'medium'}: LogoProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, size);\n\n  const logoConfig: Record<string, string> | undefined = theme.images?.logo as Record<string, string> | undefined;\n\n  const logoSpec: string | undefined = src || logoConfig?.['url'];\n\n  const logoAlt: string = alt || logoConfig?.['alt'] || 'Logo';\n\n  const logoTitle: string | undefined = title || logoConfig?.['title'];\n\n  if (!logoSpec) {\n    return null;\n  }\n\n  const resolvedLogo: ResolvedLogo = resolveLogoUri(logoSpec, logoAlt);\n\n  if (resolvedLogo.kind === 'emoji') {\n    return (\n      <span\n        role=\"img\"\n        aria-label={logoAlt}\n        title={logoTitle}\n        className={cx(\n          withVendorCSSClassPrefix(bem('logo')),\n          withVendorCSSClassPrefix(bem('logo', size)),\n          styles['emoji'],\n          styles['emojiSize'],\n          className,\n        )}\n      >\n        {resolvedLogo.glyph}\n      </span>\n    );\n  }\n\n  return (\n    <img\n      src={resolvedLogo.imgSrc}\n      alt={logoAlt}\n      title={logoTitle}\n      className={cx(\n        withVendorCSSClassPrefix(bem('logo')),\n        withVendorCSSClassPrefix(bem('logo', size)),\n        styles['logo'],\n        styles['size'],\n        className,\n      )}\n    />\n  );\n};\n\nexport default Logo;\n"],"mappings":";;;;;;;;;;;;;;;;AA2CA,MAAMA,QAAuB,EAAC,WAAW,KAAK,KAAK,OAAO,OAAO,eAAyB;CACxF,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,4BAAU,OAAO,aAAa,KAAK;CAE1E,MAAMC,aAAiD,MAAM,QAAQ;CAErE,MAAMC,WAA+B,OAAO,aAAa;CAEzD,MAAMC,UAAkB,OAAO,aAAa,UAAU;CAEtD,MAAMC,YAAgC,SAAS,aAAa;AAE5D,KAAI,CAAC,SACH,QAAO;CAGT,MAAMC,uDAA4C,UAAU,QAAQ;AAEpE,KAAI,aAAa,SAAS,QACxB,QACE,2CAAC;EACC,MAAK;EACL,cAAY;EACZ,OAAO;EACP,WAAWC,kGACoB,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,UACP,OAAO,cACP,UACD;YAEA,aAAa;GACT;AAIX,QACE,2CAAC;EACC,KAAK,aAAa;EAClB,KAAK;EACL,OAAO;EACP,WAAWA,kGACoB,OAAO,CAAC,iFACR,QAAQ,KAAK,CAAC,EAC3C,OAAO,SACP,OAAO,SACP,UACD;GACD;;AAIN,mBAAe"}

package/dist/cjs/components/primitives/Logo/Logo.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/Logo/Logo.styles.ts
 /**
@@ -13,20 +12,20 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, size) => (0, react.useMemo)(() => {
-	const baseLogo = __emotion_css.css`
+	const baseLogo = require_emotion.css`
       width: auto;
       object-fit: contain;
       display: block;
     `;
-	const smallLogo = __emotion_css.css`
+	const smallLogo = require_emotion.css`
       height: 32px;
       max-width: 120px;
     `;
-	const mediumLogo = __emotion_css.css`
+	const mediumLogo = require_emotion.css`
       height: 48px;
       max-width: 180px;
     `;
-	const largeLogo = __emotion_css.css`
+	const largeLogo = require_emotion.css`
       height: 64px;
       max-width: 240px;
     `;
@@ -36,24 +35,24 @@ const useStyles = (theme, colorScheme, size) => (0, react.useMemo)(() => {
 		small: smallLogo
 	};
 	return {
-		emoji: __emotion_css.css`
+		emoji: require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: center;
       line-height: 1;
     `,
 		emojiSize: {
-			large: __emotion_css.css`
+			large: require_emotion.css`
         width: 64px;
         height: 64px;
         font-size: 36px;
       `,
-			medium: __emotion_css.css`
+			medium: require_emotion.css`
         width: 48px;
         height: 48px;
         font-size: 28px;
       `,
-			small: __emotion_css.css`
+			small: require_emotion.css`
         width: 32px;
         height: 32px;
         font-size: 20px;

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

@@ -1 +1 @@
-{"version":3,"file":"Logo.styles.cjs","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string","sizeStyles: Record<string, string>"],"sources":["../../../../../src/components/primitives/Logo/Logo.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 LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo 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 logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    const baseEmoji: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n    `;\n\n    const emojiSizeStyles: Record<LogoSize, string> = {\n      large: css`\n        width: 64px;\n        height: 64px;\n        font-size: 36px;\n      `,\n      medium: css`\n        width: 48px;\n        height: 48px;\n        font-size: 28px;\n      `,\n      small: css`\n        width: 32px;\n        height: 32px;\n        font-size: 20px;\n      `,\n    };\n\n    return {\n      emoji: baseEmoji,\n      emojiSize: emojiSizeStyles[size],\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,aAAa,OAAc,aAAqB,kCACtC;CACZ,MAAMA,WAAmB,iBAAG;;;;;CAM5B,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,aAAqB,iBAAG;;;;CAK9B,MAAMC,YAAoB,iBAAG;;;;CAK7B,MAAMC,aAAqC;EACzC,OAAO;EACP,QAAQ;EACR,OAAO;EACR;AA2BD,QAAO;EACL,OA1BwB,iBAAG;;;;;;EA2B3B,WApBgD;GAChD,OAAO,iBAAG;;;;;GAKV,QAAQ,iBAAG;;;;;GAKX,OAAO,iBAAG;;;;;GAKX,CAI4B;EAC3B,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAAM,WAAW;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}
+{"version":3,"file":"Logo.styles.cjs","names":["baseLogo: string","smallLogo: string","mediumLogo: string","largeLogo: string","sizeStyles: Record<string, string>"],"sources":["../../../../../src/components/primitives/Logo/Logo.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 LogoSize = 'small' | 'medium' | 'large';\n\n/**\n * Creates styles for the Logo 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 logo\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: LogoSize): Record<string, string> =>\n  useMemo(() => {\n    const baseLogo: string = css`\n      width: auto;\n      object-fit: contain;\n      display: block;\n    `;\n\n    const smallLogo: string = css`\n      height: 32px;\n      max-width: 120px;\n    `;\n\n    const mediumLogo: string = css`\n      height: 48px;\n      max-width: 180px;\n    `;\n\n    const largeLogo: string = css`\n      height: 64px;\n      max-width: 240px;\n    `;\n\n    const sizeStyles: Record<string, string> = {\n      large: largeLogo,\n      medium: mediumLogo,\n      small: smallLogo,\n    };\n\n    const baseEmoji: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      line-height: 1;\n    `;\n\n    const emojiSizeStyles: Record<LogoSize, string> = {\n      large: css`\n        width: 64px;\n        height: 64px;\n        font-size: 36px;\n      `,\n      medium: css`\n        width: 48px;\n        height: 48px;\n        font-size: 28px;\n      `,\n      small: css`\n        width: 32px;\n        height: 32px;\n        font-size: 20px;\n      `,\n    };\n\n    return {\n      emoji: baseEmoji,\n      emojiSize: emojiSizeStyles[size],\n      large: largeLogo,\n      logo: baseLogo,\n      medium: mediumLogo,\n      size: sizeStyles[size],\n      small: smallLogo,\n    };\n  }, [theme, colorScheme, size]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,aAAa,OAAc,aAAqB,kCACtC;CACZ,MAAMA,WAAmB,mBAAG;;;;;CAM5B,MAAMC,YAAoB,mBAAG;;;;CAK7B,MAAMC,aAAqB,mBAAG;;;;CAK9B,MAAMC,YAAoB,mBAAG;;;;CAK7B,MAAMC,aAAqC;EACzC,OAAO;EACP,QAAQ;EACR,OAAO;EACR;AA2BD,QAAO;EACL,OA1BwB,mBAAG;;;;;;EA2B3B,WApBgD;GAChD,OAAO,mBAAG;;;;;GAKV,QAAQ,mBAAG;;;;;GAKX,OAAO,mBAAG;;;;;GAKX,CAI4B;EAC3B,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAAM,WAAW;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}

package/dist/cjs/components/primitives/MultiInput/MultiInput.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');
@@ -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/MultiInput/MultiInput.tsx
 const MultiInput = ({ label, error, required, className, disabled, helperText, placeholder = "Enter value", values = [], onChange, type = "text", fieldType = "STRING", startIcon, endIcon, minFields = 1, maxFields, style = {} }) => {
@@ -25,14 +24,14 @@ const MultiInput = ({ label, error, required, className, disabled, helperText, p
 		width: "16",
 		height: "16",
 		viewBox: "0 0 24 24",
-		className: (0, __emotion_css.cx)(styles["icon"], iconClassName),
+		className: require_emotion.cx(styles["icon"], iconClassName),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14M5 12h14" })
 	});
 	const BinIcon = ({ iconClassName }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 		width: "16",
 		height: "16",
 		viewBox: "0 0 24 24",
-		className: (0, __emotion_css.cx)(styles["icon"], iconClassName),
+		className: require_emotion.cx(styles["icon"], iconClassName),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6" })
 	});
 	const handleAddValue = (0, react.useCallback)((newValue) => {
@@ -101,32 +100,32 @@ const MultiInput = ({ label, error, required, className, disabled, helperText, p
 	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)("multi-input")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input")), className),
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
 			required,
 			error: !!error,
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "container")), styles["container"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "container")), styles["container"]),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "input-row")), styles["inputRow"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "input-row")), styles["inputRow"]),
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "input-wrapper")), styles["inputWrapper"]),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "input-wrapper")), styles["inputWrapper"]),
 					children: renderInputField(currentInputValue, setCurrentInputValue, canAddMore ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, { iconClassName: styles["plusIcon"] }) : void 0, canAddMore ? handleInputSubmit : void 0)
 				})
 			}), values.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-container")), styles["listContainer"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-container")), styles["listContainer"]),
 				children: values.map((value, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-item")), styles["listItem"]),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-item")), styles["listItem"]),
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-item-text")), styles["listItemText"]),
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "list-item-text")), styles["listItemText"]),
 						children: value
 					}), canRemove && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						onClick: () => handleRemoveValue(index),
 						disabled,
-						className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "remove-button")), styles["removeButton"]),
+						className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("multi-input", "remove-button")), styles["removeButton"]),
 						title: "Remove value",
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BinIcon, { iconClassName: styles["icon"] })
 					})]

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

@@ -1 +1 @@
-{"version":3,"file":"MultiInput.cjs","names":["MultiInput: FC<MultiInputProps>","useTheme","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","BinIcon: FC<IconProps>","handleAddValue: ReturnType<typeof useCallback>","handleRemoveValue: ReturnType<typeof useCallback>","renderInputField: ReturnType<typeof useCallback>","commonProps: Record<string, unknown>","DatePicker","Checkbox","TextField","handleInputSubmit: ReturnType<typeof useCallback>","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.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 {CSSProperties, FC, KeyboardEvent, ReactElement, ReactNode, useCallback, useState} from 'react';\nimport useStyles from './MultiInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Checkbox from '../Checkbox/Checkbox';\nimport DatePicker from '../DatePicker/DatePicker';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\nimport TextField from '../TextField/TextField';\n\nexport type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\nexport interface MultiInputProps {\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 each input (in addition to add/remove buttons)\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the inputs\n   */\n  error?: string;\n  /**\n   * Field type for different input components\n   */\n  fieldType?: MultiInputFieldType;\n  /**\n   * Helper text to display below the inputs\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the inputs\n   */\n  label?: string;\n  /**\n   * Maximum number of fields to allow (default: unlimited)\n   */\n  maxFields?: number;\n  /**\n   * Minimum number of fields to show (default: 1)\n   */\n  minFields?: number;\n  /**\n   * Callback when values change\n   */\n  onChange: (values: string[]) => void;\n  /**\n   * Placeholder text for input fields\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of each input\n   */\n  startIcon?: ReactNode;\n  /**\n   * Custom style object\n   */\n  style?: CSSProperties;\n  /**\n   * Input type\n   */\n  type?: MultiInputType;\n  /**\n   * Array of values\n   */\n  values: string[];\n}\n\ninterface IconProps {\n  iconClassName?: string;\n}\n\nconst MultiInput: FC<MultiInputProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  placeholder = 'Enter value',\n  values = [],\n  onChange,\n  type = 'text',\n  fieldType = 'STRING',\n  startIcon,\n  endIcon,\n  minFields = 1,\n  maxFields,\n  style = {},\n}: MultiInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const canAddMore: boolean = !maxFields || values.length < maxFields;\n  const canRemove: boolean = values.length > minFields;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);\n\n  const PlusIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n\n  const BinIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6\" />\n    </svg>\n  );\n\n  const handleAddValue: ReturnType<typeof useCallback> = useCallback(\n    (newValue: string) => {\n      if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {\n        onChange([...values, newValue.trim()]);\n      }\n    },\n    [values, onChange, maxFields],\n  );\n\n  const handleRemoveValue: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      if (values.length > minFields) {\n        const updatedValues: string[] = values.filter((_: string, i: number) => i !== index);\n        onChange(updatedValues);\n      }\n    },\n    [values, onChange, minFields],\n  );\n\n  const renderInputField: ReturnType<typeof useCallback> = useCallback(\n    (\n      value: string,\n      onValueChange: (value: string) => void,\n      attachedEndIcon?: ReactNode,\n      onEndIconClick?: () => void,\n    ): ReactElement => {\n      const handleInputChange = (e: any): void => {\n        const newValue: string = e.target ? e.target.value : e;\n        onValueChange(newValue);\n      };\n\n      const handleKeyDown = (e: KeyboardEvent): void => {\n        if (e.key === 'Enter' && onEndIconClick) {\n          e.preventDefault();\n          onEndIconClick();\n        }\n      };\n\n      const finalEndIcon: ReactNode = attachedEndIcon || endIcon;\n\n      const commonProps: Record<string, unknown> = {\n        disabled,\n        endIcon: finalEndIcon,\n        error,\n        onChange: handleInputChange,\n        onEndIconClick,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        startIcon,\n        value,\n      };\n\n      switch (fieldType) {\n        case 'DATE_TIME':\n          return <DatePicker {...commonProps} />;\n        case 'BOOLEAN':\n          return (\n            <Checkbox\n              {...commonProps}\n              checked={value === 'true' || Boolean(value)}\n              onChange={(e: any): void => onValueChange(e.target.checked ? 'true' : 'false')}\n            />\n          );\n        default:\n          return <TextField {...commonProps} type={type} />;\n      }\n    },\n    [placeholder, disabled, startIcon, endIcon, error, fieldType, type],\n  );\n\n  // State for the current input value\n  const [currentInputValue, setCurrentInputValue] = useState('');\n\n  const handleInputSubmit: ReturnType<typeof useCallback> = useCallback((): void => {\n    if (currentInputValue.trim() !== '') {\n      handleAddValue(currentInputValue);\n      setCurrentInputValue('');\n    }\n  }, [currentInputValue, handleAddValue]);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('multi-input')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'container')), styles['container'])}>\n        {/* Input field at the top */}\n        <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-row')), styles['inputRow'])}>\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-wrapper')), styles['inputWrapper'])}>\n            {renderInputField(\n              currentInputValue,\n              setCurrentInputValue,\n              canAddMore ? <PlusIcon iconClassName={styles['plusIcon']} /> : undefined,\n              canAddMore ? handleInputSubmit : undefined,\n            )}\n          </div>\n        </div>\n\n        {/* List of added items */}\n        {values.length > 0 && (\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-container')), styles['listContainer'])}>\n            {values.map((value: string, index: number) => (\n              <div\n                key={index}\n                className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item')), styles['listItem'])}\n              >\n                <span\n                  className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item-text')), styles['listItemText'])}\n                >\n                  {value}\n                </span>\n                {canRemove && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemoveValue(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('multi-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    title=\"Remove value\"\n                  >\n                    <BinIcon iconClassName={styles['icon']} />\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default MultiInput;\n"],"mappings":"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"}
+{"version":3,"file":"MultiInput.cjs","names":["MultiInput: FC<MultiInputProps>","useTheme","canAddMore: boolean","canRemove: boolean","styles: Record<string, string>","useStyles","PlusIcon: FC<IconProps>","cx","BinIcon: FC<IconProps>","handleAddValue: ReturnType<typeof useCallback>","handleRemoveValue: ReturnType<typeof useCallback>","renderInputField: ReturnType<typeof useCallback>","commonProps: Record<string, unknown>","DatePicker","Checkbox","TextField","handleInputSubmit: ReturnType<typeof useCallback>","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {CSSProperties, FC, KeyboardEvent, ReactElement, ReactNode, useCallback, useState} from 'react';\nimport useStyles from './MultiInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Checkbox from '../Checkbox/Checkbox';\nimport DatePicker from '../DatePicker/DatePicker';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\nimport TextField from '../TextField/TextField';\n\nexport type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\nexport interface MultiInputProps {\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 each input (in addition to add/remove buttons)\n   */\n  endIcon?: ReactNode;\n  /**\n   * Error message to display below the inputs\n   */\n  error?: string;\n  /**\n   * Field type for different input components\n   */\n  fieldType?: MultiInputFieldType;\n  /**\n   * Helper text to display below the inputs\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the inputs\n   */\n  label?: string;\n  /**\n   * Maximum number of fields to allow (default: unlimited)\n   */\n  maxFields?: number;\n  /**\n   * Minimum number of fields to show (default: 1)\n   */\n  minFields?: number;\n  /**\n   * Callback when values change\n   */\n  onChange: (values: string[]) => void;\n  /**\n   * Placeholder text for input fields\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Icon to display at the start (left) of each input\n   */\n  startIcon?: ReactNode;\n  /**\n   * Custom style object\n   */\n  style?: CSSProperties;\n  /**\n   * Input type\n   */\n  type?: MultiInputType;\n  /**\n   * Array of values\n   */\n  values: string[];\n}\n\ninterface IconProps {\n  iconClassName?: string;\n}\n\nconst MultiInput: FC<MultiInputProps> = ({\n  label,\n  error,\n  required,\n  className,\n  disabled,\n  helperText,\n  placeholder = 'Enter value',\n  values = [],\n  onChange,\n  type = 'text',\n  fieldType = 'STRING',\n  startIcon,\n  endIcon,\n  minFields = 1,\n  maxFields,\n  style = {},\n}: MultiInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const canAddMore: boolean = !maxFields || values.length < maxFields;\n  const canRemove: boolean = values.length > minFields;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, canAddMore, canRemove);\n\n  const PlusIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M12 5v14M5 12h14\" />\n    </svg>\n  );\n\n  const BinIcon: FC<IconProps> = ({iconClassName}: IconProps): ReactElement => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" className={cx(styles['icon'], iconClassName)}>\n      <path d=\"M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2m3 0v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6\" />\n    </svg>\n  );\n\n  const handleAddValue: ReturnType<typeof useCallback> = useCallback(\n    (newValue: string) => {\n      if (newValue.trim() !== '' && (!maxFields || values.length < maxFields)) {\n        onChange([...values, newValue.trim()]);\n      }\n    },\n    [values, onChange, maxFields],\n  );\n\n  const handleRemoveValue: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      if (values.length > minFields) {\n        const updatedValues: string[] = values.filter((_: string, i: number) => i !== index);\n        onChange(updatedValues);\n      }\n    },\n    [values, onChange, minFields],\n  );\n\n  const renderInputField: ReturnType<typeof useCallback> = useCallback(\n    (\n      value: string,\n      onValueChange: (value: string) => void,\n      attachedEndIcon?: ReactNode,\n      onEndIconClick?: () => void,\n    ): ReactElement => {\n      const handleInputChange = (e: any): void => {\n        const newValue: string = e.target ? e.target.value : e;\n        onValueChange(newValue);\n      };\n\n      const handleKeyDown = (e: KeyboardEvent): void => {\n        if (e.key === 'Enter' && onEndIconClick) {\n          e.preventDefault();\n          onEndIconClick();\n        }\n      };\n\n      const finalEndIcon: ReactNode = attachedEndIcon || endIcon;\n\n      const commonProps: Record<string, unknown> = {\n        disabled,\n        endIcon: finalEndIcon,\n        error,\n        onChange: handleInputChange,\n        onEndIconClick,\n        onKeyDown: handleKeyDown,\n        placeholder,\n        startIcon,\n        value,\n      };\n\n      switch (fieldType) {\n        case 'DATE_TIME':\n          return <DatePicker {...commonProps} />;\n        case 'BOOLEAN':\n          return (\n            <Checkbox\n              {...commonProps}\n              checked={value === 'true' || Boolean(value)}\n              onChange={(e: any): void => onValueChange(e.target.checked ? 'true' : 'false')}\n            />\n          );\n        default:\n          return <TextField {...commonProps} type={type} />;\n      }\n    },\n    [placeholder, disabled, startIcon, endIcon, error, fieldType, type],\n  );\n\n  // State for the current input value\n  const [currentInputValue, setCurrentInputValue] = useState('');\n\n  const handleInputSubmit: ReturnType<typeof useCallback> = useCallback((): void => {\n    if (currentInputValue.trim() !== '') {\n      handleAddValue(currentInputValue);\n      setCurrentInputValue('');\n    }\n  }, [currentInputValue, handleAddValue]);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('multi-input')), className)}\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'container')), styles['container'])}>\n        {/* Input field at the top */}\n        <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-row')), styles['inputRow'])}>\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'input-wrapper')), styles['inputWrapper'])}>\n            {renderInputField(\n              currentInputValue,\n              setCurrentInputValue,\n              canAddMore ? <PlusIcon iconClassName={styles['plusIcon']} /> : undefined,\n              canAddMore ? handleInputSubmit : undefined,\n            )}\n          </div>\n        </div>\n\n        {/* List of added items */}\n        {values.length > 0 && (\n          <div className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-container')), styles['listContainer'])}>\n            {values.map((value: string, index: number) => (\n              <div\n                key={index}\n                className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item')), styles['listItem'])}\n              >\n                <span\n                  className={cx(withVendorCSSClassPrefix(bem('multi-input', 'list-item-text')), styles['listItemText'])}\n                >\n                  {value}\n                </span>\n                {canRemove && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemoveValue(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('multi-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    title=\"Remove value\"\n                  >\n                    <BinIcon iconClassName={styles['icon']} />\n                  </button>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default MultiInput;\n"],"mappings":"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"}

package/dist/cjs/components/primitives/MultiInput/MultiInput.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/MultiInput/MultiInput.styles.ts
 /**
@@ -16,32 +15,32 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, disabled, hasError, canAddMore, canRemove) => (0, react.useMemo)(() => {
-	const container = __emotion_css.css`
+	const container = require_emotion.css`
       display: flex;
       flex-direction: column;
       gap: ${theme.vars.spacing.unit};
     `;
-	const inputRow = __emotion_css.css`
+	const inputRow = require_emotion.css`
       display: flex;
       align-items: center;
       gap: ${theme.vars.spacing.unit};
       position: relative;
     `;
-	const inputWrapper = __emotion_css.css`
+	const inputWrapper = require_emotion.css`
       flex: 1;
     `;
-	const plusIcon = __emotion_css.css`
+	const plusIcon = require_emotion.css`
       background: ${theme.vars.colors.secondary.main};
       border-radius: 50%;
       outline: 4px ${theme.vars.colors.secondary.main} auto;
       color: ${theme.vars.colors.secondary.contrastText};
     `;
-	const listContainer = __emotion_css.css`
+	const listContainer = require_emotion.css`
       display: flex;
       flex-direction: column;
       gap: 0;
     `;
-	const listItem = __emotion_css.css`
+	const listItem = require_emotion.css`
       display: flex;
       align-items: center;
       justify-content: space-between;
@@ -57,11 +56,11 @@ const useStyles = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
         margin-bottom: 0;
       }
     `;
-	const listItemText = __emotion_css.css`
+	const listItemText = require_emotion.css`
       flex: 1;
       word-break: break-word;
     `;
-	const removeButton = __emotion_css.css`
+	const removeButton = require_emotion.css`
       padding: calc(${theme.vars.spacing.unit} / 2);
       min-width: auto;
       color: ${theme.vars.colors.error.main};
@@ -83,7 +82,7 @@ const useStyles = (theme, colorScheme, disabled, hasError, canAddMore, canRemove
     `;
 	return {
 		container,
-		icon: __emotion_css.css`
+		icon: require_emotion.css`
       width: 16px;
       height: 16px;
       stroke: currentColor;

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

@@ -1 +1 @@
-{"version":3,"file":"MultiInput.styles.cjs","names":["container: string","inputRow: string","inputWrapper: string","plusIcon: string","listContainer: string","listItem: string","listItemText: string","removeButton: string"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.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 MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\n/**\n * Creates styles for the MultiInput 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 canAddMore - Whether more items can be added\n * @param canRemove - Whether items can be removed\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  canAddMore: boolean,\n  canRemove: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const inputRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      position: relative;\n    `;\n\n    const inputWrapper: string = css`\n      flex: 1;\n    `;\n\n    const plusIcon: string = css`\n      background: ${theme.vars.colors.secondary.main};\n      border-radius: 50%;\n      outline: 4px ${theme.vars.colors.secondary.main} auto;\n      color: ${theme.vars.colors.secondary.contrastText};\n    `;\n\n    const listContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    `;\n\n    const listItem: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      background-color: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.medium};\n      font-size: 1rem;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n\n      &:last-child {\n        margin-bottom: 0;\n      }\n    `;\n\n    const listItemText: string = css`\n      flex: 1;\n      word-break: break-word;\n    `;\n\n    const removeButton: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      min-width: auto;\n      color: ${theme.vars.colors.error.main};\n      background: transparent;\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const icon: string = css`\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      fill: none;\n    `;\n\n    return {\n      container,\n      icon,\n      inputRow,\n      inputWrapper,\n      listContainer,\n      listItem,\n      listItemText,\n      plusIcon,\n      removeButton,\n    };\n  }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,UACA,UACA,YACA,uCAEc;CACZ,MAAMA,YAAoB,iBAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,iBAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,iBAAG;;;CAIhC,MAAMC,WAAmB,iBAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,iBAAG;;;;;CAMjC,MAAMC,WAAmB,iBAAG;;;;iBAIf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;;;;;CAOhD,MAAMC,eAAuB,iBAAG;;;;CAKhC,MAAMC,eAAuB,iBAAG;sBACd,MAAM,KAAK,QAAQ,KAAK;;eAE/B,MAAM,KAAK,OAAO,MAAM,KAAK;;;uBAGrB,MAAM,KAAK,aAAa,MAAM;gBACrC,WAAW,gBAAgB,UAAU;;;;;;4BAMzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;;;;;AAkBvD,QAAO;EACL;EACA,MAZmB,iBAAG;;;;;;;;;EAatB;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAY;CAAU,CAAC;AAErE,gCAAe"}
+{"version":3,"file":"MultiInput.styles.cjs","names":["container: string","inputRow: string","inputWrapper: string","plusIcon: string","listContainer: string","listItem: string","listItemText: string","removeButton: string"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.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 MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';\nexport type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';\n\n/**\n * Creates styles for the MultiInput 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 canAddMore - Whether more items can be added\n * @param canRemove - Whether items can be removed\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  canAddMore: boolean,\n  canRemove: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const container: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const inputRow: string = css`\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      position: relative;\n    `;\n\n    const inputWrapper: string = css`\n      flex: 1;\n    `;\n\n    const plusIcon: string = css`\n      background: ${theme.vars.colors.secondary.main};\n      border-radius: 50%;\n      outline: 4px ${theme.vars.colors.secondary.main} auto;\n      color: ${theme.vars.colors.secondary.contrastText};\n    `;\n\n    const listContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    `;\n\n    const listItem: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      background-color: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.medium};\n      font-size: 1rem;\n      font-family: ${theme.vars.typography.fontFamily};\n      color: ${theme.vars.colors.text.primary};\n      margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n\n      &:last-child {\n        margin-bottom: 0;\n      }\n    `;\n\n    const listItemText: string = css`\n      flex: 1;\n      word-break: break-word;\n    `;\n\n    const removeButton: string = css`\n      padding: calc(${theme.vars.spacing.unit} / 2);\n      min-width: auto;\n      color: ${theme.vars.colors.error.main};\n      background: transparent;\n      border: none;\n      border-radius: ${theme.vars.borderRadius.small};\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.action.hover};\n      }\n\n      &:disabled {\n        opacity: 0.6;\n      }\n    `;\n\n    const icon: string = css`\n      width: 16px;\n      height: 16px;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      fill: none;\n    `;\n\n    return {\n      container,\n      icon,\n      inputRow,\n      inputWrapper,\n      listContainer,\n      listItem,\n      listItemText,\n      plusIcon,\n      removeButton,\n    };\n  }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,UACA,UACA,YACA,uCAEc;CACZ,MAAMA,YAAoB,mBAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,mBAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,mBAAG;;;CAIhC,MAAMC,WAAmB,mBAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,mBAAG;;;;;CAMjC,MAAMC,WAAmB,mBAAG;;;;iBAIf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;;;;;CAOhD,MAAMC,eAAuB,mBAAG;;;;CAKhC,MAAMC,eAAuB,mBAAG;sBACd,MAAM,KAAK,QAAQ,KAAK;;eAE/B,MAAM,KAAK,OAAO,MAAM,KAAK;;;uBAGrB,MAAM,KAAK,aAAa,MAAM;gBACrC,WAAW,gBAAgB,UAAU;;;;;;4BAMzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;;;;;AAkBvD,QAAO;EACL;EACA,MAZmB,mBAAG;;;;;;;;;EAatB;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAY;CAAU,CAAC;AAErE,gCAAe"}

package/dist/cjs/components/primitives/OtpField/OtpField.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/OtpField/OtpField.tsx
 const OtpField = ({ label, error, className, required, disabled, helperText, length = 6, value = "", onChange, onComplete, type = "text", placeholder = "", style = {}, autoFocus = false, pattern }) => {
@@ -86,7 +85,7 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 	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)("otp-field")), className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field")), className),
 		helperTextAlign: "center",
 		style,
 		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
@@ -94,7 +93,7 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 			error: !!error,
 			children: label
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input-container")), styles["inputContainer"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input-container")), styles["inputContainer"]),
 			children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref: (el) => {
 					if (el) inputRefs.current[index] = el;
@@ -105,7 +104,7 @@ const OtpField = ({ label, error, className, required, disabled, helperText, len
 				onChange: (event) => handleChange(index, event),
 				onKeyDown: (event) => handleKeyDown(index, event),
 				onPaste: handlePaste,
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input")), styles["input"], {
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input")), styles["input"], {
 					[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input", "error"))]: !!error,
 					[styles["inputError"]]: !!error,
 					[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input", "disabled"))]: !!disabled,

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

@@ -1 +1 @@
-{"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.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 {\n  ClipboardEvent,\n  FC,\n  KeyboardEvent,\n  ChangeEvent,\n  MutableRefObject,\n  useRef,\n  useEffect,\n  useState,\n  CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\nexport interface OtpInputProps {\n  /**\n   * Auto focus the first input on mount\n   */\n  autoFocus?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the OTP input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the OTP input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the OTP input\n   */\n  label?: string;\n  /**\n   * Number of OTP input fields\n   */\n  length?: number;\n  /**\n   * Callback function called when OTP value changes\n   */\n  onChange?: (event: {target: {value: string}}) => void;\n  /**\n   * Callback function called when OTP input is complete\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * Pattern for numeric input validation\n   */\n  pattern?: string;\n  /**\n   * Placeholder character for each input field\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n  /**\n   * Type of input (text, number, password)\n   */\n  type?: OtpFieldType;\n  /**\n   * Current OTP value\n   */\n  value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  type = 'text',\n  placeholder = '',\n  style = {},\n  autoFocus = false,\n  pattern,\n}: OtpInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n  const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n  useEffect(() => {\n    inputRefs.current = inputRefs.current.slice(0, length);\n  }, [length]);\n\n  useEffect(() => {\n    if (value) {\n      const newOtp: string[] = value.split('').slice(0, length);\n      while (newOtp.length < length) {\n        newOtp.push('');\n      }\n      setOtp(newOtp);\n    } else {\n      setOtp(Array(length).fill(''));\n    }\n  }, [value, length]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n    const newValue: string = event.target.value;\n\n    if (newValue.length > 1) return;\n\n    if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n    const newOtp: string[] = [...otp];\n    newOtp[index] = newValue;\n    setOtp(newOtp);\n\n    const otpValue: string = newOtp.join('');\n\n    onChange?.({target: {value: otpValue}});\n\n    if (newValue && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(otpValue);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'Backspace') {\n      if (!otp[index] && index > 0) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index - 1] = '';\n        setOtp(newOtp);\n        inputRefs.current[index - 1]?.focus();\n        onChange?.({target: {value: newOtp.join('')}});\n      } else if (otp[index]) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index] = '';\n        setOtp(newOtp);\n        onChange?.({target: {value: newOtp.join('')}});\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    } else if (event.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n\n      if (otp.every((digit: string) => digit !== '') && onComplete) {\n        onComplete(otp.join(''));\n      }\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n    event.preventDefault();\n\n    const pastedData: string = event.clipboardData.getData('text').slice(0, length);\n\n    let validData = '';\n\n    Array.from(pastedData).forEach((char: string) => {\n      if (type === 'number' && !/^\\d$/.test(char)) return;\n      if (pattern && !new RegExp(pattern).test(char)) return;\n      validData += char;\n    });\n\n    const newOtp: string[] = Array(length).fill('');\n\n    for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n      newOtp[i] = validData[i];\n    }\n\n    setOtp(newOtp);\n    onChange?.({target: {value: newOtp.join('')}});\n\n    const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n    const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n    inputRefs.current[focusIndex]?.focus();\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(newOtp.join(''));\n    }\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n      helperTextAlign=\"center\"\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n        {Array.from({length}, (_: unknown, index: number) => (\n          <input\n            key={index}\n            ref={(el: HTMLInputElement | null): void => {\n              if (el) inputRefs.current[index] = el;\n            }}\n            type={type === 'password' ? 'password' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            value={otp[index] || ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n            onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n            onPaste={handlePaste}\n            className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n              [styles['inputError']]: !!error,\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n              [styles['inputDisabled']]: !!disabled,\n            })}\n            maxLength={1}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-label={`${label || 'OTP'} digit ${index + 1}`}\n            aria-invalid={!!error}\n            aria-required={required}\n            autoComplete=\"one-time-code\"\n          />\n        ))}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default OtpField;\n"],"mappings":";;;;;;;;;;;;;;;AAsFA,MAAMA,YAA+B,EACnC,OACA,OACA,WACA,UACA,UACA,YACA,SAAS,GACT,QAAQ,IACR,UACA,YACA,OAAO,QACP,cAAc,IACd,QAAQ,EAAE,EACV,YAAY,OACZ,cACmB;CACnB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,gCAAU,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,OAAO;CACjG,MAAM,CAAC,KAAK,8BAA6B,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC;CAChE,MAAMC,8BAA6E,EAAE,CAAC;AAEtF,4BAAgB;AACd,YAAU,UAAU,UAAU,QAAQ,MAAM,GAAG,OAAO;IACrD,CAAC,OAAO,CAAC;AAEZ,4BAAgB;AACd,MAAI,OAAO;GACT,MAAMC,SAAmB,MAAM,MAAM,GAAG,CAAC,MAAM,GAAG,OAAO;AACzD,UAAO,OAAO,SAAS,OACrB,QAAO,KAAK,GAAG;AAEjB,UAAO,OAAO;QAEd,QAAO,MAAM,OAAO,CAAC,KAAK,GAAG,CAAC;IAE/B,CAAC,OAAO,OAAO,CAAC;AAEnB,4BAAgB;AACd,MAAI,aAAa,UAAU,QAAQ,GACjC,WAAU,QAAQ,GAAG,OAAO;IAE7B,CAAC,UAAU,CAAC;CAEf,MAAM,gBAAgB,OAAe,UAA+C;EAClF,MAAMC,WAAmB,MAAM,OAAO;AAEtC,MAAI,SAAS,SAAS,EAAG;AAEzB,MAAI,SAAS,YAAY,YAAY,CAAC,OAAO,KAAK,SAAS,CAAE;AAE7D,MAAI,WAAW,YAAY,CAAC,IAAI,OAAO,QAAQ,CAAC,KAAK,SAAS,CAAE;EAEhE,MAAMD,SAAmB,CAAC,GAAG,IAAI;AACjC,SAAO,SAAS;AAChB,SAAO,OAAO;EAEd,MAAME,WAAmB,OAAO,KAAK,GAAG;AAExC,aAAW,EAAC,QAAQ,EAAC,OAAO,UAAS,EAAC,CAAC;AAEvC,MAAI,YAAY,QAAQ,SAAS,EAC/B,WAAU,QAAQ,QAAQ,IAAI,OAAO;AAGvC,MAAI,OAAO,OAAO,UAAkB,UAAU,GAAG,IAAI,WACnD,YAAW,SAAS;;CAIxB,MAAM,iBAAiB,OAAe,UAAiD;AACrF,MAAI,MAAM,QAAQ,aAChB;OAAI,CAAC,IAAI,UAAU,QAAQ,GAAG;IAC5B,MAAMF,SAAmB,CAAC,GAAG,IAAI;AAEjC,WAAO,QAAQ,KAAK;AACpB,WAAO,OAAO;AACd,cAAU,QAAQ,QAAQ,IAAI,OAAO;AACrC,eAAW,EAAC,QAAQ,EAAC,OAAO,OAAO,KAAK,GAAG,EAAC,EAAC,CAAC;cACrC,IAAI,QAAQ;IACrB,MAAMA,SAAmB,CAAC,GAAG,IAAI;AAEjC,WAAO,SAAS;AAChB,WAAO,OAAO;AACd,eAAW,EAAC,QAAQ,EAAC,OAAO,OAAO,KAAK,GAAG,EAAC,EAAC,CAAC;;aAEvC,MAAM,QAAQ,eAAe,QAAQ,EAC9C,WAAU,QAAQ,QAAQ,IAAI,OAAO;WAC5B,MAAM,QAAQ,gBAAgB,QAAQ,SAAS,EACxD,WAAU,QAAQ,QAAQ,IAAI,OAAO;WAC5B,MAAM,QAAQ,SAAS;AAChC,SAAM,gBAAgB;AAEtB,OAAI,IAAI,OAAO,UAAkB,UAAU,GAAG,IAAI,WAChD,YAAW,IAAI,KAAK,GAAG,CAAC;;;CAK9B,MAAM,eAAe,UAAkD;AACrE,QAAM,gBAAgB;EAEtB,MAAMG,aAAqB,MAAM,cAAc,QAAQ,OAAO,CAAC,MAAM,GAAG,OAAO;EAE/E,IAAI,YAAY;AAEhB,QAAM,KAAK,WAAW,CAAC,SAAS,SAAiB;AAC/C,OAAI,SAAS,YAAY,CAAC,OAAO,KAAK,KAAK,CAAE;AAC7C,OAAI,WAAW,CAAC,IAAI,OAAO,QAAQ,CAAC,KAAK,KAAK,CAAE;AAChD,gBAAa;IACb;EAEF,MAAMH,SAAmB,MAAM,OAAO,CAAC,KAAK,GAAG;AAE/C,OAAK,IAAI,IAAI,GAAG,IAAI,KAAK,IAAI,UAAU,QAAQ,OAAO,EAAE,KAAK,EAC3D,QAAO,KAAK,UAAU;AAGxB,SAAO,OAAO;AACd,aAAW,EAAC,QAAQ,EAAC,OAAO,OAAO,KAAK,GAAG,EAAC,EAAC,CAAC;EAE9C,MAAMI,iBAAyB,OAAO,WAAW,UAAkB,UAAU,GAAG;EAChF,MAAMC,aAAqB,mBAAmB,KAAK,iBAAiB,SAAS;AAE7E,YAAU,QAAQ,aAAa,OAAO;AAEtC,MAAI,OAAO,OAAO,UAAkB,UAAU,GAAG,IAAI,WACnD,YAAW,OAAO,KAAK,GAAG,CAAC;;AAI/B,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,YAAY,CAAC,EAAE,UAAU;EACpE,iBAAgB;EACT;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO,CAAC,CAAC;aACtC;IACU,EAEf,2CAAC;GAAI,gHAA2C,aAAa,kBAAkB,CAAC,EAAE,OAAO,kBAAkB;aACxG,MAAM,KAAK,EAAC,QAAO,GAAG,GAAY,UACjC,2CAAC;IAEC,MAAM,OAAsC;AAC1C,SAAI,GAAI,WAAU,QAAQ,SAAS;;IAErC,MAAM,SAAS,aAAa,aAAa;IACzC,WAAW,SAAS,WAAW,YAAY;IAC3C,OAAO,IAAI,UAAU;IACrB,WAAW,UAA+C,aAAa,OAAO,MAAM;IACpF,YAAY,UAAiD,cAAc,OAAO,MAAM;IACxF,SAAS;IACT,gHAA2C,aAAa,QAAQ,CAAC,EAAE,OAAO,UAAU;qFACpD,aAAa,SAAS,QAAQ,CAAC,GAAG,CAAC,CAAC;MACjE,OAAO,gBAAgB,CAAC,CAAC;qFACI,aAAa,SAAS,WAAW,CAAC,GAAG,CAAC,CAAC;MACpE,OAAO,mBAAmB,CAAC,CAAC;KAC9B,CAAC;IACF,WAAW;IACE;IACH;IACV,cAAY,GAAG,SAAS,MAAM,SAAS,QAAQ;IAC/C,gBAAc,CAAC,CAAC;IAChB,iBAAe;IACf,cAAa;MAtBR,MAuBL,CACF;IACE;GACM;;AAIlB,uBAAe"}
+{"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","cx","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n  ClipboardEvent,\n  FC,\n  KeyboardEvent,\n  ChangeEvent,\n  MutableRefObject,\n  useRef,\n  useEffect,\n  useState,\n  CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\nexport interface OtpInputProps {\n  /**\n   * Auto focus the first input on mount\n   */\n  autoFocus?: boolean;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display below the OTP input\n   */\n  error?: string;\n  /**\n   * Helper text to display below the OTP input\n   */\n  helperText?: string;\n  /**\n   * Label text to display above the OTP input\n   */\n  label?: string;\n  /**\n   * Number of OTP input fields\n   */\n  length?: number;\n  /**\n   * Callback function called when OTP value changes\n   */\n  onChange?: (event: {target: {value: string}}) => void;\n  /**\n   * Callback function called when OTP input is complete\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * Pattern for numeric input validation\n   */\n  pattern?: string;\n  /**\n   * Placeholder character for each input field\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n  /**\n   * Type of input (text, number, password)\n   */\n  type?: OtpFieldType;\n  /**\n   * Current OTP value\n   */\n  value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n  label,\n  error,\n  className,\n  required,\n  disabled,\n  helperText,\n  length = 6,\n  value = '',\n  onChange,\n  onComplete,\n  type = 'text',\n  placeholder = '',\n  style = {},\n  autoFocus = false,\n  pattern,\n}: OtpInputProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n  const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n  const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n  useEffect(() => {\n    inputRefs.current = inputRefs.current.slice(0, length);\n  }, [length]);\n\n  useEffect(() => {\n    if (value) {\n      const newOtp: string[] = value.split('').slice(0, length);\n      while (newOtp.length < length) {\n        newOtp.push('');\n      }\n      setOtp(newOtp);\n    } else {\n      setOtp(Array(length).fill(''));\n    }\n  }, [value, length]);\n\n  useEffect(() => {\n    if (autoFocus && inputRefs.current[0]) {\n      inputRefs.current[0].focus();\n    }\n  }, [autoFocus]);\n\n  const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n    const newValue: string = event.target.value;\n\n    if (newValue.length > 1) return;\n\n    if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n    if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n    const newOtp: string[] = [...otp];\n    newOtp[index] = newValue;\n    setOtp(newOtp);\n\n    const otpValue: string = newOtp.join('');\n\n    onChange?.({target: {value: otpValue}});\n\n    if (newValue && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    }\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(otpValue);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n    if (event.key === 'Backspace') {\n      if (!otp[index] && index > 0) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index - 1] = '';\n        setOtp(newOtp);\n        inputRefs.current[index - 1]?.focus();\n        onChange?.({target: {value: newOtp.join('')}});\n      } else if (otp[index]) {\n        const newOtp: string[] = [...otp];\n\n        newOtp[index] = '';\n        setOtp(newOtp);\n        onChange?.({target: {value: newOtp.join('')}});\n      }\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      inputRefs.current[index - 1]?.focus();\n    } else if (event.key === 'ArrowRight' && index < length - 1) {\n      inputRefs.current[index + 1]?.focus();\n    } else if (event.key === 'Enter') {\n      event.preventDefault();\n\n      if (otp.every((digit: string) => digit !== '') && onComplete) {\n        onComplete(otp.join(''));\n      }\n    }\n  };\n\n  const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n    event.preventDefault();\n\n    const pastedData: string = event.clipboardData.getData('text').slice(0, length);\n\n    let validData = '';\n\n    Array.from(pastedData).forEach((char: string) => {\n      if (type === 'number' && !/^\\d$/.test(char)) return;\n      if (pattern && !new RegExp(pattern).test(char)) return;\n      validData += char;\n    });\n\n    const newOtp: string[] = Array(length).fill('');\n\n    for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n      newOtp[i] = validData[i];\n    }\n\n    setOtp(newOtp);\n    onChange?.({target: {value: newOtp.join('')}});\n\n    const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n    const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n    inputRefs.current[focusIndex]?.focus();\n\n    if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n      onComplete(newOtp.join(''));\n    }\n  };\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n      helperTextAlign=\"center\"\n      style={style}\n    >\n      {label && (\n        <InputLabel required={required} error={!!error}>\n          {label}\n        </InputLabel>\n      )}\n      <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n        {Array.from({length}, (_: unknown, index: number) => (\n          <input\n            key={index}\n            ref={(el: HTMLInputElement | null): void => {\n              if (el) inputRefs.current[index] = el;\n            }}\n            type={type === 'password' ? 'password' : 'text'}\n            inputMode={type === 'number' ? 'numeric' : 'text'}\n            value={otp[index] || ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n            onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n            onPaste={handlePaste}\n            className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n              [styles['inputError']]: !!error,\n              [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n              [styles['inputDisabled']]: !!disabled,\n            })}\n            maxLength={1}\n            placeholder={placeholder}\n            disabled={disabled}\n            aria-label={`${label || 'OTP'} digit ${index + 1}`}\n            aria-invalid={!!error}\n            aria-required={required}\n            autoComplete=\"one-time-code\"\n          />\n        ))}\n      </div>\n    </FormControl>\n  );\n};\n\nexport default OtpField;\n"],"mappings":"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"}

package/dist/cjs/components/primitives/OtpField/OtpField.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/OtpField/OtpField.styles.ts
 /**
@@ -15,14 +14,14 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, disabled, hasError, length) => (0, react.useMemo)(() => {
-	const inputContainer = __emotion_css.css`
+	const inputContainer = require_emotion.css`
       display: flex;
       gap: ${theme.vars.spacing.unit};
       justify-content: space-between;
       align-items: center;
       flex-wrap: wrap;
     `;
-	const input = __emotion_css.css`
+	const input = require_emotion.css`
       width: calc(${theme.vars.spacing.unit} * 6);
       height: calc(${theme.vars.spacing.unit} * 6);
       text-align: center;
@@ -53,7 +52,7 @@ const useStyles = (theme, colorScheme, disabled, hasError, length) => (0, react.
         opacity: 0.7;
       }
     `;
-	const inputError = __emotion_css.css`
+	const inputError = require_emotion.css`
       border-color: ${theme.vars.colors.error.main};
 
       &:focus {
@@ -64,7 +63,7 @@ const useStyles = (theme, colorScheme, disabled, hasError, length) => (0, react.
 	return {
 		input,
 		inputContainer,
-		inputDisabled: __emotion_css.css`
+		inputDisabled: require_emotion.css`
       background-color: ${theme.vars.colors.background.disabled};
       cursor: not-allowed;
       opacity: 0.6;

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

@@ -1 +1 @@
-{"version":3,"file":"OtpField.styles.cjs","names":["inputContainer: string","input: string","inputError: string"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.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\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\n/**\n * Creates styles for the OtpField 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 length - Number of OTP input fields\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  length: number,\n): Record<string, string> =>\n  useMemo(() => {\n    const inputContainer: string = css`\n      display: flex;\n      gap: ${theme.vars.spacing.unit};\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n    `;\n\n    const input: string = css`\n      width: calc(${theme.vars.spacing.unit} * 6);\n      height: calc(${theme.vars.spacing.unit} * 6);\n      text-align: center;\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 500;\n      border: 2px 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      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        cursor: not-allowed;\n        opacity: 0.6;\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\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      cursor: not-allowed;\n      opacity: 0.6;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n    };\n  }, [theme, colorScheme, disabled, hasError, length]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,UACA,UACA,oCAEc;CACZ,MAAMA,iBAAyB,iBAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,iBAAG;oBACT,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;;mBAE1B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;0BAE5B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;eAC3F,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;;;;;;;;;iBAStG,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;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,iBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}
+{"version":3,"file":"OtpField.styles.cjs","names":["inputContainer: string","input: string","inputError: string"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.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\nexport type OtpFieldType = 'text' | 'number' | 'password';\n\n/**\n * Creates styles for the OtpField 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 length - Number of OTP input fields\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  length: number,\n): Record<string, string> =>\n  useMemo(() => {\n    const inputContainer: string = css`\n      display: flex;\n      gap: ${theme.vars.spacing.unit};\n      justify-content: space-between;\n      align-items: center;\n      flex-wrap: wrap;\n    `;\n\n    const input: string = css`\n      width: calc(${theme.vars.spacing.unit} * 6);\n      height: calc(${theme.vars.spacing.unit} * 6);\n      text-align: center;\n      font-size: ${theme.vars.typography.fontSizes.xl};\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: 500;\n      border: 2px 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      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        cursor: not-allowed;\n        opacity: 0.6;\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\n    const inputDisabled: string = css`\n      background-color: ${theme.vars.colors.background.disabled};\n      cursor: not-allowed;\n      opacity: 0.6;\n    `;\n\n    return {\n      input,\n      inputContainer,\n      inputDisabled,\n      inputError,\n    };\n  }, [theme, colorScheme, disabled, hasError, length]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,UACA,UACA,oCAEc;CACZ,MAAMA,iBAAyB,mBAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,mBAAG;oBACT,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;;mBAE1B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;0BAE5B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;eAC3F,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;;;;;;;;;iBAStG,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;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,mBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}