@thunderid/react 0.12.0 → 0.13.0

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);

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