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

@thunderid/react 0.11.3 → 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 (644) hide show

package/dist/components/primitives/Logo/Logo.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Logo.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.styles.ts"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH~~,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,MAAM,QAAQ,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA+D5D,CAAC;AAEjC,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"Logo.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Logo/Logo.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,MAAM,QAAQ,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA+D5D,CAAC;AAEjC,eAAe,SAAS,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Logo.styles.js","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,SACpD,cAAc;CACZ,MAAMA,WAAmB,GAAG;;;;;CAM5B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqB,GAAG;;;;CAK9B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqC;EACzC,OAAO;EACP,QAAQ;EACR,OAAO;EACR;AA2BD,QAAO;EACL,OA1BwB,GAAG;;;;;;EA2B3B,WApBgD;GAChD,OAAO,GAAG;;;;;GAKV,QAAQ,GAAG;;;;;GAKX,OAAO,GAAG;;;;;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.js","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,SACpD,cAAc;CACZ,MAAMA,WAAmB,GAAG;;;;;CAM5B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqB,GAAG;;;;CAK9B,MAAMC,YAAoB,GAAG;;;;CAK7B,MAAMC,aAAqC;EACzC,OAAO;EACP,QAAQ;EACR,OAAO;EACR;AA2BD,QAAO;EACL,OA1BwB,GAAG;;;;;;EA2B3B,WApBgD;GAChD,OAAO,GAAG;;;;;GAKV,QAAQ,GAAG;;;;;GAKX,OAAO,GAAG;;;;;GAKX,CAI4B;EAC3B,OAAO;EACP,MAAM;EACN,QAAQ;EACR,MAAM,WAAW;EACjB,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAK,CAAC;AAEhC,0BAAe"}

package/dist/components/primitives/MultiInput/MultiInput.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { CSSProperties, FC, ReactNode } from 'react';
 export type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';
 export type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';

package/dist/components/primitives/MultiInput/MultiInput.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInput.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH~~,OAAO,EAAC,aAAa,EAAE,EAAE,EAA+B,SAAS,EAAwB,MAAM,OAAO,CAAC;AASvG,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAChG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAMD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA8KnC,CAAC;AAEF,eAAe,UAAU,CAAC"}
1	+ {"version":3,"file":"MultiInput.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/MultiInput/MultiInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,aAAa,EAAE,EAAE,EAA+B,SAAS,EAAwB,MAAM,OAAO,CAAC;AASvG,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAChG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAErE,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB;AAMD,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA8KnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInput.js","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.js","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":";;;;;;;;;;;;;AAwFA,MAAMA,cAAmC,EACvC,OACA,OACA,UACA,WACA,UACA,YACA,cAAc,eACd,SAAS,EAAE,EACX,UACA,OAAO,QACP,YAAY,UACZ,WACA,SACA,YAAY,GACZ,WACA,QAAQ,EAAE,OACW;CACrB,MAAM,EAAC,OAAO,gBAA4CC,kBAAU;CACpE,MAAMC,aAAsB,CAAC,aAAa,OAAO,SAAS;CAC1D,MAAMC,YAAqB,OAAO,SAAS;CAC3C,MAAMC,SAAiCC,0BAAU,OAAO,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC,OAAO,YAAY,UAAU;CAEhH,MAAMC,YAA2B,EAAC,oBAChC,oBAAC;EAAI,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,WAAW,GAAG,OAAO,SAAS,cAAc;YAC1F,oBAAC,UAAK,GAAE,qBAAqB;GACzB;CAGR,MAAMC,WAA0B,EAAC,oBAC/B,oBAAC;EAAI,OAAM;EAAK,QAAO;EAAK,SAAQ;EAAY,WAAW,GAAG,OAAO,SAAS,cAAc;YAC1F,oBAAC,UAAK,GAAE,6GAA6G;GACjH;CAGR,MAAMC,iBAAiD,aACpD,aAAqB;AACpB,MAAI,SAAS,MAAM,KAAK,OAAO,CAAC,aAAa,OAAO,SAAS,WAC3D,UAAS,CAAC,GAAG,QAAQ,SAAS,MAAM,CAAC,CAAC;IAG1C;EAAC;EAAQ;EAAU;EAAU,CAC9B;CAED,MAAMC,oBAAoD,aACvD,UAAkB;AACjB,MAAI,OAAO,SAAS,UAElB,UADgC,OAAO,QAAQ,GAAW,MAAc,MAAM,MAAM,CAC7D;IAG3B;EAAC;EAAQ;EAAU;EAAU,CAC9B;CAED,MAAMC,mBAAmD,aAErD,OACA,eACA,iBACA,mBACiB;EACjB,MAAM,qBAAqB,MAAiB;AAE1C,iBADyB,EAAE,SAAS,EAAE,OAAO,QAAQ,EAC9B;;EAGzB,MAAM,iBAAiB,MAA2B;AAChD,OAAI,EAAE,QAAQ,WAAW,gBAAgB;AACvC,MAAE,gBAAgB;AAClB,oBAAgB;;;EAMpB,MAAMC,cAAuC;GAC3C;GACA,SAJ8B,mBAAmB;GAKjD;GACA,UAAU;GACV;GACA,WAAW;GACX;GACA;GACA;GACD;AAED,UAAQ,WAAR;GACE,KAAK,YACH,QAAO,oBAACC,sBAAW,GAAI,cAAe;GACxC,KAAK,UACH,QACE,oBAACC;IACC,GAAI;IACJ,SAAS,UAAU,UAAU,QAAQ,MAAM;IAC3C,WAAW,MAAiB,cAAc,EAAE,OAAO,UAAU,SAAS,QAAQ;KAC9E;GAEN,QACE,QAAO,oBAACC;IAAU,GAAI;IAAmB;KAAQ;;IAGvD;EAAC;EAAa;EAAU;EAAW;EAAS;EAAO;EAAW;EAAK,CACpE;CAGD,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,GAAG;CAE9D,MAAMC,oBAAoD,kBAAwB;AAChF,MAAI,kBAAkB,MAAM,KAAK,IAAI;AACnC,kBAAe,kBAAkB;AACjC,wBAAqB,GAAG;;IAEzB,CAAC,mBAAmB,eAAe,CAAC;AAEvC,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,cAAc,CAAC,EAAE,UAAU;EAC/D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO,CAAC,CAAC;aACtC;IACU,EAEf,qBAAC;GAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,YAAY,CAAC,EAAE,OAAO,aAAa;cAEhG,oBAAC;IAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,YAAY,CAAC,EAAE,OAAO,YAAY;cAC/F,oBAAC;KAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,gBAAgB,CAAC,EAAE,OAAO,gBAAgB;eACtG,iBACC,mBACA,sBACA,aAAa,oBAAC,YAAS,eAAe,OAAO,cAAe,GAAG,QAC/D,aAAa,oBAAoB,OAClC;MACG;KACF,EAGL,OAAO,SAAS,KACf,oBAAC;IAAI,WAAW,GAAG,yBAAyB,IAAI,eAAe,iBAAiB,CAAC,EAAE,OAAO,iBAAiB;cACxG,OAAO,KAAK,OAAe,UAC1B,qBAAC;KAEC,WAAW,GAAG,yBAAyB,IAAI,eAAe,YAAY,CAAC,EAAE,OAAO,YAAY;gBAE5F,oBAAC;MACC,WAAW,GAAG,yBAAyB,IAAI,eAAe,iBAAiB,CAAC,EAAE,OAAO,gBAAgB;gBAEpG;OACI,EACN,aACC,oBAAC;MACC,MAAK;MACL,eAAqB,kBAAkB,MAAM;MACnC;MACV,WAAW,GACT,yBAAyB,IAAI,eAAe,gBAAgB,CAAC,EAC7D,OAAO,gBACR;MACD,OAAM;gBAEN,oBAAC,WAAQ,eAAe,OAAO,UAAW;OACnC;OApBN,MAsBD,CACN;KACE;IAEJ;GACM;;AAIlB,yBAAe"}

package/dist/components/primitives/MultiInput/MultiInput.styles.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { Theme } from '@thunderid/browser';
 export type MultiInputType = 'text' | 'email' | 'tel' | 'url' | 'password' | 'date' | 'boolean';
 export type MultiInputFieldType = 'STRING' | 'DATE_TIME' | 'BOOLEAN';

package/dist/components/primitives/MultiInput/MultiInput.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInput.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/MultiInput/MultiInput.styles.ts"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH~~,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAChG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAErE;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,YAAY,OAAO,EACnB,WAAW,OAAO,KACjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAgG6C,CAAC;AAEtE,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"MultiInput.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/MultiInput/MultiInput.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;AAChG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,WAAW,GAAG,SAAS,CAAC;AAErE;;;;;;;;;GASG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,YAAY,OAAO,EACnB,WAAW,OAAO,KACjB,MAAM,CAAC,MAAM,EAAE,MAAM,CAgG6C,CAAC;AAEtE,eAAe,SAAS,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiInput.styles.js","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,cAEA,cAAc;CACZ,MAAMA,YAAoB,GAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,GAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,GAAG;;;CAIhC,MAAMC,WAAmB,GAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,GAAG;;;;;CAMjC,MAAMC,WAAmB,GAAG;;;;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,GAAG;;;;CAKhC,MAAMC,eAAuB,GAAG;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,GAAG;;;;;;;;;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.js","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,cAEA,cAAc;CACZ,MAAMA,YAAoB,GAAG;;;aAGpB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,WAAmB,GAAG;;;aAGnB,MAAM,KAAK,QAAQ,KAAK;;;CAIjC,MAAMC,eAAuB,GAAG;;;CAIhC,MAAMC,WAAmB,GAAG;oBACZ,MAAM,KAAK,OAAO,UAAU,KAAK;;qBAEhC,MAAM,KAAK,OAAO,UAAU,KAAK;eACvC,MAAM,KAAK,OAAO,UAAU,aAAa;;CAGpD,MAAMC,gBAAwB,GAAG;;;;;CAMjC,MAAMC,WAAmB,GAAG;;;;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,GAAG;;;;CAKhC,MAAMC,eAAuB,GAAG;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,GAAG;;;;;;;;;EAatB;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAY;CAAU,CAAC;AAErE,gCAAe"}

package/dist/components/primitives/OtpField/OtpField.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { FC, CSSProperties } from 'react';
 export type OtpFieldType = 'text' | 'number' | 'password';
 export interface OtpInputProps {

package/dist/components/primitives/OtpField/OtpField.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/OtpField/OtpField.tsx"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH~~,OAAO,EAEL,EAAE,EAOF,aAAa,EACd,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA+K/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"OtpField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/OtpField/OtpField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAEL,EAAE,EAOF,aAAa,EACd,MAAM,OAAO,CAAC;AAMf,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAC,MAAM,EAAE;YAAC,KAAK,EAAE,MAAM,CAAA;SAAC,CAAA;KAAC,KAAK,IAAI,CAAC;IACtD;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,aAAa,CA+K/B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.js","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.js","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/components/primitives/OtpField/OtpField.styles.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { Theme } from '@thunderid/browser';
 export type OtpFieldType = 'text' | 'number' | 'password';
 /**

package/dist/components/primitives/OtpField/OtpField.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/OtpField/OtpField.styles.ts"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH~~,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,QAAQ,MAAM,KACb,MAAM,CAAC,MAAM,EAAE,MAAM,CA+D8B,CAAC;AAEvD,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"OtpField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/OtpField/OtpField.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,UAAU,OAAO,EACjB,UAAU,OAAO,EACjB,QAAQ,MAAM,KACb,MAAM,CAAC,MAAM,EAAE,MAAM,CA+D8B,CAAC;AAEvD,eAAe,SAAS,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"OtpField.styles.js","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,WAEA,cAAc;CACZ,MAAMA,iBAAyB,GAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,GAAG;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,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}
1	+ {"version":3,"file":"OtpField.styles.js","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,WAEA,cAAc;CACZ,MAAMA,iBAAyB,GAAG;;aAEzB,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,GAAG;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,GAAG;sBACZ,MAAM,KAAK,OAAO,MAAM,KAAK;;;wBAG3B,MAAM,KAAK,OAAO,MAAM,KAAK;gCACrB,MAAM,KAAK,OAAO,MAAM,KAAK;;;AAUzD,QAAO;EACL;EACA;EACA,eAT4B,GAAG;0BACX,MAAM,KAAK,OAAO,WAAW,SAAS;;;;EAS1D;EACD;GACA;CAAC;CAAO;CAAa;CAAU;CAAU;CAAO,CAAC;AAEtD,8BAAe"}

package/dist/components/primitives/PasswordField/PasswordField.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { FC } from 'react';
 import { TextFieldProps } from '../TextField/TextField';
 export interface PasswordFieldProps extends Omit<TextFieldProps, 'type' | 'endIcon' | 'onEndIconClick' | 'onChange'> {

package/dist/components/primitives/PasswordField/PasswordField.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH~~,OAAO,EAAc,EAAE,EAAqB,MAAM,OAAO,CAAC;AAK1D,OAAkB,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAClH;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1	+ {"version":3,"file":"PasswordField.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,EAAE,EAAqB,MAAM,OAAO,CAAC;AAK1D,OAAkB,EAAC,cAAc,EAAC,MAAM,wBAAwB,CAAC;AAEjE,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,GAAG,gBAAgB,GAAG,UAAU,CAAC;IAClH;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA0CzC,CAAC;AAEF,eAAe,aAAa,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.js","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,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAC9E,cAAa;EACH;EACH;EACP,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}
1	+ {"version":3,"file":"PasswordField.js","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,kBAAU;CACpE,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAMC,SAAiCC,6BAAU,OAAO,aAAa,cAAc,CAAC,CAAC,UAAU,CAAC,CAAC,MAAM;CAEvG,MAAM,iCAAuC;AAC3C,MAAI,CAAC,SACH,iBAAgB,CAAC,aAAa;;CAIlC,MAAMC,gBAA6C,eAAeC,iBAASC;AAE3E,QACE,oBAACC;EACC,GAAI;EACJ,WAAW,GAAG,yBAAyB,IAAI,iBAAiB,CAAC,EAAE,UAAU;EACzE,MAAM,eAAe,SAAS;EAC9B,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;EAC9E,cAAa;EACH;EACH;EACP,SACE,oBAAC;GACC,OAAO;GACP,QAAQ;GACR,WAAW,GACT,yBAAyB,IAAI,kBAAkB,cAAc,CAAC,EAC9D,OAAO,eACP,eAAe,OAAO,iBAAiB,OAAO,cAC/C;IACD;EAEJ,gBAAgB;GAChB;;AAIN,4BAAe"}

package/dist/components/primitives/PasswordField/PasswordField.styles.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { Theme } from '@thunderid/browser';
 /**
  * Creates styles for the PasswordField component using BEM methodology

package/dist/components/primitives/PasswordField/PasswordField.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.styles.ts"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH~~,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,cAAc,OAAO,EACrB,UAAU,OAAO,EACjB,UAAU,OAAO,KAChB,MAAM,CAAC,MAAM,EAAE,MAAM,CA0BoC,CAAC;AAE7D,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"PasswordField.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/PasswordField/PasswordField.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;;;;;;;GAQG;AACH,QAAA,MAAM,SAAS,GACb,OAAO,KAAK,EACZ,aAAa,MAAM,EACnB,cAAc,OAAO,EACrB,UAAU,OAAO,EACjB,UAAU,OAAO,KAChB,MAAM,CAAC,MAAM,EAAE,MAAM,CA0BoC,CAAC;AAE7D,eAAe,SAAS,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordField.styles.js","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,aAEA,cAAc;CACZ,MAAMA,aAAqB,GAAG;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,GAAG;eACpB,MAAM,KAAK,OAAO,QAAQ,KAAK;;AAO1C,QAAO;EACL,YALyB,GAAG;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.js","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,aAEA,cAAc;CACZ,MAAMA,aAAqB,GAAG;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,GAAG;eACpB,MAAM,KAAK,OAAO,QAAQ,KAAK;;AAO1C,QAAO;EACL,YALyB,GAAG;eACnB,MAAM,KAAK,OAAO,KAAK,UAAU;;EAK1C;EACA;EACD;GACA;CAAC;CAAO;CAAa;CAAc;CAAU;CAAS,CAAC;AAE5D,mCAAe"}

package/dist/components/primitives/Select/Select.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { FC, SelectHTMLAttributes } from 'react';
 export interface SelectOption {
     /**

package/dist/components/primitives/Select/Select.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH~~,OAAO,EAAC,EAAE,EAAE,oBAAoB,EAAC,MAAM,OAAO,CAAC;AAM/C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuD3B,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,EAAE,EAAE,oBAAoB,EAAC,MAAM,OAAO,CAAC;AAM/C,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAC7F;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAuD3B,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.js","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,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,kBAA0B,GAC9B,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,oBAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,oBAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}
1	+ {"version":3,"file":"Select.js","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,kBAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,sBAAU,OAAO,aAAa,YAAY,OAAO,SAAS;CAEjG,MAAMC,kBAA0B,GAC9B,yBAAyB,IAAI,UAAU,QAAQ,CAAC,EAChD,OAAO,WACP,YAAY,OAAO,gBACnB,YAAY,OAAO,kBACpB;AAED,QACE,qBAACC;EACQ;EACK;EACZ,WAAW,GAAG,yBAAyB,IAAI,SAAS,CAAC,EAAE,UAAU;EAC1D;aAEN,SACC,oBAACC;GAAqB;GAAU,OAAO;aACpC;IACU,EAEf,qBAAC;GACC,WAAW;GACD;GACV,gBAAc;GACd,iBAAe;GACf,GAAI;cAEH,eACC,oBAAC;IAAO,OAAM;IAAG;cACd;KACM,EAEV,QAAQ,KAAK,WACZ,oBAAC;IAA0B,OAAO,OAAO;IAAO,WAAW,OAAO;cAC/D,OAAO;MADG,OAAO,MAEX,CACT;IACK;GACG;;AAIlB,qBAAe"}

package/dist/components/primitives/Select/Select.styles.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { Theme } from '@thunderid/browser';
 /**
  * Creates styles for the Select component using BEM methodology

package/dist/components/primitives/Select/Select.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH~~,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,UAAU,OAAO,EAAE,UAAU,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAgFpE,CAAC;AAE/C,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Select/Select.styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAGzC;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,EAAE,UAAU,OAAO,EAAE,UAAU,OAAO,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAgFpE,CAAC;AAE/C,eAAe,SAAS,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Select.styles.js","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,aACvE,cAAc;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,GAAG;;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,GAAG;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,GAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,GAAG;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.js","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,aACvE,cAAc;CAEZ,MAAM,gBAAgB,yKADa,MAAM,OAAO,KAAK,UAAU,QAAQ,KAAK,GAAG,CACmI;CAElN,MAAMA,SAAiB,GAAG;;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,GAAG;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,GAAG;0BACZ,MAAM,KAAK,OAAO,WAAW,SAAS;;;;AAoB5D,QAAO;EACL,QAhBqB,GAAG;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/components/primitives/Spinner/Spinner.d.ts CHANGED Viewed

@@ -1,20 +1,3 @@
-/**
- * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).
- *
- * WSO2 LLC. licenses this file to you under the Apache License,
- * Version 2.0 (the "License"); you may not use this file except
- * in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
 import { FC, CSSProperties } from 'react';
 export type SpinnerSize = 'small' | 'medium' | 'large';
 export interface SpinnerProps {

package/dist/components/primitives/Spinner/Spinner.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Spinner/Spinner.tsx"],"names":[],"mappings":"~~AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH~~,OAAO,EAAC,EAAE,EAAE,aAAa,EAAC,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAc7B,CAAC;AAEF,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/Spinner/Spinner.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAC,EAAE,EAAE,aAAa,EAAC,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,EAAE,EAAE,CAAC,YAAY,CAc7B,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.js","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,kBAAU;CACpE,MAAMC,SAAiCC,uBAAU,OAAO,aAAa,MAAM,MAAM;AAWjF,QAAO,oBAAC;EAAK,WAToB,GAC/B,yBAAyB,IAAI,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.js","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,kBAAU;CACpE,MAAMC,SAAiCC,uBAAU,OAAO,aAAa,MAAM,MAAM;AAWjF,QAAO,oBAAC;EAAK,WAToB,GAC/B,yBAAyB,IAAI,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"}