@thunderid/react 0.1.0 → 0.3.0

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

@@ -0,0 +1,129 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_FormControl = require('../FormControl/FormControl.cjs');
+const require_InputLabel = require('../InputLabel/InputLabel.cjs');
+const require_OtpField_styles = require('./OtpField.styles.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/OtpField/OtpField.tsx
+const OtpField = ({ label, error, className, required, disabled, helperText, length = 6, value = "", onChange, onComplete, type = "text", placeholder = "", style = {}, autoFocus = false, pattern }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_OtpField_styles.default(theme, colorScheme, !!disabled, !!error, length);
+	const [otp, setOtp] = (0, react.useState)(Array(length).fill(""));
+	const inputRefs = (0, react.useRef)([]);
+	(0, react.useEffect)(() => {
+		inputRefs.current = inputRefs.current.slice(0, length);
+	}, [length]);
+	(0, react.useEffect)(() => {
+		if (value) {
+			const newOtp = value.split("").slice(0, length);
+			while (newOtp.length < length) newOtp.push("");
+			setOtp(newOtp);
+		} else setOtp(Array(length).fill(""));
+	}, [value, length]);
+	(0, react.useEffect)(() => {
+		if (autoFocus && inputRefs.current[0]) inputRefs.current[0].focus();
+	}, [autoFocus]);
+	const handleChange = (index, event) => {
+		const newValue = event.target.value;
+		if (newValue.length > 1) return;
+		if (type === "number" && newValue && !/^\d$/.test(newValue)) return;
+		if (pattern && newValue && !new RegExp(pattern).test(newValue)) return;
+		const newOtp = [...otp];
+		newOtp[index] = newValue;
+		setOtp(newOtp);
+		const otpValue = newOtp.join("");
+		onChange?.({ target: { value: otpValue } });
+		if (newValue && index < length - 1) inputRefs.current[index + 1]?.focus();
+		if (newOtp.every((digit) => digit !== "") && onComplete) onComplete(otpValue);
+	};
+	const handleKeyDown = (index, event) => {
+		if (event.key === "Backspace") {
+			if (!otp[index] && index > 0) {
+				const newOtp = [...otp];
+				newOtp[index - 1] = "";
+				setOtp(newOtp);
+				inputRefs.current[index - 1]?.focus();
+				onChange?.({ target: { value: newOtp.join("") } });
+			} else if (otp[index]) {
+				const newOtp = [...otp];
+				newOtp[index] = "";
+				setOtp(newOtp);
+				onChange?.({ target: { value: newOtp.join("") } });
+			}
+		} else if (event.key === "ArrowLeft" && index > 0) inputRefs.current[index - 1]?.focus();
+		else if (event.key === "ArrowRight" && index < length - 1) inputRefs.current[index + 1]?.focus();
+		else if (event.key === "Enter") {
+			event.preventDefault();
+			if (otp.every((digit) => digit !== "") && onComplete) onComplete(otp.join(""));
+		}
+	};
+	const handlePaste = (event) => {
+		event.preventDefault();
+		const pastedData = event.clipboardData.getData("text").slice(0, length);
+		let validData = "";
+		Array.from(pastedData).forEach((char) => {
+			if (type === "number" && !/^\d$/.test(char)) return;
+			if (pattern && !new RegExp(pattern).test(char)) return;
+			validData += char;
+		});
+		const newOtp = Array(length).fill("");
+		for (let i = 0; i < Math.min(validData.length, length); i += 1) newOtp[i] = validData[i];
+		setOtp(newOtp);
+		onChange?.({ target: { value: newOtp.join("") } });
+		const nextEmptyIndex = newOtp.findIndex((digit) => digit === "");
+		const focusIndex = nextEmptyIndex !== -1 ? nextEmptyIndex : length - 1;
+		inputRefs.current[focusIndex]?.focus();
+		if (newOtp.every((digit) => digit !== "") && onComplete) onComplete(newOtp.join(""));
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
+		error,
+		helperText,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field")), className),
+		helperTextAlign: "center",
+		style,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			required,
+			error: !!error,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input-container")), styles["inputContainer"]),
+			children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				ref: (el) => {
+					if (el) inputRefs.current[index] = el;
+				},
+				type: type === "password" ? "password" : "text",
+				inputMode: type === "number" ? "numeric" : "text",
+				value: otp[index] || "",
+				onChange: (event) => handleChange(index, event),
+				onKeyDown: (event) => handleKeyDown(index, event),
+				onPaste: handlePaste,
+				className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input")), styles["input"], {
+					[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input", "error"))]: !!error,
+					[styles["inputError"]]: !!error,
+					[(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("otp-field", "input", "disabled"))]: !!disabled,
+					[styles["inputDisabled"]]: !!disabled
+				}),
+				maxLength: 1,
+				placeholder,
+				disabled,
+				"aria-label": `${label || "OTP"} digit ${index + 1}`,
+				"aria-invalid": !!error,
+				"aria-required": required,
+				autoComplete: "one-time-code"
+			}, index))
+		})]
+	});
+};
+var OtpField_default = OtpField;
+
+//#endregion
+exports.default = OtpField_default;
+//# sourceMappingURL=OtpField.cjs.map

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

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

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

@@ -0,0 +1,85 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/OtpField/OtpField.styles.ts
+/**
+* Creates styles for the OtpField component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param disabled - Whether the component is disabled
+* @param hasError - Whether the component has an error
+* @param length - Number of OTP input fields
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError, length) => (0, react.useMemo)(() => {
+	const inputContainer = __emotion_css.css`
+      display: flex;
+      gap: ${theme.vars.spacing.unit};
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap;
+    `;
+	const input = __emotion_css.css`
+      width: calc(${theme.vars.spacing.unit} * 6);
+      height: calc(${theme.vars.spacing.unit} * 6);
+      text-align: center;
+      font-size: ${theme.vars.typography.fontSizes.xl};
+      font-family: ${theme.vars.typography.fontFamily};
+      font-weight: 500;
+      border: 2px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+
+      &:focus {
+        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};
+        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+
+      &::placeholder {
+        color: ${theme.vars.colors.text.secondary};
+        opacity: 0.7;
+      }
+    `;
+	const inputError = __emotion_css.css`
+      border-color: ${theme.vars.colors.error.main};
+
+      &:focus {
+        border-color: ${theme.vars.colors.error.main};
+        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;
+      }
+    `;
+	return {
+		input,
+		inputContainer,
+		inputDisabled: __emotion_css.css`
+      background-color: ${theme.vars.colors.background.disabled};
+      cursor: not-allowed;
+      opacity: 0.6;
+    `,
+		inputError
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError,
+	length
+]);
+var OtpField_styles_default = useStyles;
+
+//#endregion
+exports.default = OtpField_styles_default;
+//# sourceMappingURL=OtpField.styles.cjs.map

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

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

package/dist/cjs/components/primitives/PasswordField/PasswordField.cjs

@@ -0,0 +1,49 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_PasswordField_styles = require('./PasswordField.styles.cjs');
+const require_Eye = require('../Icons/Eye.cjs');
+const require_EyeOff = require('../Icons/EyeOff.cjs');
+const require_TextField = require('../TextField/TextField.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/PasswordField/PasswordField.tsx
+/**
+* Password field component with show/hide toggle functionality.
+* This component extends TextField and adds password visibility toggle functionality.
+*/
+const PasswordField = ({ onChange, className, disabled, error,...textFieldProps }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const [showPassword, setShowPassword] = (0, react.useState)(false);
+	const styles = require_PasswordField_styles.default(theme, colorScheme, showPassword, !!disabled, !!error);
+	const togglePasswordVisibility = () => {
+		if (!disabled) setShowPassword(!showPassword);
+	};
+	const IconComponent = showPassword ? require_EyeOff.default : require_Eye.default;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, {
+		...textFieldProps,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("password-field")), className),
+		type: showPassword ? "text" : "password",
+		onChange: (e) => onChange(e.target.value),
+		autoComplete: "current-password",
+		disabled,
+		error,
+		endIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconComponent, {
+			width: 16,
+			height: 16,
+			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("password-field", "toggle-icon")), styles["toggleIcon"], showPassword ? styles["visibleIcon"] : styles["hiddenIcon"])
+		}),
+		onEndIconClick: togglePasswordVisibility
+	});
+};
+var PasswordField_default = PasswordField;
+
+//#endregion
+exports.default = PasswordField_default;
+//# sourceMappingURL=PasswordField.cjs.map

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

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

package/dist/cjs/components/primitives/PasswordField/PasswordField.styles.cjs

@@ -0,0 +1,49 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/PasswordField/PasswordField.styles.ts
+/**
+* Creates styles for the PasswordField component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param showPassword - Whether the password is currently visible
+* @param disabled - Whether the component is disabled
+* @param hasError - Whether the component has an error
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, showPassword, disabled, hasError) => (0, react.useMemo)(() => {
+	const toggleIcon = __emotion_css.css`
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+      color: ${theme.vars.colors.text.secondary};
+      opacity: ${disabled ? .6 : 1};
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: ${!disabled ? theme.vars.colors.text.primary : theme.vars.colors.text.secondary};
+      }
+    `;
+	const visibleIcon = __emotion_css.css`
+      color: ${theme.vars.colors.primary.main};
+    `;
+	return {
+		hiddenIcon: __emotion_css.css`
+      color: ${theme.vars.colors.text.secondary};
+    `,
+		toggleIcon,
+		visibleIcon
+	};
+}, [
+	theme,
+	colorScheme,
+	showPassword,
+	disabled,
+	hasError
+]);
+var PasswordField_styles_default = useStyles;
+
+//#endregion
+exports.default = PasswordField_styles_default;
+//# sourceMappingURL=PasswordField.styles.cjs.map

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

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

package/dist/cjs/components/primitives/Select/Select.cjs

@@ -0,0 +1,50 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_FormControl = require('../FormControl/FormControl.cjs');
+const require_InputLabel = require('../InputLabel/InputLabel.cjs');
+const require_Select_styles = require('./Select.styles.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/Select/Select.tsx
+const Select = ({ label, error, className, required, disabled, helperText, placeholder, options, style = {},...rest }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const hasError = !!error;
+	const styles = require_Select_styles.default(theme, colorScheme, disabled ?? false, hasError);
+	const selectClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("select", "input")), styles["select"], hasError && styles["selectError"], disabled && styles["selectDisabled"]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_FormControl.default, {
+		error,
+		helperText,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("select")), className),
+		style,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			required,
+			error: hasError,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+			className: selectClassName,
+			disabled,
+			"aria-invalid": hasError,
+			"aria-required": required,
+			...rest,
+			children: [placeholder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: "",
+				disabled: true,
+				children: placeholder
+			}), options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: option.value,
+				className: styles["option"],
+				children: option.label
+			}, option.value))]
+		})]
+	});
+};
+var Select_default = Select;
+
+//#endregion
+exports.default = Select_default;
+//# sourceMappingURL=Select.cjs.map

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

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

package/dist/cjs/components/primitives/Select/Select.styles.cjs

@@ -0,0 +1,98 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/Select/Select.styles.ts
+/**
+* Creates styles for the Select component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param disabled - Whether the component is disabled
+* @param hasError - Whether the component has an error
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError) => (0, react.useMemo)(() => {
+	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${theme.colors.text.secondary.replace("#", "")}%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`;
+	const select = __emotion_css.css`
+      width: 100%;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
+      border: 1px solid ${hasError ? theme.vars.colors.error.main : theme.vars.colors.border};
+      border-radius: ${theme.vars.components?.Field?.root?.borderRadius || theme.vars.borderRadius.medium};
+      font-size: ${theme.vars.typography.fontSizes.md};
+      font-family: ${theme.vars.typography.fontFamily};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${disabled ? theme.vars.colors.background.disabled : theme.vars.colors.background.surface};
+      outline: none;
+      transition:
+        border-color 0.2s ease,
+        box-shadow 0.2s ease;
+      appearance: none;
+      background-image: url('${dropdownArrow}');
+      background-repeat: no-repeat;
+      background-position: right 0.7em top 50%;
+      background-size: 0.65em auto;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+
+      &:focus {
+        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};
+        box-shadow: 0 0 0 2px ${hasError ? `${theme.vars.colors.error.main}20` : `${theme.vars.colors.primary.main}20`};
+      }
+
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${hasError ? theme.vars.colors.error.main : theme.vars.colors.primary.main};
+      }
+    `;
+	const selectError = __emotion_css.css`
+      border-color: ${theme.vars.colors.error.main};
+
+      &:focus {
+        border-color: ${theme.vars.colors.error.main};
+        box-shadow: 0 0 0 2px ${theme.vars.colors.error.main}20;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${theme.vars.colors.error.main};
+      }
+    `;
+	const selectDisabled = __emotion_css.css`
+      background-color: ${theme.vars.colors.background.disabled};
+      opacity: 0.6;
+      cursor: not-allowed;
+    `;
+	return {
+		option: __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${theme.vars.colors.background.surface};
+
+      &:hover {
+        background-color: ${theme.vars.colors.action.hover};
+      }
+
+      &:checked {
+        background-color: ${theme.vars.colors.primary.main};
+        color: ${theme.vars.colors.primary.contrastText};
+      }
+    `,
+		select,
+		selectDisabled,
+		selectError
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError
+]);
+var Select_styles_default = useStyles;
+
+//#endregion
+exports.default = Select_styles_default;
+//# sourceMappingURL=Select.styles.cjs.map

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

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

package/dist/cjs/components/primitives/Spinner/Spinner.cjs

@@ -0,0 +1,41 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_Spinner_styles = require('./Spinner.styles.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/primitives/Spinner/Spinner.tsx
+/**
+* Spinner component for loading states
+*
+* @example
+* ```tsx
+* // Basic spinner
+* <Spinner />
+*
+* // Large spinner with custom color
+* <Spinner size="large" color="#3b82f6" />
+*
+* // Small spinner
+* <Spinner size="small" />
+* ```
+*/
+const Spinner = ({ size = "medium", color, className, style }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_Spinner_styles.default(theme, colorScheme, size, color);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("spinner")), styles["spinner"], size === "small" && styles["spinnerSmall"], size === "medium" && styles["spinnerMedium"], size === "large" && styles["spinnerLarge"], className),
+		style,
+		role: "status",
+		"aria-label": "Loading"
+	});
+};
+var Spinner_default = Spinner;
+
+//#endregion
+exports.default = Spinner_default;
+//# sourceMappingURL=Spinner.cjs.map

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

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