npm - @thunderid/react - Versions diffs - 0.11.2 → 0.11.4 - Mend

@thunderid/react 0.11.2 → 0.11.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (652) hide show

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

	@@ -1 +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":["/*\n Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\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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"}
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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"}

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

	@@ -1 +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":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\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":";;;;;;;;;;;;;;;;~~AA+BA~~,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"}
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"}

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

	@@ -1 +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":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\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":";;;;;;;;;;;;;;;;;~~AA0DA~~,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"}
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"}

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

	@@ -1 +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":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\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":";;;;;;;;;;;;;;~~AA+BA~~,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"}
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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInput.styles.cjs","names":["container: string","inputRow: string","inputWrapper: string","plusIcon: string","listContainer: string","listItem: string","listItemText: string","removeButton: string"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.styles.ts"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type MultiInputType = 'text' \| 'email' \| 'tel' \| 'url' \| 'password' \| 'date' \| 'boolean';\nexport type MultiInputFieldType = 'STRING' \| 'DATE_TIME' \| 'BOOLEAN';\n\n/\n Creates styles for the MultiInput component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param canAddMore - Whether more items can be added\n * @param canRemove - Whether items can be removed\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n disabled: boolean,\n hasError: boolean,\n canAddMore: boolean,\n canRemove: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const container: string = css`\n display: flex;\n flex-direction: column;\n gap: ${theme.vars.spacing.unit};\n `;\n\n const inputRow: string = css`\n display: flex;\n align-items: center;\n gap: ${theme.vars.spacing.unit};\n position: relative;\n `;\n\n const inputWrapper: string = css`\n flex: 1;\n `;\n\n const plusIcon: string = css`\n background: ${theme.vars.colors.secondary.main};\n border-radius: 50%;\n outline: 4px ${theme.vars.colors.secondary.main} auto;\n color: ${theme.vars.colors.secondary.contrastText};\n `;\n\n const listContainer: string = css`\n display: flex;\n flex-direction: column;\n gap: 0;\n `;\n\n const listItem: string = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} 1.5);\n background-color: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.medium};\n font-size: 1rem;\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n\n &:last-child {\n margin-bottom: 0;\n }\n `;\n\n const listItemText: string = css`\n flex: 1;\n word-break: break-word;\n `;\n\n const removeButton: string = css`\n padding: calc(${theme.vars.spacing.unit} / 2);\n min-width: auto;\n color: ${theme.vars.colors.error.main};\n background: transparent;\n border: none;\n border-radius: ${theme.vars.borderRadius.small};\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.action.hover};\n }\n\n &:disabled {\n opacity: 0.6;\n }\n `;\n\n const icon: string = css`\n width: 16px;\n height: 16px;\n stroke: currentColor;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n `;\n\n return {\n container,\n icon,\n inputRow,\n inputWrapper,\n listContainer,\n listItem,\n listItemText,\n plusIcon,\n removeButton,\n };\n }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;~~AAmCA~~,MAAM,aACJ,OACA,aACA,UACA,UACA,YACA,uCAEc;CACZ,MAAMA,YAAoB,iBAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,iBAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,iBAAG;;;CAIhC,MAAMC,WAAmB,iBAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,iBAAG;;;;;CAMjC,MAAMC,WAAmB,iBAAG;;;;iBAIf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;;;;;CAOhD,MAAMC,eAAuB,iBAAG;;;;CAKhC,MAAMC,eAAuB,iBAAG;sBACd,MAAM,KAAK,QAAQ,KAAK;;eAE/B,MAAM,KAAK,OAAO,MAAM,KAAK;;;uBAGrB,MAAM,KAAK,aAAa,MAAM;gBACrC,WAAW,gBAAgB,UAAU;;;;;;4BAMzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;;;;;AAkBvD,QAAO;EACL;EACA,MAZmB,iBAAG;;;;;;;;;EAatB;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAY;CAAU,CAAC;AAErE,gCAAe"}
1	+ {"version":3,"file":"MultiInput.styles.cjs","names":["container: string","inputRow: string","inputWrapper: string","plusIcon: string","listContainer: string","listItem: string","listItemText: string","removeButton: string"],"sources":["../../../../../src/components/primitives/MultiInput/MultiInput.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type MultiInputType = 'text' \| 'email' \| 'tel' \| 'url' \| 'password' \| 'date' \| 'boolean';\nexport type MultiInputFieldType = 'STRING' \| 'DATE_TIME' \| 'BOOLEAN';\n\n/*\n Creates styles for the MultiInput component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param canAddMore - Whether more items can be added\n * @param canRemove - Whether items can be removed\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n disabled: boolean,\n hasError: boolean,\n canAddMore: boolean,\n canRemove: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const container: string = css`\n display: flex;\n flex-direction: column;\n gap: ${theme.vars.spacing.unit};\n `;\n\n const inputRow: string = css`\n display: flex;\n align-items: center;\n gap: ${theme.vars.spacing.unit};\n position: relative;\n `;\n\n const inputWrapper: string = css`\n flex: 1;\n `;\n\n const plusIcon: string = css`\n background: ${theme.vars.colors.secondary.main};\n border-radius: 50%;\n outline: 4px ${theme.vars.colors.secondary.main} auto;\n color: ${theme.vars.colors.secondary.contrastText};\n `;\n\n const listContainer: string = css`\n display: flex;\n flex-direction: column;\n gap: 0;\n `;\n\n const listItem: string = css`\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} 1.5);\n background-color: ${theme.vars.colors.background.surface};\n border-radius: ${theme.vars.borderRadius.medium};\n font-size: 1rem;\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n margin-bottom: calc(${theme.vars.spacing.unit} / 2);\n\n &:last-child {\n margin-bottom: 0;\n }\n `;\n\n const listItemText: string = css`\n flex: 1;\n word-break: break-word;\n `;\n\n const removeButton: string = css`\n padding: calc(${theme.vars.spacing.unit} / 2);\n min-width: auto;\n color: ${theme.vars.colors.error.main};\n background: transparent;\n border: none;\n border-radius: ${theme.vars.borderRadius.small};\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n display: flex;\n align-items: center;\n justify-content: center;\n\n &:hover:not(:disabled) {\n background-color: ${theme.vars.colors.action.hover};\n }\n\n &:disabled {\n opacity: 0.6;\n }\n `;\n\n const icon: string = css`\n width: 16px;\n height: 16px;\n stroke: currentColor;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n fill: none;\n `;\n\n return {\n container,\n icon,\n inputRow,\n inputWrapper,\n listContainer,\n listItem,\n listItemText,\n plusIcon,\n removeButton,\n };\n }, [theme, colorScheme, disabled, hasError, canAddMore, canRemove]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,aACJ,OACA,aACA,UACA,UACA,YACA,uCAEc;CACZ,MAAMA,YAAoB,iBAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,iBAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,iBAAG;;;CAIhC,MAAMC,WAAmB,iBAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,iBAAG;;;;;CAMjC,MAAMC,WAAmB,iBAAG;;;;iBAIf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,WAAW,QAAQ;uBACxC,MAAM,KAAK,aAAa,OAAO;;qBAEjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;4BAClB,MAAM,KAAK,QAAQ,KAAK;;;;;;CAOhD,MAAMC,eAAuB,iBAAG;;;;CAKhC,MAAMC,eAAuB,iBAAG;sBACd,MAAM,KAAK,QAAQ,KAAK;;eAE/B,MAAM,KAAK,OAAO,MAAM,KAAK;;;uBAGrB,MAAM,KAAK,aAAa,MAAM;gBACrC,WAAW,gBAAgB,UAAU;;;;;;4BAMzB,MAAM,KAAK,OAAO,OAAO,MAAM;;;;;;;AAkBvD,QAAO;EACL;EACA,MAZmB,iBAAG;;;;;;;;;EAatB;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAY;CAAU,CAAC;AAErE,gCAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["/*\n Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n ClipboardEvent,\n FC,\n KeyboardEvent,\n ChangeEvent,\n MutableRefObject,\n useRef,\n useEffect,\n useState,\n CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' \| 'number' \| 'password';\n\nexport interface OtpInputProps {\n /\n Auto focus the first input on mount\n /\n autoFocus?: boolean;\n /\n Additional CSS class names\n /\n className?: string;\n /\n Whether the field is disabled\n /\n disabled?: boolean;\n /\n Error message to display below the OTP input\n /\n error?: string;\n /\n Helper text to display below the OTP input\n /\n helperText?: string;\n /\n Label text to display above the OTP input\n /\n label?: string;\n /\n Number of OTP input fields\n /\n length?: number;\n /\n Callback function called when OTP value changes\n /\n onChange?: (event: {target: {value: string}}) => void;\n /\n Callback function called when OTP input is complete\n /\n onComplete?: (value: string) => void;\n /\n Pattern for numeric input validation\n /\n pattern?: string;\n /\n Placeholder character for each input field\n /\n placeholder?: string;\n /\n Whether the field is required\n /\n required?: boolean;\n /\n Custom container style\n /\n style?: CSSProperties;\n /\n Type of input (text, number, password)\n /\n type?: OtpFieldType;\n /\n Current OTP value\n */\n value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n label,\n error,\n className,\n required,\n disabled,\n helperText,\n length = 6,\n value = '',\n onChange,\n onComplete,\n type = 'text',\n placeholder = '',\n style = {},\n autoFocus = false,\n pattern,\n}: OtpInputProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n useEffect(() => {\n inputRefs.current = inputRefs.current.slice(0, length);\n }, [length]);\n\n useEffect(() => {\n if (value) {\n const newOtp: string[] = value.split('').slice(0, length);\n while (newOtp.length < length) {\n newOtp.push('');\n }\n setOtp(newOtp);\n } else {\n setOtp(Array(length).fill(''));\n }\n }, [value, length]);\n\n useEffect(() => {\n if (autoFocus && inputRefs.current[0]) {\n inputRefs.current[0].focus();\n }\n }, [autoFocus]);\n\n const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n const newValue: string = event.target.value;\n\n if (newValue.length > 1) return;\n\n if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n const newOtp: string[] = [...otp];\n newOtp[index] = newValue;\n setOtp(newOtp);\n\n const otpValue: string = newOtp.join('');\n\n onChange?.({target: {value: otpValue}});\n\n if (newValue && index < length - 1) {\n inputRefs.current[index + 1]?.focus();\n }\n\n if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n onComplete(otpValue);\n }\n };\n\n const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n if (event.key === 'Backspace') {\n if (!otp[index] && index > 0) {\n const newOtp: string[] = [...otp];\n\n newOtp[index - 1] = '';\n setOtp(newOtp);\n inputRefs.current[index - 1]?.focus();\n onChange?.({target: {value: newOtp.join('')}});\n } else if (otp[index]) {\n const newOtp: string[] = [...otp];\n\n newOtp[index] = '';\n setOtp(newOtp);\n onChange?.({target: {value: newOtp.join('')}});\n }\n } else if (event.key === 'ArrowLeft' && index > 0) {\n inputRefs.current[index - 1]?.focus();\n } else if (event.key === 'ArrowRight' && index < length - 1) {\n inputRefs.current[index + 1]?.focus();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n\n if (otp.every((digit: string) => digit !== '') && onComplete) {\n onComplete(otp.join(''));\n }\n }\n };\n\n const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n event.preventDefault();\n\n const pastedData: string = event.clipboardData.getData('text').slice(0, length);\n\n let validData = '';\n\n Array.from(pastedData).forEach((char: string) => {\n if (type === 'number' && !/^\\d$/.test(char)) return;\n if (pattern && !new RegExp(pattern).test(char)) return;\n validData += char;\n });\n\n const newOtp: string[] = Array(length).fill('');\n\n for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n newOtp[i] = validData[i];\n }\n\n setOtp(newOtp);\n onChange?.({target: {value: newOtp.join('')}});\n\n const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n inputRefs.current[focusIndex]?.focus();\n\n if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n onComplete(newOtp.join(''));\n }\n };\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n helperTextAlign=\"center\"\n style={style}\n >\n {label && (\n <InputLabel required={required} error={!!error}>\n {label}\n </InputLabel>\n )}\n <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n {Array.from({length}, (_: unknown, index: number) => (\n <input\n key={index}\n ref={(el: HTMLInputElement \| null): void => {\n if (el) inputRefs.current[index] = el;\n }}\n type={type === 'password' ? 'password' : 'text'}\n inputMode={type === 'number' ? 'numeric' : 'text'}\n value={otp[index] \|\| ''}\n onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n onPaste={handlePaste}\n className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n [styles['inputError']]: !!error,\n [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n [styles['inputDisabled']]: !!disabled,\n })}\n maxLength={1}\n placeholder={placeholder}\n disabled={disabled}\n aria-label={`${label \|\| 'OTP'} digit ${index + 1}`}\n aria-invalid={!!error}\n aria-required={required}\n autoComplete=\"one-time-code\"\n />\n ))}\n </div>\n </FormControl>\n );\n};\n\nexport default OtpField;\n"],"mappings":"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"}
1	+ {"version":3,"file":"OtpField.cjs","names":["OtpField: FC<OtpInputProps>","useTheme","styles: Record<string, string>","useStyles","inputRefs: MutableRefObject<HTMLInputElement[]>","newOtp: string[]","newValue: string","otpValue: string","pastedData: string","nextEmptyIndex: number","focusIndex: number","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {\n ClipboardEvent,\n FC,\n KeyboardEvent,\n ChangeEvent,\n MutableRefObject,\n useRef,\n useEffect,\n useState,\n CSSProperties,\n} from 'react';\nimport useStyles from './OtpField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport type OtpFieldType = 'text' \| 'number' \| 'password';\n\nexport interface OtpInputProps {\n /*\n Auto focus the first input on mount\n /\n autoFocus?: boolean;\n /\n Additional CSS class names\n /\n className?: string;\n /\n Whether the field is disabled\n /\n disabled?: boolean;\n /\n Error message to display below the OTP input\n /\n error?: string;\n /\n Helper text to display below the OTP input\n /\n helperText?: string;\n /\n Label text to display above the OTP input\n /\n label?: string;\n /\n Number of OTP input fields\n /\n length?: number;\n /\n Callback function called when OTP value changes\n /\n onChange?: (event: {target: {value: string}}) => void;\n /\n Callback function called when OTP input is complete\n /\n onComplete?: (value: string) => void;\n /\n Pattern for numeric input validation\n /\n pattern?: string;\n /\n Placeholder character for each input field\n /\n placeholder?: string;\n /\n Whether the field is required\n /\n required?: boolean;\n /\n Custom container style\n /\n style?: CSSProperties;\n /\n Type of input (text, number, password)\n /\n type?: OtpFieldType;\n /\n Current OTP value\n */\n value?: string;\n}\n\nconst OtpField: FC<OtpInputProps> = ({\n label,\n error,\n className,\n required,\n disabled,\n helperText,\n length = 6,\n value = '',\n onChange,\n onComplete,\n type = 'text',\n placeholder = '',\n style = {},\n autoFocus = false,\n pattern,\n}: OtpInputProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, !!disabled, !!error, length);\n const [otp, setOtp] = useState<string[]>(Array(length).fill(''));\n const inputRefs: MutableRefObject<HTMLInputElement[]> = useRef<HTMLInputElement[]>([]);\n\n useEffect(() => {\n inputRefs.current = inputRefs.current.slice(0, length);\n }, [length]);\n\n useEffect(() => {\n if (value) {\n const newOtp: string[] = value.split('').slice(0, length);\n while (newOtp.length < length) {\n newOtp.push('');\n }\n setOtp(newOtp);\n } else {\n setOtp(Array(length).fill(''));\n }\n }, [value, length]);\n\n useEffect(() => {\n if (autoFocus && inputRefs.current[0]) {\n inputRefs.current[0].focus();\n }\n }, [autoFocus]);\n\n const handleChange = (index: number, event: ChangeEvent<HTMLInputElement>): void => {\n const newValue: string = event.target.value;\n\n if (newValue.length > 1) return;\n\n if (type === 'number' && newValue && !/^\\d$/.test(newValue)) return;\n\n if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;\n\n const newOtp: string[] = [...otp];\n newOtp[index] = newValue;\n setOtp(newOtp);\n\n const otpValue: string = newOtp.join('');\n\n onChange?.({target: {value: otpValue}});\n\n if (newValue && index < length - 1) {\n inputRefs.current[index + 1]?.focus();\n }\n\n if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n onComplete(otpValue);\n }\n };\n\n const handleKeyDown = (index: number, event: KeyboardEvent<HTMLInputElement>): void => {\n if (event.key === 'Backspace') {\n if (!otp[index] && index > 0) {\n const newOtp: string[] = [...otp];\n\n newOtp[index - 1] = '';\n setOtp(newOtp);\n inputRefs.current[index - 1]?.focus();\n onChange?.({target: {value: newOtp.join('')}});\n } else if (otp[index]) {\n const newOtp: string[] = [...otp];\n\n newOtp[index] = '';\n setOtp(newOtp);\n onChange?.({target: {value: newOtp.join('')}});\n }\n } else if (event.key === 'ArrowLeft' && index > 0) {\n inputRefs.current[index - 1]?.focus();\n } else if (event.key === 'ArrowRight' && index < length - 1) {\n inputRefs.current[index + 1]?.focus();\n } else if (event.key === 'Enter') {\n event.preventDefault();\n\n if (otp.every((digit: string) => digit !== '') && onComplete) {\n onComplete(otp.join(''));\n }\n }\n };\n\n const handlePaste = (event: ClipboardEvent<HTMLInputElement>): void => {\n event.preventDefault();\n\n const pastedData: string = event.clipboardData.getData('text').slice(0, length);\n\n let validData = '';\n\n Array.from(pastedData).forEach((char: string) => {\n if (type === 'number' && !/^\\d$/.test(char)) return;\n if (pattern && !new RegExp(pattern).test(char)) return;\n validData += char;\n });\n\n const newOtp: string[] = Array(length).fill('');\n\n for (let i = 0; i < Math.min(validData.length, length); i += 1) {\n newOtp[i] = validData[i];\n }\n\n setOtp(newOtp);\n onChange?.({target: {value: newOtp.join('')}});\n\n const nextEmptyIndex: number = newOtp.findIndex((digit: string) => digit === '');\n const focusIndex: number = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;\n\n inputRefs.current[focusIndex]?.focus();\n\n if (newOtp.every((digit: string) => digit !== '') && onComplete) {\n onComplete(newOtp.join(''));\n }\n };\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('otp-field')), className)}\n helperTextAlign=\"center\"\n style={style}\n >\n {label && (\n <InputLabel required={required} error={!!error}>\n {label}\n </InputLabel>\n )}\n <div className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input-container')), styles['inputContainer'])}>\n {Array.from({length}, (_: unknown, index: number) => (\n <input\n key={index}\n ref={(el: HTMLInputElement \| null): void => {\n if (el) inputRefs.current[index] = el;\n }}\n type={type === 'password' ? 'password' : 'text'}\n inputMode={type === 'number' ? 'numeric' : 'text'}\n value={otp[index] \|\| ''}\n onChange={(event: ChangeEvent<HTMLInputElement>): void => handleChange(index, event)}\n onKeyDown={(event: KeyboardEvent<HTMLInputElement>): void => handleKeyDown(index, event)}\n onPaste={handlePaste}\n className={cx(withVendorCSSClassPrefix(bem('otp-field', 'input')), styles['input'], {\n [withVendorCSSClassPrefix(bem('otp-field', 'input', 'error'))]: !!error,\n [styles['inputError']]: !!error,\n [withVendorCSSClassPrefix(bem('otp-field', 'input', 'disabled'))]: !!disabled,\n [styles['inputDisabled']]: !!disabled,\n })}\n maxLength={1}\n placeholder={placeholder}\n disabled={disabled}\n aria-label={`${label \|\| 'OTP'} digit ${index + 1}`}\n aria-invalid={!!error}\n aria-required={required}\n autoComplete=\"one-time-code\"\n />\n ))}\n </div>\n </FormControl>\n );\n};\n\nexport default OtpField;\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.styles.cjs","names":["inputContainer: string","input: string","inputError: string"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.styles.ts"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2024, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type OtpFieldType = 'text' \| 'number' \| 'password';\n\n/\n Creates styles for the OtpField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param length - Number of OTP input fields\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n disabled: boolean,\n hasError: boolean,\n length: number,\n): Record<string, string> =>\n useMemo(() => {\n const inputContainer: string = css`\n display: flex;\n gap: ${theme.vars.spacing.unit};\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n `;\n\n const input: string = css`\n width: calc(${theme.vars.spacing.unit} 6);\n height: calc(${theme.vars.spacing.unit} * 6);\n text-align: center;\n font-size: ${theme.vars.typography.fontSizes.xl};\n font-family: ${theme.vars.typography.fontFamily};\n font-weight: 500;\n border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n &::placeholder {\n color: ${theme.vars.colors.text.secondary};\n opacity: 0.7;\n }\n `;\n\n const inputError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n `;\n\n const inputDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n cursor: not-allowed;\n opacity: 0.6;\n `;\n\n return {\n input,\n inputContainer,\n inputDisabled,\n inputError,\n };\n }, [theme, colorScheme, disabled, hasError, length]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;~~AAiCA~~,MAAM,aACJ,OACA,aACA,UACA,UACA,oCAEc;CACZ,MAAMA,iBAAyB,iBAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,iBAAG;oBACT,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;;mBAE1B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;0BAE5B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;eAC3F,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;iBAStG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,iBAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,iBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}
1	+ {"version":3,"file":"OtpField.styles.cjs","names":["inputContainer: string","input: string","inputError: string"],"sources":["../../../../../src/components/primitives/OtpField/OtpField.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type OtpFieldType = 'text' \| 'number' \| 'password';\n\n/*\n Creates styles for the OtpField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param length - Number of OTP input fields\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n disabled: boolean,\n hasError: boolean,\n length: number,\n): Record<string, string> =>\n useMemo(() => {\n const inputContainer: string = css`\n display: flex;\n gap: ${theme.vars.spacing.unit};\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n `;\n\n const input: string = css`\n width: calc(${theme.vars.spacing.unit} 6);\n height: calc(${theme.vars.spacing.unit} * 6);\n text-align: center;\n font-size: ${theme.vars.typography.fontSizes.xl};\n font-family: ${theme.vars.typography.fontFamily};\n font-weight: 500;\n border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n &::placeholder {\n color: ${theme.vars.colors.text.secondary};\n opacity: 0.7;\n }\n `;\n\n const inputError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n `;\n\n const inputDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n cursor: not-allowed;\n opacity: 0.6;\n `;\n\n return {\n input,\n inputContainer,\n inputDisabled,\n inputError,\n };\n }, [theme, colorScheme, disabled, hasError, length]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAkBA,MAAM,aACJ,OACA,aACA,UACA,UACA,oCAEc;CACZ,MAAMA,iBAAyB,iBAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,iBAAG;oBACT,MAAM,KAAK,QAAQ,KAAK;qBACvB,MAAM,KAAK,QAAQ,KAAK;;mBAE1B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;0BAE5B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;eAC3F,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;iBAStG,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,iBAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,iBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}

package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.cjs","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {ChangeEvent, FC, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' \| 'endIcon' \| 'onEndIconClick' \| 'onChange'> {\n /\n Callback function when the field value changes\n /\n onChange: (value: string) => void;\n}\n\n/\n Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n onChange,\n className,\n disabled,\n error,\n ...textFieldProps\n}: PasswordFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const [showPassword, setShowPassword] = useState(false);\n const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n const togglePasswordVisibility = (): void => {\n if (!disabled) {\n setShowPassword(!showPassword);\n }\n };\n\n const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n return (\n <TextField\n {...textFieldProps}\n className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n type={showPassword ? 'text' : 'password'}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"current-password\"\n disabled={disabled}\n error={error}\n endIcon={\n <IconComponent\n width={16}\n height={16}\n className={cx(\n withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n styles['toggleIcon'],\n showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n )}\n />\n }\n onEndIconClick={togglePasswordVisibility}\n />\n );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;~~AAsCA~~,MAAMA,iBAAyC,EAC7C,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAMC,SAAiCC,qCAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,yBAASC;AAE3E,QACE,2CAACC;EACC,GAAI;EACJ,gHAA2C,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAC9E,cAAa;EACH;EACH;EACP,SACE,2CAAC;GACC,OAAO;GACP,QAAQ;GACR,gHAC+B,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}
1	+ {"version":3,"file":"PasswordField.cjs","names":["PasswordField: FC<PasswordFieldProps>","useTheme","styles: Record<string, string>","useStyles","IconComponent: FC<SVGProps<SVGSVGElement>>","EyeOff","Eye","TextField"],"sources":["../../../../../src/components/primitives/PasswordField/PasswordField.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, SVGProps, useState} from 'react';\nimport useStyles from './PasswordField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport Eye from '../Icons/Eye';\nimport EyeOff from '../Icons/EyeOff';\nimport TextField, {TextFieldProps} from '../TextField/TextField';\n\nexport interface PasswordFieldProps extends Omit<TextFieldProps, 'type' \| 'endIcon' \| 'onEndIconClick' \| 'onChange'> {\n /*\n Callback function when the field value changes\n /\n onChange: (value: string) => void;\n}\n\n/\n Password field component with show/hide toggle functionality.\n * This component extends TextField and adds password visibility toggle functionality.\n */\nconst PasswordField: FC<PasswordFieldProps> = ({\n onChange,\n className,\n disabled,\n error,\n ...textFieldProps\n}: PasswordFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const [showPassword, setShowPassword] = useState(false);\n const styles: Record<string, string> = useStyles(theme, colorScheme, showPassword, !!disabled, !!error);\n\n const togglePasswordVisibility = (): void => {\n if (!disabled) {\n setShowPassword(!showPassword);\n }\n };\n\n const IconComponent: FC<SVGProps<SVGSVGElement>> = showPassword ? EyeOff : Eye;\n\n return (\n <TextField\n {...textFieldProps}\n className={cx(withVendorCSSClassPrefix(bem('password-field')), className)}\n type={showPassword ? 'text' : 'password'}\n onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n autoComplete=\"current-password\"\n disabled={disabled}\n error={error}\n endIcon={\n <IconComponent\n width={16}\n height={16}\n className={cx(\n withVendorCSSClassPrefix(bem('password-field', 'toggle-icon')),\n styles['toggleIcon'],\n showPassword ? styles['visibleIcon'] : styles['hiddenIcon'],\n )}\n />\n }\n onEndIconClick={togglePasswordVisibility}\n />\n );\n};\n\nexport default PasswordField;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAMA,iBAAyC,EAC7C,UACA,WACA,UACA,MACA,GAAG,qBACqB;CACxB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,CAAC,cAAc,uCAA4B,MAAM;CACvD,MAAMC,SAAiCC,qCAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,yBAASC;AAE3E,QACE,2CAACC;EACC,GAAI;EACJ,gHAA2C,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAC9E,cAAa;EACH;EACH;EACP,SACE,2CAAC;GACC,OAAO;GACP,QAAQ;GACR,gHAC+B,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}

package/dist/cjs/components/primitives/PasswordField/PasswordField.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.styles.cjs","names":["toggleIcon: string","visibleIcon: string"],"sources":["../../../../../src/components/primitives/PasswordField/PasswordField.styles.ts"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/\n Creates styles for the PasswordField 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 showPassword - Whether the password is currently visible\n * @param disabled - Whether the component is disabled\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 showPassword: boolean,\n disabled: boolean,\n hasError: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const toggleIcon: string = css`\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n color: ${theme.vars.colors.text.secondary};\n opacity: ${disabled ? 0.6 : 1};\n transition: color 0.2s ease;\n\n &:hover {\n color: ${!disabled ? theme.vars.colors.text.primary : theme.vars.colors.text.secondary};\n }\n `;\n\n const visibleIcon: string = css`\n color: ${theme.vars.colors.primary.main};\n `;\n\n const hiddenIcon: string = css`\n color: ${theme.vars.colors.text.secondary};\n `;\n\n return {\n hiddenIcon,\n toggleIcon,\n visibleIcon,\n };\n }, [theme, colorScheme, showPassword, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;~~AA+BA~~,MAAM,aACJ,OACA,aACA,cACA,UACA,sCAEc;CACZ,MAAMA,aAAqB,iBAAG;gBAClB,WAAW,gBAAgB,UAAU;eACtC,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;iBAInB,CAAC,WAAW,MAAM,KAAK,OAAO,KAAK,UAAU,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI3F,MAAMC,cAAsB,iBAAG;eACpB,MAAM,KAAK,OAAO,QAAQ,KAAK;;AAO1C,QAAO;EACL,YALyB,iBAAG;eACnB,MAAM,KAAK,OAAO,KAAK,UAAU;;EAK1C;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAc;CAAU;CAAS,CAAC;AAE5D,mCAAe"}
1	+ {"version":3,"file":"PasswordField.styles.cjs","names":["toggleIcon: string","visibleIcon: string"],"sources":["../../../../../src/components/primitives/PasswordField/PasswordField.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 PasswordField 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 showPassword - Whether the password is currently visible\n * @param disabled - Whether the component is disabled\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 showPassword: boolean,\n disabled: boolean,\n hasError: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const toggleIcon: string = css`\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n color: ${theme.vars.colors.text.secondary};\n opacity: ${disabled ? 0.6 : 1};\n transition: color 0.2s ease;\n\n &:hover {\n color: ${!disabled ? theme.vars.colors.text.primary : theme.vars.colors.text.secondary};\n }\n `;\n\n const visibleIcon: string = css`\n color: ${theme.vars.colors.primary.main};\n `;\n\n const hiddenIcon: string = css`\n color: ${theme.vars.colors.text.secondary};\n `;\n\n return {\n hiddenIcon,\n toggleIcon,\n visibleIcon,\n };\n }, [theme, colorScheme, showPassword, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,aACJ,OACA,aACA,cACA,UACA,sCAEc;CACZ,MAAMA,aAAqB,iBAAG;gBAClB,WAAW,gBAAgB,UAAU;eACtC,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;iBAInB,CAAC,WAAW,MAAM,KAAK,OAAO,KAAK,UAAU,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI3F,MAAMC,cAAsB,iBAAG;eACpB,MAAM,KAAK,OAAO,QAAQ,KAAK;;AAO1C,QAAO;EACL,YALyB,iBAAG;eACnB,MAAM,KAAK,OAAO,KAAK,UAAU;;EAK1C;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAc;CAAU;CAAS,CAAC;AAE5D,mCAAe"}

package/dist/cjs/components/primitives/Select/Select.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.cjs","names":["Select: FC<SelectProps>","useTheme","styles: Record<string, string>","useStyles","selectClassName: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2024, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, SelectHTMLAttributes} from 'react';\nimport useStyles from './Select.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface SelectOption {\n /\n The text that will be displayed in the select\n /\n label: string;\n /\n The value that will be submitted with the form\n /\n value: string;\n}\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\n /\n Additional CSS class names\n /\n className?: string;\n /\n Whether the field is disabled\n /\n disabled?: boolean;\n /\n Error message to display below the select\n /\n error?: string;\n /\n Helper text to display below the select\n /\n helperText?: string;\n /\n Label text to display above the select\n /\n label?: string;\n /\n The options to display in the select\n /\n options: SelectOption[];\n /\n Placeholder text for the default/empty option\n /\n placeholder?: string;\n /\n Whether the field is required\n */\n required?: boolean;\n}\n\nconst Select: FC<SelectProps> = ({\n label,\n error,\n className,\n required,\n disabled,\n helperText,\n placeholder,\n options,\n style = {},\n ...rest\n}: SelectProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const hasError = !!error;\n const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n\n const selectClassName: string = cx(\n withVendorCSSClassPrefix(bem('select', 'input')),\n styles['select'],\n hasError && styles['selectError'],\n disabled && styles['selectDisabled'],\n );\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n style={style}\n >\n {label && (\n <InputLabel required={required} error={hasError}>\n {label}\n </InputLabel>\n )}\n <select\n className={selectClassName}\n disabled={disabled}\n aria-invalid={hasError}\n aria-required={required}\n {...rest}\n >\n {placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {options.map((option: SelectOption) => (\n <option key={option.value} value={option.value} className={styles['option']}>\n {option.label}\n </option>\n ))}\n </select>\n </FormControl>\n );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;~~AAwEA~~,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,SACA,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,uHACyB,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,2CAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,2CAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}
1	+ {"version":3,"file":"Select.cjs","names":["Select: FC<SelectProps>","useTheme","styles: Record<string, string>","useStyles","selectClassName: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Select/Select.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, SelectHTMLAttributes} from 'react';\nimport useStyles from './Select.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface SelectOption {\n /*\n The text that will be displayed in the select\n /\n label: string;\n /\n The value that will be submitted with the form\n /\n value: string;\n}\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'className'> {\n /\n Additional CSS class names\n /\n className?: string;\n /\n Whether the field is disabled\n /\n disabled?: boolean;\n /\n Error message to display below the select\n /\n error?: string;\n /\n Helper text to display below the select\n /\n helperText?: string;\n /\n Label text to display above the select\n /\n label?: string;\n /\n The options to display in the select\n /\n options: SelectOption[];\n /\n Placeholder text for the default/empty option\n /\n placeholder?: string;\n /\n Whether the field is required\n */\n required?: boolean;\n}\n\nconst Select: FC<SelectProps> = ({\n label,\n error,\n className,\n required,\n disabled,\n helperText,\n placeholder,\n options,\n style = {},\n ...rest\n}: SelectProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const hasError = !!error;\n const styles: Record<string, string> = useStyles(theme, colorScheme, disabled ?? false, hasError);\n\n const selectClassName: string = cx(\n withVendorCSSClassPrefix(bem('select', 'input')),\n styles['select'],\n hasError && styles['selectError'],\n disabled && styles['selectDisabled'],\n );\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('select')), className)}\n style={style}\n >\n {label && (\n <InputLabel required={required} error={hasError}>\n {label}\n </InputLabel>\n )}\n <select\n className={selectClassName}\n disabled={disabled}\n aria-invalid={hasError}\n aria-required={required}\n {...rest}\n >\n {placeholder && (\n <option value=\"\" disabled>\n {placeholder}\n </option>\n )}\n {options.map((option: SelectOption) => (\n <option key={option.value} value={option.value} className={styles['option']}>\n {option.label}\n </option>\n ))}\n </select>\n </FormControl>\n );\n};\n\nexport default Select;\n"],"mappings":";;;;;;;;;;;;;AAyDA,MAAMA,UAA2B,EAC/B,OACA,OACA,WACA,UACA,UACA,YACA,aACA,SACA,QAAQ,EAAE,CACV,GAAG,WACc;CACjB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,uHACyB,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,2CAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,2CAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}

package/dist/cjs/components/primitives/Select/Select.styles.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.styles.cjs","names":["select: string","selectError: string","selectDisabled: string"],"sources":["../../../../../src/components/primitives/Select/Select.styles.ts"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2024, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/\n Creates styles for the Select component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n useMemo(() => {\n const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n const select: string = css`\n width: 100%;\n padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} 1.5);\n border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n font-size: ${theme.vars.typography.fontSizes.md};\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n appearance: none;\n background-image: url('${dropdownArrow}');\n background-repeat: no-repeat;\n background-position: right 0.7em top 50%;\n background-size: 0.65em auto;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &:hover:not(:disabled) {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n }\n `;\n\n const selectError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n\n &:hover:not(:disabled) {\n border-color: ${theme.vars.colors.error.main};\n }\n `;\n\n const selectDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n opacity: 0.6;\n cursor: not-allowed;\n `;\n\n const option: string = css`\n padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n color: ${theme.vars.colors.text.primary};\n background-color: ${theme.vars.colors.background.surface};\n\n &:hover {\n background-color: ${theme.vars.colors.action.hover};\n }\n\n &:checked {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n }\n `;\n\n return {\n option,\n select,\n selectDisabled,\n selectError,\n };\n }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;~~AA8BA~~,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,iBAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAI7F,MAAMC,cAAsB,iBAAG;sBACb,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,iBAAyB,iBAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,iBAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;EAMlD;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}
1	+ {"version":3,"file":"Select.styles.cjs","names":["select: string","selectError: string","selectDisabled: string"],"sources":["../../../../../src/components/primitives/Select/Select.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/*\n Creates styles for the Select component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (theme: Theme, colorScheme: string, disabled: boolean, hasError: boolean): Record<string, string> =>\n useMemo(() => {\n const dropdownArrowColor: string = theme.colors.text.secondary.replace('#', '');\n const dropdownArrow = `data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23${dropdownArrowColor}%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E`;\n\n const select: string = css`\n width: 100%;\n padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} 1.5);\n border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n font-size: ${theme.vars.typography.fontSizes.md};\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n appearance: none;\n background-image: url('${dropdownArrow}');\n background-repeat: no-repeat;\n background-position: right 0.7em top 50%;\n background-size: 0.65em auto;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &:hover:not(:disabled) {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n }\n `;\n\n const selectError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n\n &:hover:not(:disabled) {\n border-color: ${theme.vars.colors.error.main};\n }\n `;\n\n const selectDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n opacity: 0.6;\n cursor: not-allowed;\n `;\n\n const option: string = css`\n padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n color: ${theme.vars.colors.text.primary};\n background-color: ${theme.vars.colors.background.surface};\n\n &:hover {\n background-color: ${theme.vars.colors.action.hover};\n }\n\n &:checked {\n background-color: ${theme.vars.colors.primary.main};\n color: ${theme.vars.colors.primary.contrastText};\n }\n `;\n\n return {\n option,\n select,\n selectDisabled,\n selectError,\n };\n }, [theme, colorScheme, disabled, hasError]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,iBAAG;;iBAEb,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;+BAMnF,cAAc;;;;gBAI7B,WAAW,gBAAgB,UAAU;;;wBAG7B,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAI7F,MAAMC,cAAsB,iBAAG;sBACb,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,iBAAyB,iBAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,iBAAG;sBACR,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;eAC/D,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;4BAGnC,MAAM,KAAK,OAAO,OAAO,MAAM;;;;4BAI/B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;;;EAMlD;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.cjs","names":["Spinner: FC<SpinnerProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.tsx"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, CSSProperties} from 'react';\nimport useStyles from './Spinner.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type SpinnerSize = 'small' \| 'medium' \| 'large';\n\nexport interface SpinnerProps {\n /\n Additional CSS class names\n /\n className?: string;\n /\n Custom color for the spinner\n /\n color?: string;\n /\n Size of the spinner\n /\n size?: SpinnerSize;\n /\n Custom styles\n /\n style?: CSSProperties;\n}\n\n/\n Spinner component for loading states\n \n @example\n * ```tsx\n * // Basic spinner\n * <Spinner />\n \n // Large spinner with custom color\n * <Spinner size=\"large\" color=\"#3b82f6\" />\n \n // Small spinner\n * <Spinner size=\"small\" />\n * ```\n */\nconst Spinner: FC<SpinnerProps> = ({size = 'medium', color, className, style}: SpinnerProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, size, color);\n\n const spinnerClassName: string = cx(\n withVendorCSSClassPrefix(bem('spinner')),\n styles['spinner'],\n size === 'small' && styles['spinnerSmall'],\n size === 'medium' && styles['spinnerMedium'],\n size === 'large' && styles['spinnerLarge'],\n className,\n );\n\n return <span className={spinnerClassName} style={style} role=\"status\" aria-label=\"Loading\" />;\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;~~AA4DA~~,MAAMA,WAA6B,EAAC,OAAO,UAAU,OAAO,WAAW,YAAyB;CAC9F,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,+BAAU,OAAO,aAAa,MAAM,MAAM;AAWjF,QAAO,2CAAC;EAAK,gHARkB,UAAU,CAAC,EACxC,OAAO,YACP,SAAS,WAAW,OAAO,iBAC3B,SAAS,YAAY,OAAO,kBAC5B,SAAS,WAAW,OAAO,iBAC3B,UACD;EAEgD;EAAO,MAAK;EAAS,cAAW;GAAY;;AAG/F,sBAAe"}
1	+ {"version":3,"file":"Spinner.cjs","names":["Spinner: FC<SpinnerProps>","useTheme","styles: Record<string, string>","useStyles"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.tsx"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, CSSProperties} from 'react';\nimport useStyles from './Spinner.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport type SpinnerSize = 'small' \| 'medium' \| 'large';\n\nexport interface SpinnerProps {\n /*\n Additional CSS class names\n /\n className?: string;\n /\n Custom color for the spinner\n /\n color?: string;\n /\n Size of the spinner\n /\n size?: SpinnerSize;\n /\n Custom styles\n /\n style?: CSSProperties;\n}\n\n/\n Spinner component for loading states\n \n @example\n * ```tsx\n * // Basic spinner\n * <Spinner />\n \n // Large spinner with custom color\n * <Spinner size=\"large\" color=\"#3b82f6\" />\n \n // Small spinner\n * <Spinner size=\"small\" />\n * ```\n */\nconst Spinner: FC<SpinnerProps> = ({size = 'medium', color, className, style}: SpinnerProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const styles: Record<string, string> = useStyles(theme, colorScheme, size, color);\n\n const spinnerClassName: string = cx(\n withVendorCSSClassPrefix(bem('spinner')),\n styles['spinner'],\n size === 'small' && styles['spinnerSmall'],\n size === 'medium' && styles['spinnerMedium'],\n size === 'large' && styles['spinnerLarge'],\n className,\n );\n\n return <span className={spinnerClassName} style={style} role=\"status\" aria-label=\"Loading\" />;\n};\n\nexport default Spinner;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAMA,WAA6B,EAAC,OAAO,UAAU,OAAO,WAAW,YAAyB;CAC9F,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,+BAAU,OAAO,aAAa,MAAM,MAAM;AAWjF,QAAO,2CAAC;EAAK,gHARkB,UAAU,CAAC,EACxC,OAAO,YACP,SAAS,WAAW,OAAO,iBAC3B,SAAS,YAAY,OAAO,kBAC5B,SAAS,WAAW,OAAO,iBAC3B,UACD;EAEgD;EAAO,MAAK;EAAS,cAAW;GAAY;;AAG/F,sBAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.styles.cjs","names":["spinnerColor: string","spinnerSizes: Record<string, string>","spinnerSize: string","spinner: string","spinnerSmall: string","spinnerMedium: string"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.styles.ts"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2025, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {css, keyframes} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type SpinnerSize = 'small' \| 'medium' \| 'large';\n\n/\n Creates styles for the Spinner component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the spinner\n * @param color - The color of the spinner\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string): Record<string, string> =>\n useMemo(() => {\n const spinnerColor: string = color \|\| theme.vars.colors.primary.main;\n\n const spinnerSizes: Record<string, string> = {\n large: '32px',\n medium: '20px',\n small: '16px',\n };\n\n const spinnerSize: string = spinnerSizes[size];\n\n const spinAnimation: string = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n `;\n\n const spinner: string = css`\n width: ${spinnerSize};\n height: ${spinnerSize};\n border: 2px solid transparent;\n border-top: 2px solid ${spinnerColor};\n border-radius: 50%;\n animation: ${spinAnimation} 1s linear infinite;\n display: inline-block;\n `;\n\n const spinnerSmall: string = css`\n width: ${spinnerSizes['small']};\n height: ${spinnerSizes['small']};\n `;\n\n const spinnerMedium: string = css`\n width: ${spinnerSizes['medium']};\n height: ${spinnerSizes['medium']};\n `;\n\n const spinnerLarge: string = css`\n width: ${spinnerSizes['large']};\n height: ${spinnerSizes['large']};\n `;\n\n return {\n spinner,\n spinnerLarge,\n spinnerMedium,\n spinnerSmall,\n };\n }, [theme, colorScheme, size, color]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;~~AAgCA~~,MAAM,aAAa,OAAc,aAAqB,MAAmB,mCACzD;CACZ,MAAMA,eAAuB,SAAS,MAAM,KAAK,OAAO,QAAQ;CAEhE,MAAMC,eAAuC;EAC3C,OAAO;EACP,QAAQ;EACR,OAAO;EACR;CAED,MAAMC,cAAsB,aAAa;CAWzC,MAAMC,UAAkB,iBAAG;eAChB,YAAY;gBACX,YAAY;;8BAEE,aAAa;;mBAbT,uBAAS;;;;;;;MAeV;;;CAI7B,MAAMC,eAAuB,iBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;CAGlC,MAAMC,gBAAwB,iBAAG;eACtB,aAAa,UAAU;gBACtB,aAAa,UAAU;;AAQnC,QAAO;EACL;EACA,cAP2B,iBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;EAMhC;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAM;CAAM,CAAC;AAEvC,6BAAe"}
1	+ {"version":3,"file":"Spinner.styles.cjs","names":["spinnerColor: string","spinnerSizes: Record<string, string>","spinnerSize: string","spinner: string","spinnerSmall: string","spinnerMedium: string"],"sources":["../../../../../src/components/primitives/Spinner/Spinner.styles.ts"],"sourcesContent":["// Copyright 2025 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css, keyframes} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\nexport type SpinnerSize = 'small' \| 'medium' \| 'large';\n\n/*\n Creates styles for the Spinner component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param size - The size of the spinner\n * @param color - The color of the spinner\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string, size: SpinnerSize, color?: string): Record<string, string> =>\n useMemo(() => {\n const spinnerColor: string = color \|\| theme.vars.colors.primary.main;\n\n const spinnerSizes: Record<string, string> = {\n large: '32px',\n medium: '20px',\n small: '16px',\n };\n\n const spinnerSize: string = spinnerSizes[size];\n\n const spinAnimation: string = keyframes`\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n `;\n\n const spinner: string = css`\n width: ${spinnerSize};\n height: ${spinnerSize};\n border: 2px solid transparent;\n border-top: 2px solid ${spinnerColor};\n border-radius: 50%;\n animation: ${spinAnimation} 1s linear infinite;\n display: inline-block;\n `;\n\n const spinnerSmall: string = css`\n width: ${spinnerSizes['small']};\n height: ${spinnerSizes['small']};\n `;\n\n const spinnerMedium: string = css`\n width: ${spinnerSizes['medium']};\n height: ${spinnerSizes['medium']};\n `;\n\n const spinnerLarge: string = css`\n width: ${spinnerSizes['large']};\n height: ${spinnerSizes['large']};\n `;\n\n return {\n spinner,\n spinnerLarge,\n spinnerMedium,\n spinnerSmall,\n };\n }, [theme, colorScheme, size, color]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,aAAa,OAAc,aAAqB,MAAmB,mCACzD;CACZ,MAAMA,eAAuB,SAAS,MAAM,KAAK,OAAO,QAAQ;CAEhE,MAAMC,eAAuC;EAC3C,OAAO;EACP,QAAQ;EACR,OAAO;EACR;CAED,MAAMC,cAAsB,aAAa;CAWzC,MAAMC,UAAkB,iBAAG;eAChB,YAAY;gBACX,YAAY;;8BAEE,aAAa;;mBAbT,uBAAS;;;;;;;MAeV;;;CAI7B,MAAMC,eAAuB,iBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;CAGlC,MAAMC,gBAAwB,iBAAG;eACtB,aAAa,UAAU;gBACtB,aAAa,UAAU;;AAQnC,QAAO;EACL;EACA,cAP2B,iBAAG;eACrB,aAAa,SAAS;gBACrB,aAAa,SAAS;;EAMhC;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAM;CAAM,CAAC;AAEvC,6BAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.cjs","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/TextField/TextField.tsx"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2024, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './TextField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\n /\n Additional CSS class names\n /\n className?: string;\n /\n Whether the field is disabled\n /\n disabled?: boolean;\n /\n Icon to display at the end (right) of the input\n /\n endIcon?: ReactNode;\n /\n Error message to display below the input\n /\n error?: string;\n /\n Helper text to display below the input\n /\n helperText?: string;\n /\n Label text to display above the input\n /\n label?: string;\n /\n Click handler for the end icon\n /\n onEndIconClick?: () => void;\n /\n Click handler for the start icon\n /\n onStartIconClick?: () => void;\n /\n Whether the field is required\n /\n required?: boolean;\n /\n Icon to display at the start (left) of the input\n */\n startIcon?: ReactNode;\n}\n\nconst TextField: FC<TextFieldProps> = ({\n label,\n error,\n required,\n className,\n disabled,\n helperText,\n startIcon,\n endIcon,\n onStartIconClick,\n onEndIconClick,\n type = 'text',\n style = {},\n ...rest\n}: TextFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const hasError = !!error;\n const hasStartIcon = !!startIcon;\n const hasEndIcon = !!endIcon;\n const styles: Record<string, string> = useStyles(\n theme,\n colorScheme,\n disabled ?? false,\n hasError,\n hasStartIcon,\n hasEndIcon,\n );\n\n const inputClassName: string = cx(\n withVendorCSSClassPrefix(bem('text-field', 'input')),\n styles['input'],\n hasError && styles['inputError'],\n disabled && styles['inputDisabled'],\n );\n\n const containerClassName: string = cx(\n withVendorCSSClassPrefix(bem('text-field', 'container')),\n styles['inputContainer'],\n );\n\n const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n style={style}\n >\n {label && (\n <InputLabel required={required} error={hasError}>\n {label}\n </InputLabel>\n )}\n <div className={containerClassName}>\n {startIcon && (\n <div\n className={startIconClassName}\n onClick={onStartIconClick}\n role={onStartIconClick ? 'button' : undefined}\n tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n aria-label=\"Start icon\"\n >\n {startIcon}\n </div>\n )}\n <input\n className={inputClassName}\n type={type}\n disabled={disabled}\n aria-invalid={hasError}\n aria-required={required}\n {...rest}\n />\n {endIcon && (\n <div\n className={endIconClassName}\n onClick={onEndIconClick}\n role={onEndIconClick ? 'button' : undefined}\n tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n aria-label=\"End icon\"\n >\n {endIcon}\n </div>\n )}\n </div>\n </FormControl>\n );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;~~AAqEA~~,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,SACA,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,iCACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,sHACyB,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,0HACyB,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAMC,0HAA6D,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMC,wHAA2D,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;;IACb,aACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,2CAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,cAAW;eAEV;MACG;;IAEJ;GACM;;AAIlB,wBAAe"}
1	+ {"version":3,"file":"TextField.cjs","names":["TextField: FC<TextFieldProps>","useTheme","styles: Record<string, string>","useStyles","inputClassName: string","containerClassName: string","startIconClassName: string","endIconClassName: string","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/TextField/TextField.tsx"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes, ReactNode} from 'react';\nimport useStyles from './TextField.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\nexport interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {\n /*\n Additional CSS class names\n /\n className?: string;\n /\n Whether the field is disabled\n /\n disabled?: boolean;\n /\n Icon to display at the end (right) of the input\n /\n endIcon?: ReactNode;\n /\n Error message to display below the input\n /\n error?: string;\n /\n Helper text to display below the input\n /\n helperText?: string;\n /\n Label text to display above the input\n /\n label?: string;\n /\n Click handler for the end icon\n /\n onEndIconClick?: () => void;\n /\n Click handler for the start icon\n /\n onStartIconClick?: () => void;\n /\n Whether the field is required\n /\n required?: boolean;\n /\n Icon to display at the start (left) of the input\n */\n startIcon?: ReactNode;\n}\n\nconst TextField: FC<TextFieldProps> = ({\n label,\n error,\n required,\n className,\n disabled,\n helperText,\n startIcon,\n endIcon,\n onStartIconClick,\n onEndIconClick,\n type = 'text',\n style = {},\n ...rest\n}: TextFieldProps) => {\n const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n const hasError = !!error;\n const hasStartIcon = !!startIcon;\n const hasEndIcon = !!endIcon;\n const styles: Record<string, string> = useStyles(\n theme,\n colorScheme,\n disabled ?? false,\n hasError,\n hasStartIcon,\n hasEndIcon,\n );\n\n const inputClassName: string = cx(\n withVendorCSSClassPrefix(bem('text-field', 'input')),\n styles['input'],\n hasError && styles['inputError'],\n disabled && styles['inputDisabled'],\n );\n\n const containerClassName: string = cx(\n withVendorCSSClassPrefix(bem('text-field', 'container')),\n styles['inputContainer'],\n );\n\n const startIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'start-icon')), styles['startIcon']);\n\n const endIconClassName: string = cx(withVendorCSSClassPrefix(bem('text-field', 'end-icon')), styles['endIcon']);\n\n return (\n <FormControl\n error={error}\n helperText={helperText}\n className={cx(withVendorCSSClassPrefix(bem('text-field')), className)}\n style={style}\n >\n {label && (\n <InputLabel required={required} error={hasError}>\n {label}\n </InputLabel>\n )}\n <div className={containerClassName}>\n {startIcon && (\n <div\n className={startIconClassName}\n onClick={onStartIconClick}\n role={onStartIconClick ? 'button' : undefined}\n tabIndex={onStartIconClick && !disabled ? 0 : undefined}\n aria-label=\"Start icon\"\n >\n {startIcon}\n </div>\n )}\n <input\n className={inputClassName}\n type={type}\n disabled={disabled}\n aria-invalid={hasError}\n aria-required={required}\n {...rest}\n />\n {endIcon && (\n <div\n className={endIconClassName}\n onClick={onEndIconClick}\n role={onEndIconClick ? 'button' : undefined}\n tabIndex={onEndIconClick && !disabled ? 0 : undefined}\n aria-label=\"End icon\"\n >\n {endIcon}\n </div>\n )}\n </div>\n </FormControl>\n );\n};\n\nexport default TextField;\n"],"mappings":";;;;;;;;;;;;;AAsDA,MAAMA,aAAiC,EACrC,OACA,OACA,UACA,WACA,UACA,YACA,WACA,SACA,kBACA,gBACA,OAAO,QACP,QAAQ,EAAE,CACV,GAAG,WACiB;CACpB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CAGnB,MAAMC,SAAiCC,iCACrC,OACA,aACA,YAAY,OACZ,UANmB,CAAC,CAAC,WACJ,CAAC,CAAC,QAQpB;CAED,MAAMC,sHACyB,cAAc,QAAQ,CAAC,EACpD,OAAO,UACP,YAAY,OAAO,eACnB,YAAY,OAAO,iBACpB;CAED,MAAMC,0HACyB,cAAc,YAAY,CAAC,EACxD,OAAO,kBACR;CAED,MAAMC,0HAA6D,cAAc,aAAa,CAAC,EAAE,OAAO,aAAa;CAErH,MAAMC,wHAA2D,cAAc,WAAW,CAAC,EAAE,OAAO,WAAW;AAE/G,QACE,4CAACC;EACQ;EACK;EACZ,gHAA2C,aAAa,CAAC,EAAE,UAAU;EAC9D;aAEN,SACC,2CAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,4CAAC;GAAI,WAAW;;IACb,aACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,mBAAmB,WAAW;KACpC,UAAU,oBAAoB,CAAC,WAAW,IAAI;KAC9C,cAAW;eAEV;MACG;IAER,2CAAC;KACC,WAAW;KACL;KACI;KACV,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACD,WACC,2CAAC;KACC,WAAW;KACX,SAAS;KACT,MAAM,iBAAiB,WAAW;KAClC,UAAU,kBAAkB,CAAC,WAAW,IAAI;KAC5C,cAAW;eAEV;MACG;;IAEJ;GACM;;AAIlB,wBAAe"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextField.styles.cjs","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["~~/*\n~~ Copyright ~~(c)~~ 2024, ~~WSO2~~ ~~LLC.~~ ~~(https://www.wso2.com).\n \n WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the~~ \~~"License\"); you may not use this file except\~~n * in compliance with the License~~.\n~~ * You may obtain a copy of the License at\n \n http://www.apache.org/licenses/LICENSE-2.0\n \n Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n /\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/\n Creates styles for the TextField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n disabled: boolean,\n hasError: boolean,\n hasStartIcon: boolean,\n hasEndIcon: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const inlineStartPadding: string = hasStartIcon\n ? `calc(${theme.vars.spacing.unit} 5)`\n : `calc(${theme.vars.spacing.unit} * 1.5)`;\n const inlineEndPadding: string = hasEndIcon\n ? `calc(${theme.vars.spacing.unit} * 5)`\n : `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n const inputContainer: string = css`\n position: relative;\n display: flex;\n align-items: center;\n `;\n\n const input: string = css`\n width: 100%;\n padding-block: ${theme.vars.spacing.unit};\n padding-inline-start: ${inlineStartPadding};\n padding-inline-end: ${inlineEndPadding};\n border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n font-size: ${theme.vars.typography.fontSizes.md};\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &:hover:not(:disabled) {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n }\n\n &::placeholder {\n color: ${theme.vars.colors.text.secondary};\n opacity: 0.7;\n }\n `;\n\n const inputError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n\n &:hover:not(:disabled) {\n border-color: ${theme.vars.colors.error.main};\n }\n `;\n\n const inputDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n opacity: 0.6;\n cursor: not-allowed;\n `;\n\n const icon: string = css`\n position: absolute;\n background: none;\n border: none;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n padding: calc(${theme.vars.spacing.unit} / 2);\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${theme.vars.colors.text.secondary};\n opacity: ${disabled ? 0.5 : 1};\n top: 50%;\n transform: translateY(-50%);\n transition:\n color 0.2s ease,\n opacity 0.2s ease;\n\n &:hover:not(:disabled) {\n color: ${theme.vars.colors.text.primary};\n }\n\n &:focus {\n outline: 2px solid ${theme.vars.colors.primary.main};\n outline-offset: 2px;\n }\n `;\n\n const startIcon: string = css`\n ${icon};\n inset-inline-start: ${theme.vars.spacing.unit};\n `;\n\n const endIcon: string = css`\n ${icon};\n inset-inline-end: ${theme.vars.spacing.unit};\n `;\n\n return {\n endIcon,\n icon,\n input,\n inputContainer,\n inputDisabled,\n inputError,\n startIcon,\n };\n }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;~~AAgCA~~,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,wCAEc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,MAAMC,mBAA2B,aAC7B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAEpC,MAAMC,iBAAyB,iBAAG;;;;;CAMlC,MAAMC,QAAgB,iBAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,iBAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,gBAAwB,iBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,iBAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,iBAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,iBAAG;QACvB,KAAK;0BACa,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAW,CAAC;AAExE,+BAAe"}
1	+ {"version":3,"file":"TextField.styles.cjs","names":["inlineStartPadding: string","inlineEndPadding: string","inputContainer: string","input: string","inputError: string","inputDisabled: string","icon: string","startIcon: string"],"sources":["../../../../../src/components/primitives/TextField/TextField.styles.ts"],"sourcesContent":["// Copyright 2024 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/*\n Creates styles for the TextField component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @param disabled - Whether the component is disabled\n * @param hasError - Whether the component has an error\n * @param hasStartIcon - Whether the component has a start icon\n * @param hasEndIcon - Whether the component has an end icon\n * @returns Object containing CSS class names for component styling\n /\nconst useStyles = (\n theme: Theme,\n colorScheme: string,\n disabled: boolean,\n hasError: boolean,\n hasStartIcon: boolean,\n hasEndIcon: boolean,\n): Record<string, string> =>\n useMemo(() => {\n const inlineStartPadding: string = hasStartIcon\n ? `calc(${theme.vars.spacing.unit} 5)`\n : `calc(${theme.vars.spacing.unit} * 1.5)`;\n const inlineEndPadding: string = hasEndIcon\n ? `calc(${theme.vars.spacing.unit} * 5)`\n : `calc(${theme.vars.spacing.unit} * 1.5)`;\n\n const inputContainer: string = css`\n position: relative;\n display: flex;\n align-items: center;\n `;\n\n const input: string = css`\n width: 100%;\n padding-block: ${theme.vars.spacing.unit};\n padding-inline-start: ${inlineStartPadding};\n padding-inline-end: ${inlineEndPadding};\n border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};\n border-radius: ${theme.vars.components?.Field?.root?.borderRadius \|\| theme.vars.borderRadius.medium};\n font-size: ${theme.vars.typography.fontSizes.md};\n font-family: ${theme.vars.typography.fontFamily};\n color: ${theme.vars.colors.text.primary};\n background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};\n outline: none;\n transition:\n border-color 0.2s ease,\n box-shadow 0.2s ease;\n\n &:focus {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};\n }\n\n &:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n }\n\n &:hover:not(:disabled) {\n border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};\n }\n\n &::placeholder {\n color: ${theme.vars.colors.text.secondary};\n opacity: 0.7;\n }\n `;\n\n const inputError: string = css`\n border-color: ${theme.vars.colors.error.main};\n\n &:focus {\n border-color: ${theme.vars.colors.error.main};\n box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;\n }\n\n &:hover:not(:disabled) {\n border-color: ${theme.vars.colors.error.main};\n }\n `;\n\n const inputDisabled: string = css`\n background-color: ${theme.vars.colors.background.disabled};\n opacity: 0.6;\n cursor: not-allowed;\n `;\n\n const icon: string = css`\n position: absolute;\n background: none;\n border: none;\n cursor: ${disabled ? 'not-allowed' : 'pointer'};\n padding: calc(${theme.vars.spacing.unit} / 2);\n display: flex;\n align-items: center;\n justify-content: center;\n color: ${theme.vars.colors.text.secondary};\n opacity: ${disabled ? 0.5 : 1};\n top: 50%;\n transform: translateY(-50%);\n transition:\n color 0.2s ease,\n opacity 0.2s ease;\n\n &:hover:not(:disabled) {\n color: ${theme.vars.colors.text.primary};\n }\n\n &:focus {\n outline: 2px solid ${theme.vars.colors.primary.main};\n outline-offset: 2px;\n }\n `;\n\n const startIcon: string = css`\n ${icon};\n inset-inline-start: ${theme.vars.spacing.unit};\n `;\n\n const endIcon: string = css`\n ${icon};\n inset-inline-end: ${theme.vars.spacing.unit};\n `;\n\n return {\n endIcon,\n icon,\n input,\n inputContainer,\n inputDisabled,\n inputError,\n startIcon,\n };\n }, [theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,aACJ,OACA,aACA,UACA,UACA,cACA,wCAEc;CACZ,MAAMA,qBAA6B,eAC/B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CACpC,MAAMC,mBAA2B,aAC7B,QAAQ,MAAM,KAAK,QAAQ,KAAK,SAChC,QAAQ,MAAM,KAAK,QAAQ,KAAK;CAEpC,MAAMC,iBAAyB,iBAAG;;;;;CAMlC,MAAMC,QAAgB,iBAAG;;uBAEN,MAAM,KAAK,QAAQ,KAAK;8BACjB,mBAAmB;4BACrB,iBAAiB;0BACnB,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,OAAO;uBACtE,MAAM,KAAK,YAAY,OAAO,MAAM,gBAAgB,MAAM,KAAK,aAAa,OAAO;mBACvF,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,WAAW,MAAM,KAAK,OAAO,WAAW,WAAW,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;;;;wBAO1F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACjE,WAAW,GAAG,MAAM,KAAK,OAAO,MAAM,KAAK,MAAM,GAAG,MAAM,KAAK,OAAO,QAAQ,KAAK,IAAI;;;;;;;;;wBAS/F,WAAW,MAAM,KAAK,OAAO,MAAM,OAAO,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;iBAIhF,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,aAAqB,iBAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;;wBAIrC,MAAM,KAAK,OAAO,MAAM,KAAK;;;CAIjD,MAAMC,gBAAwB,iBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;CAK5D,MAAMC,OAAe,iBAAG;;;;gBAIZ,WAAW,gBAAgB,UAAU;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;;;eAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;iBAC/B,WAAW,KAAM,EAAE;;;;;;;;iBAQnB,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;6BAInB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;CAKxD,MAAMC,YAAoB,iBAAG;QACzB,KAAK;4BACe,MAAM,KAAK,QAAQ,KAAK;;AAQhD,QAAO;EACL,SANsB,iBAAG;QACvB,KAAK;0BACa,MAAM,KAAK,QAAQ,KAAK;;EAK5C;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAc;CAAW,CAAC;AAExE,+BAAe"}