@thunderid/react 0.12.0 → 0.13.1

package/dist/cjs/components/primitives/Divider/Divider.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/Divider/Divider.styles.ts
 /**
@@ -21,10 +20,10 @@ const useStyles = (theme, colorScheme, orientation, variant, color, hasChildren)
 	if (variant === "solid") borderStyle = "solid";
 	else if (variant === "dashed") borderStyle = "dashed";
 	else borderStyle = "dotted";
-	const baseDivider = __emotion_css.css`
+	const baseDivider = require_emotion.css`
       margin: calc(${theme.vars.spacing.unit} * 2) 0;
     `;
-	const verticalDivider = __emotion_css.css`
+	const verticalDivider = require_emotion.css`
       display: inline-block;
       height: 100%;
       min-height: calc(${theme.vars.spacing.unit} * 2);
@@ -35,21 +34,21 @@ const useStyles = (theme, colorScheme, orientation, variant, color, hasChildren)
     `;
 	return {
 		divider: baseDivider,
-		horizontal: __emotion_css.css`
+		horizontal: require_emotion.css`
       display: flex;
       align-items: center;
       width: 100%;
-      ${!hasChildren && __emotion_css.css`
+      ${!hasChildren && require_emotion.css`
         height: 1px;
         border-top: 1px ${borderStyle} ${baseColor};
       `}
     `,
-		line: __emotion_css.css`
+		line: require_emotion.css`
       flex: 1;
       height: 1px;
       border-top: 1px ${borderStyle} ${baseColor};
     `,
-		text: __emotion_css.css`
+		text: require_emotion.css`
       background-color: ${theme.vars.colors.background.surface};
       font-family: ${theme.vars.typography.fontFamily};
       padding: 0 calc(${theme.vars.spacing.unit} * 1);

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.styles.cjs","names":["baseColor: string","borderStyle: string","baseDivider: string","verticalDivider: string"],"sources":["../../../../../src/components/primitives/Divider/Divider.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 DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\n\n/**\n * Creates styles for the Divider 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 orientation - The divider orientation\n * @param variant - The divider variant\n * @param color - Custom color for the divider\n * @param hasChildren - Whether the divider has children (text)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  orientation: DividerOrientation,\n  variant: DividerVariant,\n  color?: string,\n  hasChildren?: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseColor: string = color || theme.colors.border;\n    let borderStyle: string;\n    if (variant === 'solid') {\n      borderStyle = 'solid';\n    } else if (variant === 'dashed') {\n      borderStyle = 'dashed';\n    } else {\n      borderStyle = 'dotted';\n    }\n\n    const baseDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 2) 0;\n    `;\n\n    const verticalDivider: string = css`\n      display: inline-block;\n      height: 100%;\n      min-height: calc(${theme.vars.spacing.unit} * 2);\n      width: 1px;\n      border-inline-start: 1px ${borderStyle} ${baseColor};\n      margin-block: 0;\n      margin-inline: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const horizontalDivider: string = css`\n      display: flex;\n      align-items: center;\n      width: 100%;\n      ${!hasChildren &&\n      css`\n        height: 1px;\n        border-top: 1px ${borderStyle} ${baseColor};\n      `}\n    `;\n\n    const dividerLine: string = css`\n      flex: 1;\n      height: 1px;\n      border-top: 1px ${borderStyle} ${baseColor};\n    `;\n\n    const dividerText: string = css`\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      padding: 0 calc(${theme.vars.spacing.unit} * 1);\n      white-space: nowrap;\n    `;\n\n    return {\n      divider: baseDivider,\n      horizontal: horizontalDivider,\n      line: dividerLine,\n      text: dividerText,\n      vertical: verticalDivider,\n    };\n  }, [theme, colorScheme, orientation, variant, color, hasChildren]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,aACA,SACA,OACA,yCAEc;CACZ,MAAMA,YAAoB,SAAS,MAAM,OAAO;CAChD,IAAIC;AACJ,KAAI,YAAY,QACd,eAAc;UACL,YAAY,SACrB,eAAc;KAEd,eAAc;CAGhB,MAAMC,cAAsB,iBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,kBAA0B,iBAAG;;;yBAGd,MAAM,KAAK,QAAQ,KAAK;;iCAEhB,YAAY,GAAG,UAAU;;4BAE9B,MAAM,KAAK,QAAQ,KAAK;;AA2BhD,QAAO;EACL,SAAS;EACT,YA1BgC,iBAAG;;;;QAIjC,CAAC,eACH,iBAAG;;0BAEiB,YAAY,GAAG,UAAU;QAC3C;;EAmBF,MAhB0B,iBAAG;;;wBAGX,YAAY,GAAG,UAAU;;EAc3C,MAX0B,iBAAG;0BACT,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;wBAC9B,MAAM,KAAK,QAAQ,KAAK;;;EAS1C,UAAU;EACX;GACA;CAAC;CAAO;CAAa;CAAa;CAAS;CAAO;CAAY,CAAC;AAEpE,6BAAe"}
+{"version":3,"file":"Divider.styles.cjs","names":["baseColor: string","borderStyle: string","baseDivider: string","verticalDivider: string"],"sources":["../../../../../src/components/primitives/Divider/Divider.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 DividerOrientation = 'horizontal' | 'vertical';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\n\n/**\n * Creates styles for the Divider 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 orientation - The divider orientation\n * @param variant - The divider variant\n * @param color - Custom color for the divider\n * @param hasChildren - Whether the divider has children (text)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  orientation: DividerOrientation,\n  variant: DividerVariant,\n  color?: string,\n  hasChildren?: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseColor: string = color || theme.colors.border;\n    let borderStyle: string;\n    if (variant === 'solid') {\n      borderStyle = 'solid';\n    } else if (variant === 'dashed') {\n      borderStyle = 'dashed';\n    } else {\n      borderStyle = 'dotted';\n    }\n\n    const baseDivider: string = css`\n      margin: calc(${theme.vars.spacing.unit} * 2) 0;\n    `;\n\n    const verticalDivider: string = css`\n      display: inline-block;\n      height: 100%;\n      min-height: calc(${theme.vars.spacing.unit} * 2);\n      width: 1px;\n      border-inline-start: 1px ${borderStyle} ${baseColor};\n      margin-block: 0;\n      margin-inline: calc(${theme.vars.spacing.unit} * 1);\n    `;\n\n    const horizontalDivider: string = css`\n      display: flex;\n      align-items: center;\n      width: 100%;\n      ${!hasChildren &&\n      css`\n        height: 1px;\n        border-top: 1px ${borderStyle} ${baseColor};\n      `}\n    `;\n\n    const dividerLine: string = css`\n      flex: 1;\n      height: 1px;\n      border-top: 1px ${borderStyle} ${baseColor};\n    `;\n\n    const dividerText: string = css`\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      padding: 0 calc(${theme.vars.spacing.unit} * 1);\n      white-space: nowrap;\n    `;\n\n    return {\n      divider: baseDivider,\n      horizontal: horizontalDivider,\n      line: dividerLine,\n      text: dividerText,\n      vertical: verticalDivider,\n    };\n  }, [theme, colorScheme, orientation, variant, color, hasChildren]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,aACA,SACA,OACA,yCAEc;CACZ,MAAMA,YAAoB,SAAS,MAAM,OAAO;CAChD,IAAIC;AACJ,KAAI,YAAY,QACd,eAAc;UACL,YAAY,SACrB,eAAc;KAEd,eAAc;CAGhB,MAAMC,cAAsB,mBAAG;qBACd,MAAM,KAAK,QAAQ,KAAK;;CAGzC,MAAMC,kBAA0B,mBAAG;;;yBAGd,MAAM,KAAK,QAAQ,KAAK;;iCAEhB,YAAY,GAAG,UAAU;;4BAE9B,MAAM,KAAK,QAAQ,KAAK;;AA2BhD,QAAO;EACL,SAAS;EACT,YA1BgC,mBAAG;;;;QAIjC,CAAC,eACH,mBAAG;;0BAEiB,YAAY,GAAG,UAAU;QAC3C;;EAmBF,MAhB0B,mBAAG;;;wBAGX,YAAY,GAAG,UAAU;;EAc3C,MAX0B,mBAAG;0BACT,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;wBAC9B,MAAM,KAAK,QAAQ,KAAK;;;EAS1C,UAAU;EACX;GACA;CAAC;CAAO;CAAa;CAAa;CAAS;CAAO;CAAY,CAAC;AAEpE,6BAAe"}

package/dist/cjs/components/primitives/FormControl/FormControl.cjs

@@ -1,4 +1,5 @@
 const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_emotion = require('../../../styles/emotion.cjs');
 const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
 const require_Typography = require('../Typography/Typography.cjs');
 const require_FormControl_styles = require('./FormControl.styles.cjs');
@@ -6,8 +7,6 @@ let __thunderid_browser = require("@thunderid/browser");
 __thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
 let react_jsx_runtime = require("react/jsx-runtime");
 react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
-let __emotion_css = require("@emotion/css");
-__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 
 //#region src/components/primitives/FormControl/FormControl.tsx
 const FormControl = ({ children, error, helperText, className, id, helperTextAlign = "left", helperTextMarginLeft }) => {
@@ -15,11 +14,11 @@ const FormControl = ({ children, error, helperText, className, id, helperTextAli
 	const styles = require_FormControl_styles.default(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		id,
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("form-control")), styles["formControl"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("form-control")), styles["formControl"], className),
 		children: [children, (error || helperText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.default, {
 			variant: "caption",
 			color: error ? "error" : "textSecondary",
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("form-control", "helper-text")), styles["helperText"], {
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("form-control", "helper-text")), styles["helperText"], {
 				[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("form-control", "helper-text", "error"))]: !!error,
 				[styles["helperTextError"]]: !!error
 			}),

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.cjs","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","Typography"],"sources":["../../../../../src/components/primitives/FormControl/FormControl.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode} from 'react';\nimport useStyles from './FormControl.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Typography from '../Typography/Typography';\n\nexport type FormControlHelperTextAlign = 'left' | 'center';\n\nexport interface FormControlProps {\n  /**\n   * The content to be wrapped by the form control\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the content\n   */\n  error?: string;\n  /**\n   * Helper text to display below the content\n   */\n  helperText?: string;\n  /**\n   * Custom alignment for helper text (default: left, center for OTP)\n   */\n  helperTextAlign?: FormControlHelperTextAlign;\n  /**\n   * Custom margin left for helper text (for components like Checkbox)\n   */\n  helperTextMarginLeft?: string;\n  /**\n   * HTML id attribute\n   */\n  id?: string;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n}\n\nconst FormControl: FC<FormControlProps> = ({\n  children,\n  error,\n  helperText,\n  className,\n  id,\n  helperTextAlign = 'left',\n  helperTextMarginLeft,\n}: FormControlProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);\n\n  return (\n    <div id={id} className={cx(withVendorCSSClassPrefix(bem('form-control')), styles['formControl'], className)}>\n      {children}\n      {(error || helperText) && (\n        <Typography\n          variant=\"caption\"\n          color={error ? 'error' : 'textSecondary'}\n          className={cx(withVendorCSSClassPrefix(bem('form-control', 'helper-text')), styles['helperText'], {\n            [withVendorCSSClassPrefix(bem('form-control', 'helper-text', 'error'))]: !!error,\n            [styles['helperTextError']]: !!error,\n          })}\n        >\n          {error || helperText}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"mappings":";;;;;;;;;;;;AA+CA,MAAMA,eAAqC,EACzC,UACA,OACA,YACA,WACA,IACA,kBAAkB,QAClB,2BACsB;CACtB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,mCAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,4CAAC;EAAQ;EAAI,gHAA2C,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aACxG,WACC,SAAS,eACT,2CAACC;GACC,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,gHAA2C,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;oFAClE,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}
+{"version":3,"file":"FormControl.cjs","names":["FormControl: FC<FormControlProps>","useTheme","styles: Record<string, string>","useStyles","cx","Typography"],"sources":["../../../../../src/components/primitives/FormControl/FormControl.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, ReactNode} from 'react';\nimport useStyles from './FormControl.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport Typography from '../Typography/Typography';\n\nexport type FormControlHelperTextAlign = 'left' | 'center';\n\nexport interface FormControlProps {\n  /**\n   * The content to be wrapped by the form control\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Error message to display below the content\n   */\n  error?: string;\n  /**\n   * Helper text to display below the content\n   */\n  helperText?: string;\n  /**\n   * Custom alignment for helper text (default: left, center for OTP)\n   */\n  helperTextAlign?: FormControlHelperTextAlign;\n  /**\n   * Custom margin left for helper text (for components like Checkbox)\n   */\n  helperTextMarginLeft?: string;\n  /**\n   * HTML id attribute\n   */\n  id?: string;\n  /**\n   * Custom container style\n   */\n  style?: CSSProperties;\n}\n\nconst FormControl: FC<FormControlProps> = ({\n  children,\n  error,\n  helperText,\n  className,\n  id,\n  helperTextAlign = 'left',\n  helperTextMarginLeft,\n}: FormControlProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, helperTextAlign, helperTextMarginLeft, !!error);\n\n  return (\n    <div id={id} className={cx(withVendorCSSClassPrefix(bem('form-control')), styles['formControl'], className)}>\n      {children}\n      {(error || helperText) && (\n        <Typography\n          variant=\"caption\"\n          color={error ? 'error' : 'textSecondary'}\n          className={cx(withVendorCSSClassPrefix(bem('form-control', 'helper-text')), styles['helperText'], {\n            [withVendorCSSClassPrefix(bem('form-control', 'helper-text', 'error'))]: !!error,\n            [styles['helperTextError']]: !!error,\n          })}\n        >\n          {error || helperText}\n        </Typography>\n      )}\n    </div>\n  );\n};\n\nexport default FormControl;\n"],"mappings":";;;;;;;;;;;AA+CA,MAAMA,eAAqC,EACzC,UACA,OACA,YACA,WACA,IACA,kBAAkB,QAClB,2BACsB;CACtB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,mCAAU,OAAO,aAAa,iBAAiB,sBAAsB,CAAC,CAAC,MAAM;AAEpH,QACE,4CAAC;EAAQ;EAAI,WAAWC,kGAAgC,eAAe,CAAC,EAAE,OAAO,gBAAgB,UAAU;aACxG,WACC,SAAS,eACT,2CAACC;GACC,SAAQ;GACR,OAAO,QAAQ,UAAU;GACzB,WAAWD,kGAAgC,gBAAgB,cAAc,CAAC,EAAE,OAAO,eAAe;oFAClE,gBAAgB,eAAe,QAAQ,CAAC,GAAG,CAAC,CAAC;KAC1E,OAAO,qBAAqB,CAAC,CAAC;IAChC,CAAC;aAED,SAAS;IACC;GAEX;;AAIV,0BAAe"}

package/dist/cjs/components/primitives/FormControl/FormControl.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/FormControl/FormControl.styles.ts
 /**
@@ -16,16 +15,16 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 */
 const useStyles = (theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError) => (0, react.useMemo)(() => {
 	return {
-		formControl: __emotion_css.css`
+		formControl: require_emotion.css`
       text-align: start;
       font-family: ${theme.vars.typography.fontFamily};
     `,
-		helperText: __emotion_css.css`
+		helperText: require_emotion.css`
       margin-top: calc(${theme.vars.spacing.unit} / 2);
       text-align: ${helperTextAlign === "left" ? "start" : helperTextAlign};
       ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}
     `,
-		helperTextError: __emotion_css.css`
+		helperTextError: require_emotion.css`
       color: ${theme.vars.colors.error.main};
     `
 	};

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

@@ -1 +1 @@
-{"version":3,"file":"FormControl.styles.cjs","names":[],"sources":["../../../../../src/components/primitives/FormControl/FormControl.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 FormControlHelperTextAlign = 'left' | 'center';\n\n/**\n * Creates styles for the FormControl 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 helperTextAlign - The alignment for helper text\n * @param helperTextMarginLeft - Custom margin left for helper text\n * @param hasError - Whether the form control has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  helperTextAlign: FormControlHelperTextAlign,\n  helperTextMarginLeft?: string,\n  hasError?: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const formControl: string = css`\n      text-align: start;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const helperText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n      text-align: ${helperTextAlign === 'left' ? 'start' : helperTextAlign};\n      ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}\n    `;\n\n    const helperTextError: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    return {\n      formControl,\n      helperText,\n      helperTextError,\n    };\n  }, [theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,iBACA,sBACA,sCAEc;AAgBZ,QAAO;EACL,aAhB0B,iBAAG;;qBAEd,MAAM,KAAK,WAAW,WAAW;;EAehD,YAZyB,iBAAG;yBACT,MAAM,KAAK,QAAQ,KAAK;oBAC7B,oBAAoB,SAAS,UAAU,gBAAgB;QACnE,wBAAwB,wBAAwB,qBAAqB,GAAG;;EAU1E,iBAP8B,iBAAG;eACxB,MAAM,KAAK,OAAO,MAAM,KAAK;;EAOvC;GACA;CAAC;CAAO;CAAa;CAAiB;CAAsB;CAAS,CAAC;AAE3E,iCAAe"}
+{"version":3,"file":"FormControl.styles.cjs","names":[],"sources":["../../../../../src/components/primitives/FormControl/FormControl.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 FormControlHelperTextAlign = 'left' | 'center';\n\n/**\n * Creates styles for the FormControl 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 helperTextAlign - The alignment for helper text\n * @param helperTextMarginLeft - Custom margin left for helper text\n * @param hasError - Whether the form control has an error\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  helperTextAlign: FormControlHelperTextAlign,\n  helperTextMarginLeft?: string,\n  hasError?: boolean,\n): Record<string, string> =>\n  useMemo(() => {\n    const formControl: string = css`\n      text-align: start;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const helperText: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} / 2);\n      text-align: ${helperTextAlign === 'left' ? 'start' : helperTextAlign};\n      ${helperTextMarginLeft && `margin-inline-start: ${helperTextMarginLeft};`}\n    `;\n\n    const helperTextError: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    return {\n      formControl,\n      helperText,\n      helperTextError,\n    };\n  }, [theme, colorScheme, helperTextAlign, helperTextMarginLeft, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,iBACA,sBACA,sCAEc;AAgBZ,QAAO;EACL,aAhB0B,mBAAG;;qBAEd,MAAM,KAAK,WAAW,WAAW;;EAehD,YAZyB,mBAAG;yBACT,MAAM,KAAK,QAAQ,KAAK;oBAC7B,oBAAoB,SAAS,UAAU,gBAAgB;QACnE,wBAAwB,wBAAwB,qBAAqB,GAAG;;EAU1E,iBAP8B,mBAAG;eACxB,MAAM,KAAK,OAAO,MAAM,KAAK;;EAOvC;GACA;CAAC;CAAO;CAAa;CAAiB;CAAsB;CAAS,CAAC;AAE3E,iCAAe"}

package/dist/cjs/components/primitives/InputLabel/InputLabel.cjs

@@ -1,26 +1,25 @@
 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_InputLabel_styles = require('./InputLabel.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/InputLabel/InputLabel.tsx
 const InputLabel = ({ children, required = false, error = false, variant = "block", marginBottom, className, style = {},...rest }) => {
 	const { theme, colorScheme } = require_useTheme.default();
 	const styles = require_InputLabel_styles.default(theme, colorScheme, variant, error, marginBottom);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("input-label")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("input-label", variant)), styles["label"], variant === "block" ? styles["block"] : styles["inline"], {
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("input-label")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("input-label", variant)), styles["label"], variant === "block" ? styles["block"] : styles["inline"], {
 			[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("input-label", "error"))]: error,
 			[styles["error"]]: error
 		}, className),
 		style,
 		...rest,
 		children: [children, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("input-label", "required")), styles["requiredIndicator"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("input-label", "required")), styles["requiredIndicator"]),
 			children: " *"
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.cjs","names":["InputLabel: FC<InputLabelProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../../src/components/primitives/InputLabel/InputLabel.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, LabelHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './InputLabel.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type InputLabelVariant = 'block' | 'inline';\n\nexport interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {\n  /**\n   * Label text or content\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether there's an error state\n   */\n  error?: boolean;\n  /**\n   * Custom margin bottom (useful for different form layouts)\n   */\n  marginBottom?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom style overrides\n   */\n  style?: CSSProperties;\n  /**\n   * Display type for label positioning\n   */\n  variant?: InputLabelVariant;\n}\n\nconst InputLabel: FC<InputLabelProps> = ({\n  children,\n  required = false,\n  error = false,\n  variant = 'block',\n  marginBottom,\n  className,\n  style = {},\n  ...rest\n}: InputLabelProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, variant, error, marginBottom);\n\n  return (\n    <label\n      className={cx(\n        withVendorCSSClassPrefix(bem('input-label')),\n        withVendorCSSClassPrefix(bem('input-label', variant)),\n        styles['label'],\n        variant === 'block' ? styles['block'] : styles['inline'],\n        {\n          [withVendorCSSClassPrefix(bem('input-label', 'error'))]: error,\n          [styles['error']]: error,\n        },\n        className,\n      )}\n      style={style}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <span className={cx(withVendorCSSClassPrefix(bem('input-label', 'required')), styles['requiredIndicator'])}>\n          {' *'}\n        </span>\n      )}\n    </label>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;;;;;;AA0CA,MAAMA,cAAmC,EACvC,UACA,WAAW,OACX,QAAQ,OACR,UAAU,SACV,cACA,WACA,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,kCAAU,OAAO,aAAa,SAAS,OAAO,aAAa;AAElG,QACE,4CAAC;EACC,gHAC+B,cAAc,CAAC,iFACf,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,YAAY,UAAU,OAAO,WAAW,OAAO,WAC/C;mFACgC,eAAe,QAAQ,CAAC,GAAG;IACxD,OAAO,WAAW;GACpB,EACD,UACD;EACM;EACP,GAAI;aAEH,UACA,YACC,2CAAC;GAAK,gHAA2C,eAAe,WAAW,CAAC,EAAE,OAAO,qBAAqB;aACvG;IACI;GAEH;;AAIZ,yBAAe"}
+{"version":3,"file":"InputLabel.cjs","names":["InputLabel: FC<InputLabelProps>","useTheme","styles: Record<string, string>","useStyles","cx"],"sources":["../../../../../src/components/primitives/InputLabel/InputLabel.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {bem, withVendorCSSClassPrefix} from '@thunderid/browser';\nimport {CSSProperties, FC, LabelHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './InputLabel.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\n\nexport type InputLabelVariant = 'block' | 'inline';\n\nexport interface InputLabelProps extends Omit<LabelHTMLAttributes<HTMLLabelElement>, 'style'> {\n  /**\n   * Label text or content\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Whether there's an error state\n   */\n  error?: boolean;\n  /**\n   * Custom margin bottom (useful for different form layouts)\n   */\n  marginBottom?: string;\n  /**\n   * Whether the field is required\n   */\n  required?: boolean;\n  /**\n   * Custom style overrides\n   */\n  style?: CSSProperties;\n  /**\n   * Display type for label positioning\n   */\n  variant?: InputLabelVariant;\n}\n\nconst InputLabel: FC<InputLabelProps> = ({\n  children,\n  required = false,\n  error = false,\n  variant = 'block',\n  marginBottom,\n  className,\n  style = {},\n  ...rest\n}: InputLabelProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, variant, error, marginBottom);\n\n  return (\n    <label\n      className={cx(\n        withVendorCSSClassPrefix(bem('input-label')),\n        withVendorCSSClassPrefix(bem('input-label', variant)),\n        styles['label'],\n        variant === 'block' ? styles['block'] : styles['inline'],\n        {\n          [withVendorCSSClassPrefix(bem('input-label', 'error'))]: error,\n          [styles['error']]: error,\n        },\n        className,\n      )}\n      style={style}\n      {...rest}\n    >\n      {children}\n      {required && (\n        <span className={cx(withVendorCSSClassPrefix(bem('input-label', 'required')), styles['requiredIndicator'])}>\n          {' *'}\n        </span>\n      )}\n    </label>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;;;;;AA0CA,MAAMA,cAAmC,EACvC,UACA,WAAW,OACX,QAAQ,OACR,UAAU,SACV,cACA,WACA,QAAQ,EAAE,CACV,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,kCAAU,OAAO,aAAa,SAAS,OAAO,aAAa;AAElG,QACE,4CAAC;EACC,WAAWC,kGACoB,cAAc,CAAC,iFACf,eAAe,QAAQ,CAAC,EACrD,OAAO,UACP,YAAY,UAAU,OAAO,WAAW,OAAO,WAC/C;mFACgC,eAAe,QAAQ,CAAC,GAAG;IACxD,OAAO,WAAW;GACpB,EACD,UACD;EACM;EACP,GAAI;aAEH,UACA,YACC,2CAAC;GAAK,WAAWA,kGAAgC,eAAe,WAAW,CAAC,EAAE,OAAO,qBAAqB;aACvG;IACI;GAEH;;AAIZ,yBAAe"}

package/dist/cjs/components/primitives/InputLabel/InputLabel.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/InputLabel/InputLabel.styles.ts
 /**
@@ -15,7 +14,7 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, variant, error, marginBottom) => (0, react.useMemo)(() => {
-	const baseLabel = __emotion_css.css`
+	const baseLabel = require_emotion.css`
       display: ${variant};
       margin-bottom: ${marginBottom || (variant === "block" ? `calc(${theme.vars.spacing.unit} + 1px)` : "0")};
       color: ${error ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};
@@ -23,20 +22,20 @@ const useStyles = (theme, colorScheme, variant, error, marginBottom) => (0, reac
       font-family: ${theme.vars.typography.fontFamily};
       font-weight: ${variant === "block" ? 500 : "normal"};
     `;
-	const errorLabel = __emotion_css.css`
+	const errorLabel = require_emotion.css`
       color: ${theme.vars.colors.error.main};
     `;
-	const requiredIndicator = __emotion_css.css`
+	const requiredIndicator = require_emotion.css`
       color: ${theme.vars.colors.error.main};
     `;
 	return {
-		block: __emotion_css.css`
+		block: require_emotion.css`
       display: block;
       font-weight: 500;
       margin-bottom: ${marginBottom || `calc(${theme.vars.spacing.unit} + 1px)`};
     `,
 		error: errorLabel,
-		inline: __emotion_css.css`
+		inline: require_emotion.css`
       display: inline;
       font-weight: normal;
       margin-bottom: 0;

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

@@ -1 +1 @@
-{"version":3,"file":"InputLabel.styles.cjs","names":["baseLabel: string","errorLabel: string","requiredIndicator: string"],"sources":["../../../../../src/components/primitives/InputLabel/InputLabel.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 InputLabelVariant = 'block' | 'inline';\n\n/**\n * Creates styles for the InputLabel component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The display variant of the label\n * @param error - Whether the label has an error state\n * @param marginBottom - Custom margin bottom value\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: InputLabelVariant,\n  error: boolean,\n  marginBottom?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseLabel: string = css`\n      display: ${variant};\n      margin-bottom: ${marginBottom || (variant === 'block' ? `calc(${theme.vars.spacing.unit} + 1px)` : '0')};\n      color: ${error ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: ${variant === 'block' ? 500 : 'normal'};\n    `;\n\n    const errorLabel: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const requiredIndicator: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const blockVariant: string = css`\n      display: block;\n      font-weight: 500;\n      margin-bottom: ${marginBottom || `calc(${theme.vars.spacing.unit} + 1px)`};\n    `;\n\n    const inlineVariant: string = css`\n      display: inline;\n      font-weight: normal;\n      margin-bottom: 0;\n    `;\n\n    return {\n      block: blockVariant,\n      error: errorLabel,\n      inline: inlineVariant,\n      label: baseLabel,\n      requiredIndicator,\n    };\n  }, [theme, colorScheme, variant, error, marginBottom]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,SACA,OACA,0CAEc;CACZ,MAAMA,YAAoB,iBAAG;iBAChB,QAAQ;uBACF,iBAAiB,YAAY,UAAU,QAAQ,MAAM,KAAK,QAAQ,KAAK,WAAW,KAAK;eAC/F,QAAQ,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,KAAK,UAAU;mBACpE,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;qBACjC,YAAY,UAAU,MAAM,SAAS;;CAGtD,MAAMC,aAAqB,iBAAG;eACnB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,oBAA4B,iBAAG;eAC1B,MAAM,KAAK,OAAO,MAAM,KAAK;;AAexC,QAAO;EACL,OAb2B,iBAAG;;;uBAGb,gBAAgB,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAAS;;EAW1E,OAAO;EACP,QAT4B,iBAAG;;;;;EAU/B,OAAO;EACP;EACD;GACA;CAAC;CAAO;CAAa;CAAS;CAAO;CAAa,CAAC;AAExD,gCAAe"}
+{"version":3,"file":"InputLabel.styles.cjs","names":["baseLabel: string","errorLabel: string","requiredIndicator: string"],"sources":["../../../../../src/components/primitives/InputLabel/InputLabel.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 InputLabelVariant = 'block' | 'inline';\n\n/**\n * Creates styles for the InputLabel component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param variant - The display variant of the label\n * @param error - Whether the label has an error state\n * @param marginBottom - Custom margin bottom value\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (\n  theme: Theme,\n  colorScheme: string,\n  variant: InputLabelVariant,\n  error: boolean,\n  marginBottom?: string,\n): Record<string, string> =>\n  useMemo(() => {\n    const baseLabel: string = css`\n      display: ${variant};\n      margin-bottom: ${marginBottom || (variant === 'block' ? `calc(${theme.vars.spacing.unit} + 1px)` : '0')};\n      color: ${error ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-family: ${theme.vars.typography.fontFamily};\n      font-weight: ${variant === 'block' ? 500 : 'normal'};\n    `;\n\n    const errorLabel: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const requiredIndicator: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const blockVariant: string = css`\n      display: block;\n      font-weight: 500;\n      margin-bottom: ${marginBottom || `calc(${theme.vars.spacing.unit} + 1px)`};\n    `;\n\n    const inlineVariant: string = css`\n      display: inline;\n      font-weight: normal;\n      margin-bottom: 0;\n    `;\n\n    return {\n      block: blockVariant,\n      error: errorLabel,\n      inline: inlineVariant,\n      label: baseLabel,\n      requiredIndicator,\n    };\n  }, [theme, colorScheme, variant, error, marginBottom]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,SACA,OACA,0CAEc;CACZ,MAAMA,YAAoB,mBAAG;iBAChB,QAAQ;uBACF,iBAAiB,YAAY,UAAU,QAAQ,MAAM,KAAK,QAAQ,KAAK,WAAW,KAAK;eAC/F,QAAQ,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,KAAK,UAAU;mBACpE,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;qBACjC,YAAY,UAAU,MAAM,SAAS;;CAGtD,MAAMC,aAAqB,mBAAG;eACnB,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,oBAA4B,mBAAG;eAC1B,MAAM,KAAK,OAAO,MAAM,KAAK;;AAexC,QAAO;EACL,OAb2B,mBAAG;;;uBAGb,gBAAgB,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAAS;;EAW1E,OAAO;EACP,QAT4B,mBAAG;;;;;EAU/B,OAAO;EACP;EACD;GACA;CAAC;CAAO;CAAa;CAAS;CAAO;CAAa,CAAC;AAExD,gCAAe"}

package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.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_Plus = require('../Icons/Plus.cjs');
 const require_X = require('../Icons/X.cjs');
@@ -10,8 +11,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/KeyValueInput/KeyValueInput.tsx
 /**
@@ -99,41 +98,41 @@ const KeyValueInput = ({ className = "", disabled = false, error, helperText, ke
 	const isAddDisabled = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();
 	const renderReadOnlyContent = () => {
 		if (pairs.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "empty-state")), styles["emptyState"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "empty-state")), styles["emptyState"]),
 			children: "No attributes defined"
 		});
 		return pairs.map((pair, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "readonly-pair")), styles["readOnlyPair"]),
+			className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "readonly-pair")), styles["readOnlyPair"]),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "readonly-key")), styles["readOnlyKey"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "readonly-key")), styles["readOnlyKey"]),
 				children: [pair.key, ":"]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "readonly-value")), styles["readOnlyValue"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "readonly-value")), styles["readOnlyValue"]),
 				children: pair.value
 			})]
 		}, `${pair.key}-${index}`));
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input")), styles["container"], className),
+		className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input")), styles["container"], className),
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "label")), styles["label"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "label")), styles["label"]),
 				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "required")), styles["requiredIndicator"]),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "required")), styles["requiredIndicator"]),
 					children: " *"
 				})]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pairs-list")), styles["pairsList"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pairs-list")), styles["pairsList"]),
 				children: [readOnly ? renderReadOnlyContent() : pairs.map((pair, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-row")), styles["pairRow"]),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-row")), styles["pairRow"]),
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
 							placeholder: keyPlaceholder,
 							value: pair.key,
 							onChange: (e) => handleUpdatePair(index, "key", e.target.value),
 							disabled: disabled || readOnly,
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
 							"aria-label": `${keyLabel} ${index + 1}`
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
@@ -141,14 +140,14 @@ const KeyValueInput = ({ className = "", disabled = false, error, helperText, ke
 							value: pair.value,
 							onChange: (e) => handleUpdatePair(index, "value", e.target.value),
 							disabled: disabled || readOnly,
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
 							"aria-label": `${valueLabel} ${index + 1}`
 						}),
 						!readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 							type: "button",
 							onClick: () => handleRemovePair(index),
 							disabled,
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "remove-button")), styles["removeButton"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "remove-button")), styles["removeButton"]),
 							"aria-label": `${removeButtonText} ${pair.key}`,
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_X.default, {
 								width: 16,
@@ -157,14 +156,14 @@ const KeyValueInput = ({ className = "", disabled = false, error, helperText, ke
 						})
 					]
 				}, `${pair.key}-${index}`)), !readOnly && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "add-row")), styles["addRow"]),
+					className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "add-row")), styles["addRow"]),
 					children: [
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
 							placeholder: keyPlaceholder,
 							value: newKey,
 							onChange: (e) => setNewKey(e.target.value),
 							disabled,
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
 							"aria-label": "New key"
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
@@ -172,7 +171,7 @@ const KeyValueInput = ({ className = "", disabled = false, error, helperText, ke
 							value: newValue,
 							onChange: (e) => setNewValue(e.target.value),
 							disabled,
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "pair-input")), styles["pairInput"]),
 							"aria-label": "New value",
 							onKeyPress: (e) => {
 								if (e.key === "Enter" && !isAddDisabled) handleAddPair();
@@ -182,7 +181,7 @@ const KeyValueInput = ({ className = "", disabled = false, error, helperText, ke
 							type: "button",
 							onClick: handleAddPair,
 							disabled: isAddDisabled,
-							className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "add-button")), styles["addButton"]),
+							className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "add-button")), styles["addButton"]),
 							"aria-label": "Add new key-value pair",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Plus.default, {
 								width: 16,
@@ -193,11 +192,11 @@ const KeyValueInput = ({ className = "", disabled = false, error, helperText, ke
 				})]
 			}),
 			(helperText || error) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "helper-text")), styles["helperText"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "helper-text")), styles["helperText"]),
 				children: error || helperText
 			}),
 			maxPairs && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "counter")), styles["counterText"]),
+				className: require_emotion.cx((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("key-value-input", "counter")), styles["counterText"]),
 				children: [
 					pairs.length,
 					" of ",

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

@@ -1 +1 @@
-{"version":3,"file":"KeyValueInput.cjs","names":["KeyValueInput: FC<KeyValueInputProps>","useTheme","styles: Record<string, string>","useStyles","handleAddPair: ReturnType<typeof useCallback>","newPair: KeyValuePair","updatedPairs: KeyValuePair[]","handleRemovePair: ReturnType<typeof useCallback>","pairToRemove: KeyValuePair","handleUpdatePair: ReturnType<typeof useCallback>","canAddMore: boolean","isAddDisabled: boolean","TextField","X","Plus"],"sources":["../../../../../src/components/primitives/KeyValueInput/KeyValueInput.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 {ChangeEvent, FC, KeyboardEvent, MouseEventHandler, ReactElement, useState, useCallback} from 'react';\nimport useStyles from './KeyValueInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {Plus, X} from '../Icons';\nimport TextField from '../TextField/TextField';\n\nexport interface KeyValuePair {\n  key: string;\n  value: string;\n}\n\nexport interface KeyValueInputProps {\n  /**\n   * CSS class name for styling the component.\n   */\n  className?: string;\n\n  /**\n   * Whether the input is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Error message to display.\n   */\n  error?: string;\n\n  /**\n   * Help text to display below the input.\n   */\n  helperText?: string;\n\n  /**\n   * Label for the key input field.\n   */\n  keyLabel?: string;\n\n  /**\n   * Placeholder text for the key input field.\n   */\n  keyPlaceholder?: string;\n\n  /**\n   * Label for the component.\n   */\n  label?: string;\n\n  /**\n   * Maximum number of key-value pairs allowed.\n   */\n  maxPairs?: number;\n  /**\n   * Callback fired when a pair is added.\n   */\n  onAdd?: (pair: KeyValuePair) => void;\n\n  /**\n   * Callback fired when the key-value pairs change.\n   */\n  onChange?: (pairs: KeyValuePair[]) => void;\n\n  /**\n   * Callback fired when a pair is removed.\n   */\n  onRemove?: (pair: KeyValuePair, index: number) => void;\n\n  /**\n   * Whether the component is in read-only mode.\n   */\n  readOnly?: boolean;\n\n  /**\n   * Text for the remove button.\n   */\n  removeButtonText?: string;\n\n  /**\n   * Whether the component is required.\n   */\n  required?: boolean;\n\n  /**\n   * Current key-value pairs.\n   */\n  value?: Record<string, any> | KeyValuePair[];\n\n  /**\n   * Label for the value input field.\n   */\n  valueLabel?: string;\n\n  /**\n   * Placeholder text for the value input field.\n   */\n  valuePlaceholder?: string;\n}\n\n/**\n * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.\n * It provides a user-friendly interface for editing organization attributes or similar data structures.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <KeyValueInput\n *   label=\"Organization Attributes\"\n *   onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With initial values\n * <KeyValueInput\n *   label=\"Organization Attributes\"\n *   value={{department: 'IT', location: 'New York'}}\n *   onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With add/remove callbacks\n * <KeyValueInput\n *   label=\"Custom Attributes\"\n *   value={attributes}\n *   onChange={(pairs) => setAttributes(pairs)}\n *   onAdd={(pair) => console.log('Added:', pair)}\n *   onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}\n * />\n * ```\n */\nconst KeyValueInput: FC<KeyValueInputProps> = ({\n  className = '',\n  disabled = false,\n  error,\n  helperText,\n  keyLabel = 'Key',\n  keyPlaceholder = 'Enter key',\n  label,\n  maxPairs,\n  onChange,\n  onAdd,\n  onRemove,\n  readOnly = false,\n  removeButtonText = 'Remove',\n  required = false,\n  value = {},\n  valueLabel = 'Value',\n  valuePlaceholder = 'Enter value',\n}: KeyValueInputProps): ReactElement => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled, readOnly, !!error);\n\n  // Convert value to array format\n  const initialPairs: KeyValuePair[] = Array.isArray(value)\n    ? value\n    : Object.entries(value).map(([key, val]: [string, any]) => ({key, value: String(val)}));\n\n  const [pairs, setPairs] = useState<KeyValuePair[]>(initialPairs);\n  const [newKey, setNewKey] = useState('');\n  const [newValue, setNewValue] = useState('');\n\n  const handleAddPair: ReturnType<typeof useCallback> = useCallback(() => {\n    if (!newKey.trim() || !newValue.trim()) return;\n    if (maxPairs && pairs.length >= maxPairs) return;\n\n    const newPair: KeyValuePair = {\n      key: newKey.trim(),\n      value: newValue.trim(),\n    };\n\n    const updatedPairs: KeyValuePair[] = [...pairs, newPair];\n    setPairs(updatedPairs);\n    setNewKey('');\n    setNewValue('');\n\n    if (onChange) {\n      onChange(updatedPairs);\n    }\n\n    if (onAdd) {\n      onAdd(newPair);\n    }\n  }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);\n\n  const handleRemovePair: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      const pairToRemove: KeyValuePair = pairs[index];\n      const updatedPairs: KeyValuePair[] = pairs.filter((_: KeyValuePair, i: number) => i !== index);\n      setPairs(updatedPairs);\n\n      if (onChange) {\n        onChange(updatedPairs);\n      }\n\n      if (onRemove) {\n        onRemove(pairToRemove, index);\n      }\n    },\n    [pairs, onChange, onRemove],\n  );\n\n  const handleUpdatePair: ReturnType<typeof useCallback> = useCallback(\n    (index: number, field: 'key' | 'value', newVal: string) => {\n      const updatedPairs: KeyValuePair[] = pairs.map((pair: KeyValuePair, i: number) => {\n        if (i === index) {\n          return {...pair, [field]: newVal};\n        }\n        return pair;\n      });\n      setPairs(updatedPairs);\n\n      if (onChange) {\n        onChange(updatedPairs);\n      }\n    },\n    [pairs, onChange],\n  );\n\n  const canAddMore: boolean = !maxPairs || pairs.length < maxPairs;\n  const isAddDisabled: boolean = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();\n\n  const renderReadOnlyContent = (): ReactElement | ReactElement[] => {\n    if (pairs.length === 0) {\n      return (\n        <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'empty-state')), styles['emptyState'])}>\n          No attributes defined\n        </div>\n      );\n    }\n\n    return pairs.map((pair: KeyValuePair, index: number) => (\n      <div\n        key={`${pair.key}-${index}`}\n        className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-pair')), styles['readOnlyPair'])}\n      >\n        <span className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-key')), styles['readOnlyKey'])}>\n          {pair.key}:\n        </span>\n        <span\n          className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-value')), styles['readOnlyValue'])}\n        >\n          {pair.value}\n        </span>\n      </div>\n    ));\n  };\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix(bem('key-value-input')), styles['container'], className)}>\n      {label && (\n        <label className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'label')), styles['label'])}>\n          {label}\n          {required && (\n            <span\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'required')), styles['requiredIndicator'])}\n            >\n              {' *'}\n            </span>\n          )}\n        </label>\n      )}\n\n      <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pairs-list')), styles['pairsList'])}>\n        {readOnly\n          ? renderReadOnlyContent()\n          : pairs.map((pair: KeyValuePair, index: number) => (\n              <div\n                key={`${pair.key}-${index}`}\n                className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-row')), styles['pairRow'])}\n              >\n                <TextField\n                  placeholder={keyPlaceholder}\n                  value={pair.key}\n                  onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUpdatePair(index, 'key', e.target.value)}\n                  disabled={disabled || readOnly}\n                  className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n                  aria-label={`${keyLabel} ${index + 1}`}\n                />\n                <TextField\n                  placeholder={valuePlaceholder}\n                  value={pair.value}\n                  onChange={(e: ChangeEvent<HTMLInputElement>): void =>\n                    handleUpdatePair(index, 'value', e.target.value)\n                  }\n                  disabled={disabled || readOnly}\n                  className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n                  aria-label={`${valueLabel} ${index + 1}`}\n                />\n                {!readOnly && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemovePair(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('key-value-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    aria-label={`${removeButtonText} ${pair.key}`}\n                  >\n                    <X width={16} height={16} />\n                  </button>\n                )}\n              </div>\n            ))}\n\n        {!readOnly && (\n          <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-row')), styles['addRow'])}>\n            <TextField\n              placeholder={keyPlaceholder}\n              value={newKey}\n              onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewKey(e.target.value)}\n              disabled={disabled}\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n              aria-label=\"New key\"\n            />\n            <TextField\n              placeholder={valuePlaceholder}\n              value={newValue}\n              onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewValue(e.target.value)}\n              disabled={disabled}\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n              aria-label=\"New value\"\n              onKeyPress={(e: KeyboardEvent<HTMLInputElement>): void => {\n                if (e.key === 'Enter' && !isAddDisabled) {\n                  handleAddPair();\n                }\n              }}\n            />\n            <button\n              type=\"button\"\n              onClick={handleAddPair as MouseEventHandler<HTMLButtonElement>}\n              disabled={isAddDisabled}\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-button')), styles['addButton'])}\n              aria-label=\"Add new key-value pair\"\n            >\n              <Plus width={16} height={16} />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {(helperText || error) && (\n        <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'helper-text')), styles['helperText'])}>\n          {error || helperText}\n        </div>\n      )}\n\n      {maxPairs && (\n        <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'counter')), styles['counterText'])}>\n          {pairs.length} of {maxPairs} pairs used\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default KeyValueInput;\n"],"mappings":"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"}
+{"version":3,"file":"KeyValueInput.cjs","names":["KeyValueInput: FC<KeyValueInputProps>","useTheme","styles: Record<string, string>","useStyles","handleAddPair: ReturnType<typeof useCallback>","newPair: KeyValuePair","updatedPairs: KeyValuePair[]","handleRemovePair: ReturnType<typeof useCallback>","pairToRemove: KeyValuePair","handleUpdatePair: ReturnType<typeof useCallback>","canAddMore: boolean","isAddDisabled: boolean","cx","TextField","X","Plus"],"sources":["../../../../../src/components/primitives/KeyValueInput/KeyValueInput.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, KeyboardEvent, MouseEventHandler, ReactElement, useState, useCallback} from 'react';\nimport useStyles from './KeyValueInput.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {cx} from '../../../styles/emotion';\nimport {Plus, X} from '../Icons';\nimport TextField from '../TextField/TextField';\n\nexport interface KeyValuePair {\n  key: string;\n  value: string;\n}\n\nexport interface KeyValueInputProps {\n  /**\n   * CSS class name for styling the component.\n   */\n  className?: string;\n\n  /**\n   * Whether the input is disabled.\n   */\n  disabled?: boolean;\n\n  /**\n   * Error message to display.\n   */\n  error?: string;\n\n  /**\n   * Help text to display below the input.\n   */\n  helperText?: string;\n\n  /**\n   * Label for the key input field.\n   */\n  keyLabel?: string;\n\n  /**\n   * Placeholder text for the key input field.\n   */\n  keyPlaceholder?: string;\n\n  /**\n   * Label for the component.\n   */\n  label?: string;\n\n  /**\n   * Maximum number of key-value pairs allowed.\n   */\n  maxPairs?: number;\n  /**\n   * Callback fired when a pair is added.\n   */\n  onAdd?: (pair: KeyValuePair) => void;\n\n  /**\n   * Callback fired when the key-value pairs change.\n   */\n  onChange?: (pairs: KeyValuePair[]) => void;\n\n  /**\n   * Callback fired when a pair is removed.\n   */\n  onRemove?: (pair: KeyValuePair, index: number) => void;\n\n  /**\n   * Whether the component is in read-only mode.\n   */\n  readOnly?: boolean;\n\n  /**\n   * Text for the remove button.\n   */\n  removeButtonText?: string;\n\n  /**\n   * Whether the component is required.\n   */\n  required?: boolean;\n\n  /**\n   * Current key-value pairs.\n   */\n  value?: Record<string, any> | KeyValuePair[];\n\n  /**\n   * Label for the value input field.\n   */\n  valueLabel?: string;\n\n  /**\n   * Placeholder text for the value input field.\n   */\n  valuePlaceholder?: string;\n}\n\n/**\n * KeyValueInput component allows users to manage key-value pairs with add/remove functionality.\n * It provides a user-friendly interface for editing organization attributes or similar data structures.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <KeyValueInput\n *   label=\"Organization Attributes\"\n *   onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With initial values\n * <KeyValueInput\n *   label=\"Organization Attributes\"\n *   value={{department: 'IT', location: 'New York'}}\n *   onChange={(pairs) => console.log(pairs)}\n * />\n *\n * // With add/remove callbacks\n * <KeyValueInput\n *   label=\"Custom Attributes\"\n *   value={attributes}\n *   onChange={(pairs) => setAttributes(pairs)}\n *   onAdd={(pair) => console.log('Added:', pair)}\n *   onRemove={(pair, index) => console.log('Removed:', pair, 'at index:', index)}\n * />\n * ```\n */\nconst KeyValueInput: FC<KeyValueInputProps> = ({\n  className = '',\n  disabled = false,\n  error,\n  helperText,\n  keyLabel = 'Key',\n  keyPlaceholder = 'Enter key',\n  label,\n  maxPairs,\n  onChange,\n  onAdd,\n  onRemove,\n  readOnly = false,\n  removeButtonText = 'Remove',\n  required = false,\n  value = {},\n  valueLabel = 'Value',\n  valuePlaceholder = 'Enter value',\n}: KeyValueInputProps): ReactElement => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme, disabled, readOnly, !!error);\n\n  // Convert value to array format\n  const initialPairs: KeyValuePair[] = Array.isArray(value)\n    ? value\n    : Object.entries(value).map(([key, val]: [string, any]) => ({key, value: String(val)}));\n\n  const [pairs, setPairs] = useState<KeyValuePair[]>(initialPairs);\n  const [newKey, setNewKey] = useState('');\n  const [newValue, setNewValue] = useState('');\n\n  const handleAddPair: ReturnType<typeof useCallback> = useCallback(() => {\n    if (!newKey.trim() || !newValue.trim()) return;\n    if (maxPairs && pairs.length >= maxPairs) return;\n\n    const newPair: KeyValuePair = {\n      key: newKey.trim(),\n      value: newValue.trim(),\n    };\n\n    const updatedPairs: KeyValuePair[] = [...pairs, newPair];\n    setPairs(updatedPairs);\n    setNewKey('');\n    setNewValue('');\n\n    if (onChange) {\n      onChange(updatedPairs);\n    }\n\n    if (onAdd) {\n      onAdd(newPair);\n    }\n  }, [newKey, newValue, pairs, maxPairs, onChange, onAdd]);\n\n  const handleRemovePair: ReturnType<typeof useCallback> = useCallback(\n    (index: number) => {\n      const pairToRemove: KeyValuePair = pairs[index];\n      const updatedPairs: KeyValuePair[] = pairs.filter((_: KeyValuePair, i: number) => i !== index);\n      setPairs(updatedPairs);\n\n      if (onChange) {\n        onChange(updatedPairs);\n      }\n\n      if (onRemove) {\n        onRemove(pairToRemove, index);\n      }\n    },\n    [pairs, onChange, onRemove],\n  );\n\n  const handleUpdatePair: ReturnType<typeof useCallback> = useCallback(\n    (index: number, field: 'key' | 'value', newVal: string) => {\n      const updatedPairs: KeyValuePair[] = pairs.map((pair: KeyValuePair, i: number) => {\n        if (i === index) {\n          return {...pair, [field]: newVal};\n        }\n        return pair;\n      });\n      setPairs(updatedPairs);\n\n      if (onChange) {\n        onChange(updatedPairs);\n      }\n    },\n    [pairs, onChange],\n  );\n\n  const canAddMore: boolean = !maxPairs || pairs.length < maxPairs;\n  const isAddDisabled: boolean = disabled || readOnly || !canAddMore || !newKey.trim() || !newValue.trim();\n\n  const renderReadOnlyContent = (): ReactElement | ReactElement[] => {\n    if (pairs.length === 0) {\n      return (\n        <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'empty-state')), styles['emptyState'])}>\n          No attributes defined\n        </div>\n      );\n    }\n\n    return pairs.map((pair: KeyValuePair, index: number) => (\n      <div\n        key={`${pair.key}-${index}`}\n        className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-pair')), styles['readOnlyPair'])}\n      >\n        <span className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-key')), styles['readOnlyKey'])}>\n          {pair.key}:\n        </span>\n        <span\n          className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'readonly-value')), styles['readOnlyValue'])}\n        >\n          {pair.value}\n        </span>\n      </div>\n    ));\n  };\n\n  return (\n    <div className={cx(withVendorCSSClassPrefix(bem('key-value-input')), styles['container'], className)}>\n      {label && (\n        <label className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'label')), styles['label'])}>\n          {label}\n          {required && (\n            <span\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'required')), styles['requiredIndicator'])}\n            >\n              {' *'}\n            </span>\n          )}\n        </label>\n      )}\n\n      <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pairs-list')), styles['pairsList'])}>\n        {readOnly\n          ? renderReadOnlyContent()\n          : pairs.map((pair: KeyValuePair, index: number) => (\n              <div\n                key={`${pair.key}-${index}`}\n                className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-row')), styles['pairRow'])}\n              >\n                <TextField\n                  placeholder={keyPlaceholder}\n                  value={pair.key}\n                  onChange={(e: ChangeEvent<HTMLInputElement>): void => handleUpdatePair(index, 'key', e.target.value)}\n                  disabled={disabled || readOnly}\n                  className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n                  aria-label={`${keyLabel} ${index + 1}`}\n                />\n                <TextField\n                  placeholder={valuePlaceholder}\n                  value={pair.value}\n                  onChange={(e: ChangeEvent<HTMLInputElement>): void =>\n                    handleUpdatePair(index, 'value', e.target.value)\n                  }\n                  disabled={disabled || readOnly}\n                  className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n                  aria-label={`${valueLabel} ${index + 1}`}\n                />\n                {!readOnly && (\n                  <button\n                    type=\"button\"\n                    onClick={(): void => handleRemovePair(index)}\n                    disabled={disabled}\n                    className={cx(\n                      withVendorCSSClassPrefix(bem('key-value-input', 'remove-button')),\n                      styles['removeButton'],\n                    )}\n                    aria-label={`${removeButtonText} ${pair.key}`}\n                  >\n                    <X width={16} height={16} />\n                  </button>\n                )}\n              </div>\n            ))}\n\n        {!readOnly && (\n          <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-row')), styles['addRow'])}>\n            <TextField\n              placeholder={keyPlaceholder}\n              value={newKey}\n              onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewKey(e.target.value)}\n              disabled={disabled}\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n              aria-label=\"New key\"\n            />\n            <TextField\n              placeholder={valuePlaceholder}\n              value={newValue}\n              onChange={(e: ChangeEvent<HTMLInputElement>): void => setNewValue(e.target.value)}\n              disabled={disabled}\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'pair-input')), styles['pairInput'])}\n              aria-label=\"New value\"\n              onKeyPress={(e: KeyboardEvent<HTMLInputElement>): void => {\n                if (e.key === 'Enter' && !isAddDisabled) {\n                  handleAddPair();\n                }\n              }}\n            />\n            <button\n              type=\"button\"\n              onClick={handleAddPair as MouseEventHandler<HTMLButtonElement>}\n              disabled={isAddDisabled}\n              className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'add-button')), styles['addButton'])}\n              aria-label=\"Add new key-value pair\"\n            >\n              <Plus width={16} height={16} />\n            </button>\n          </div>\n        )}\n      </div>\n\n      {(helperText || error) && (\n        <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'helper-text')), styles['helperText'])}>\n          {error || helperText}\n        </div>\n      )}\n\n      {maxPairs && (\n        <div className={cx(withVendorCSSClassPrefix(bem('key-value-input', 'counter')), styles['counterText'])}>\n          {pairs.length} of {maxPairs} pairs used\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default KeyValueInput;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmIA,MAAMA,iBAAyC,EAC7C,YAAY,IACZ,WAAW,OACX,OACA,YACA,WAAW,OACX,iBAAiB,aACjB,OACA,UACA,UACA,OACA,UACA,WAAW,OACX,mBAAmB,UACnB,WAAW,OACX,QAAQ,EAAE,EACV,aAAa,SACb,mBAAmB,oBACmB;CACtC,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,qCAAU,OAAO,aAAa,UAAU,UAAU,CAAC,CAAC,MAAM;CAOjG,MAAM,CAAC,OAAO,gCAJuB,MAAM,QAAQ,MAAM,GACrD,QACA,OAAO,QAAQ,MAAM,CAAC,KAAK,CAAC,KAAK,UAAyB;EAAC;EAAK,OAAO,OAAO,IAAI;EAAC,EAAE,CAEzB;CAChE,MAAM,CAAC,QAAQ,iCAAsB,GAAG;CACxC,MAAM,CAAC,UAAU,mCAAwB,GAAG;CAE5C,MAAMC,6CAAkE;AACtE,MAAI,CAAC,OAAO,MAAM,IAAI,CAAC,SAAS,MAAM,CAAE;AACxC,MAAI,YAAY,MAAM,UAAU,SAAU;EAE1C,MAAMC,UAAwB;GAC5B,KAAK,OAAO,MAAM;GAClB,OAAO,SAAS,MAAM;GACvB;EAED,MAAMC,eAA+B,CAAC,GAAG,OAAO,QAAQ;AACxD,WAAS,aAAa;AACtB,YAAU,GAAG;AACb,cAAY,GAAG;AAEf,MAAI,SACF,UAAS,aAAa;AAGxB,MAAI,MACF,OAAM,QAAQ;IAEf;EAAC;EAAQ;EAAU;EAAO;EAAU;EAAU;EAAM,CAAC;CAExD,MAAMC,2CACH,UAAkB;EACjB,MAAMC,eAA6B,MAAM;EACzC,MAAMF,eAA+B,MAAM,QAAQ,GAAiB,MAAc,MAAM,MAAM;AAC9F,WAAS,aAAa;AAEtB,MAAI,SACF,UAAS,aAAa;AAGxB,MAAI,SACF,UAAS,cAAc,MAAM;IAGjC;EAAC;EAAO;EAAU;EAAS,CAC5B;CAED,MAAMG,2CACH,OAAe,OAAwB,WAAmB;EACzD,MAAMH,eAA+B,MAAM,KAAK,MAAoB,MAAc;AAChF,OAAI,MAAM,MACR,QAAO;IAAC,GAAG;KAAO,QAAQ;IAAO;AAEnC,UAAO;IACP;AACF,WAAS,aAAa;AAEtB,MAAI,SACF,UAAS,aAAa;IAG1B,CAAC,OAAO,SAAS,CAClB;CAED,MAAMI,aAAsB,CAAC,YAAY,MAAM,SAAS;CACxD,MAAMC,gBAAyB,YAAY,YAAY,CAAC,cAAc,CAAC,OAAO,MAAM,IAAI,CAAC,SAAS,MAAM;CAExG,MAAM,8BAA6D;AACjE,MAAI,MAAM,WAAW,EACnB,QACE,2CAAC;GAAI,WAAWC,kGAAgC,mBAAmB,cAAc,CAAC,EAAE,OAAO,cAAc;aAAE;IAErG;AAIV,SAAO,MAAM,KAAK,MAAoB,UACpC,4CAAC;GAEC,WAAWA,kGAAgC,mBAAmB,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;cAExG,4CAAC;IAAK,WAAWA,kGAAgC,mBAAmB,eAAe,CAAC,EAAE,OAAO,eAAe;eACzG,KAAK,KAAI;KACL,EACP,2CAAC;IACC,WAAWA,kGAAgC,mBAAmB,iBAAiB,CAAC,EAAE,OAAO,iBAAiB;cAEzG,KAAK;KACD;KAVF,GAAG,KAAK,IAAI,GAAG,QAWhB,CACN;;AAGJ,QACE,4CAAC;EAAI,WAAWA,kGAAgC,kBAAkB,CAAC,EAAE,OAAO,cAAc,UAAU;;GACjG,SACC,4CAAC;IAAM,WAAWA,kGAAgC,mBAAmB,QAAQ,CAAC,EAAE,OAAO,SAAS;eAC7F,OACA,YACC,2CAAC;KACC,WAAWA,kGAAgC,mBAAmB,WAAW,CAAC,EAAE,OAAO,qBAAqB;eAEvG;MACI;KAEH;GAGV,4CAAC;IAAI,WAAWA,kGAAgC,mBAAmB,aAAa,CAAC,EAAE,OAAO,aAAa;eACpG,WACG,uBAAuB,GACvB,MAAM,KAAK,MAAoB,UAC7B,4CAAC;KAEC,WAAWA,kGAAgC,mBAAmB,WAAW,CAAC,EAAE,OAAO,WAAW;;MAE9F,2CAACC;OACC,aAAa;OACb,OAAO,KAAK;OACZ,WAAW,MAA2C,iBAAiB,OAAO,OAAO,EAAE,OAAO,MAAM;OACpG,UAAU,YAAY;OACtB,WAAWD,kGAAgC,mBAAmB,aAAa,CAAC,EAAE,OAAO,aAAa;OAClG,cAAY,GAAG,SAAS,GAAG,QAAQ;QACnC;MACF,2CAACC;OACC,aAAa;OACb,OAAO,KAAK;OACZ,WAAW,MACT,iBAAiB,OAAO,SAAS,EAAE,OAAO,MAAM;OAElD,UAAU,YAAY;OACtB,WAAWD,kGAAgC,mBAAmB,aAAa,CAAC,EAAE,OAAO,aAAa;OAClG,cAAY,GAAG,WAAW,GAAG,QAAQ;QACrC;MACD,CAAC,YACA,2CAAC;OACC,MAAK;OACL,eAAqB,iBAAiB,MAAM;OAClC;OACV,WAAWA,kGACoB,mBAAmB,gBAAgB,CAAC,EACjE,OAAO,gBACR;OACD,cAAY,GAAG,iBAAiB,GAAG,KAAK;iBAExC,2CAACE;QAAE,OAAO;QAAI,QAAQ;SAAM;QACrB;;OAjCN,GAAG,KAAK,IAAI,GAAG,QAmChB,CACN,EAEL,CAAC,YACA,4CAAC;KAAI,WAAWF,kGAAgC,mBAAmB,UAAU,CAAC,EAAE,OAAO,UAAU;;MAC/F,2CAACC;OACC,aAAa;OACb,OAAO;OACP,WAAW,MAA2C,UAAU,EAAE,OAAO,MAAM;OACrE;OACV,WAAWD,kGAAgC,mBAAmB,aAAa,CAAC,EAAE,OAAO,aAAa;OAClG,cAAW;QACX;MACF,2CAACC;OACC,aAAa;OACb,OAAO;OACP,WAAW,MAA2C,YAAY,EAAE,OAAO,MAAM;OACvE;OACV,WAAWD,kGAAgC,mBAAmB,aAAa,CAAC,EAAE,OAAO,aAAa;OAClG,cAAW;OACX,aAAa,MAA6C;AACxD,YAAI,EAAE,QAAQ,WAAW,CAAC,cACxB,gBAAe;;QAGnB;MACF,2CAAC;OACC,MAAK;OACL,SAAS;OACT,UAAU;OACV,WAAWA,kGAAgC,mBAAmB,aAAa,CAAC,EAAE,OAAO,aAAa;OAClG,cAAW;iBAEX,2CAACG;QAAK,OAAO;QAAI,QAAQ;SAAM;QACxB;;MACL;KAEJ;IAEJ,cAAc,UACd,2CAAC;IAAI,WAAWH,kGAAgC,mBAAmB,cAAc,CAAC,EAAE,OAAO,cAAc;cACtG,SAAS;KACN;GAGP,YACC,4CAAC;IAAI,WAAWA,kGAAgC,mBAAmB,UAAU,CAAC,EAAE,OAAO,eAAe;;KACnG,MAAM;KAAO;KAAK;KAAS;;KACxB;;GAEJ;;AAIV,4BAAe"}

package/dist/cjs/components/primitives/KeyValueInput/KeyValueInput.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/KeyValueInput/KeyValueInput.styles.ts
 /**
@@ -15,27 +14,27 @@ __emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
 * @returns Object containing CSS class names for component styling
 */
 const useStyles = (theme, colorScheme, disabled, readOnly, hasError) => (0, react.useMemo)(() => {
-	const container = __emotion_css.css`
+	const container = require_emotion.css`
       display: flex;
       flex-direction: column;
       font-family: ${theme.vars.typography.fontFamily};
       gap: calc(${theme.vars.spacing.unit} / 2);
     `;
-	const label = __emotion_css.css`
+	const label = require_emotion.css`
       font-size: 0.875rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.primary};
       margin-bottom: calc(${theme.vars.spacing.unit} / 2);
     `;
-	const requiredIndicator = __emotion_css.css`
+	const requiredIndicator = require_emotion.css`
       color: ${theme.vars.colors.error.main};
     `;
-	const pairsList = __emotion_css.css`
+	const pairsList = require_emotion.css`
       display: flex;
       flex-direction: column;
       gap: calc(${theme.vars.spacing.unit} / 4);
     `;
-	const pairRow = __emotion_css.css`
+	const pairRow = require_emotion.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -48,11 +47,11 @@ const useStyles = (theme, colorScheme, disabled, readOnly, hasError) => (0, reac
         background-color: ${theme.vars.colors.action.hover};
       }
     `;
-	const pairInput = __emotion_css.css`
+	const pairInput = require_emotion.css`
       flex: 1;
       min-width: 0;
     `;
-	const addRow = __emotion_css.css`
+	const addRow = require_emotion.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
@@ -62,7 +61,7 @@ const useStyles = (theme, colorScheme, disabled, readOnly, hasError) => (0, reac
       background-color: transparent;
       margin-top: calc(${theme.vars.spacing.unit} / 2);
     `;
-	const removeButton = __emotion_css.css`
+	const removeButton = require_emotion.css`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -85,7 +84,7 @@ const useStyles = (theme, colorScheme, disabled, readOnly, hasError) => (0, reac
         opacity: 0.6;
       }
     `;
-	const addButton = __emotion_css.css`
+	const addButton = require_emotion.css`
       min-width: auto;
       width: 24px;
       height: 24px;
@@ -108,33 +107,33 @@ const useStyles = (theme, colorScheme, disabled, readOnly, hasError) => (0, reac
         opacity: 0.6;
       }
     `;
-	const helperText = __emotion_css.css`
+	const helperText = require_emotion.css`
       font-size: 0.75rem;
       color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.text.secondary};
       margin-top: calc(${theme.vars.spacing.unit} / 2);
     `;
-	const emptyState = __emotion_css.css`
+	const emptyState = require_emotion.css`
       padding: ${theme.vars.spacing.unit};
       text-align: center;
       color: ${theme.vars.colors.text.secondary};
       font-style: italic;
       font-size: 0.75rem;
     `;
-	const readOnlyPair = __emotion_css.css`
+	const readOnlyPair = require_emotion.css`
       display: flex;
       align-items: center;
       gap: calc(${theme.vars.spacing.unit} / 2);
       padding: calc(${theme.vars.spacing.unit} / 4) 0;
       min-height: 20px;
     `;
-	const readOnlyKey = __emotion_css.css`
+	const readOnlyKey = require_emotion.css`
       font-size: 0.75rem;
       font-weight: 500;
       color: ${theme.vars.colors.text.secondary};
       min-width: 80px;
       flex-shrink: 0;
     `;
-	const readOnlyValue = __emotion_css.css`
+	const readOnlyValue = require_emotion.css`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.primary};
       word-break: break-word;
@@ -144,7 +143,7 @@ const useStyles = (theme, colorScheme, disabled, readOnly, hasError) => (0, reac
 		addButton,
 		addRow,
 		container,
-		counterText: __emotion_css.css`
+		counterText: require_emotion.css`
       font-size: 0.75rem;
       color: ${theme.vars.colors.text.secondary};
       margin-top: calc(${theme.vars.spacing.unit} / 2);