@thunderid/react 0.1.0 → 0.3.0

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

@@ -0,0 +1,67 @@
+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/Spinner/Spinner.styles.ts
+/**
+* Creates styles for the Spinner component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @param size - The size of the spinner
+* @param color - The color of the spinner
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, size, color) => (0, react.useMemo)(() => {
+	const spinnerColor = color || theme.vars.colors.primary.main;
+	const spinnerSizes = {
+		large: "32px",
+		medium: "20px",
+		small: "16px"
+	};
+	const spinnerSize = spinnerSizes[size];
+	const spinner = __emotion_css.css`
+      width: ${spinnerSize};
+      height: ${spinnerSize};
+      border: 2px solid transparent;
+      border-top: 2px solid ${spinnerColor};
+      border-radius: 50%;
+      animation: ${__emotion_css.keyframes`
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    `} 1s linear infinite;
+      display: inline-block;
+    `;
+	const spinnerSmall = __emotion_css.css`
+      width: ${spinnerSizes["small"]};
+      height: ${spinnerSizes["small"]};
+    `;
+	const spinnerMedium = __emotion_css.css`
+      width: ${spinnerSizes["medium"]};
+      height: ${spinnerSizes["medium"]};
+    `;
+	return {
+		spinner,
+		spinnerLarge: __emotion_css.css`
+      width: ${spinnerSizes["large"]};
+      height: ${spinnerSizes["large"]};
+    `,
+		spinnerMedium,
+		spinnerSmall
+	};
+}, [
+	theme,
+	colorScheme,
+	size,
+	color
+]);
+var Spinner_styles_default = useStyles;
+
+//#endregion
+exports.default = Spinner_styles_default;
+//# sourceMappingURL=Spinner.styles.cjs.map

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

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

package/dist/cjs/components/primitives/TextField/TextField.cjs

@@ -0,0 +1,66 @@
+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_TextField_styles = require('./TextField.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/TextField/TextField.tsx
+const TextField = ({ label, error, required, className, disabled, helperText, startIcon, endIcon, onStartIconClick, onEndIconClick, type = "text", style = {},...rest }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const hasError = !!error;
+	const styles = require_TextField_styles.default(theme, colorScheme, disabled ?? false, hasError, !!startIcon, !!endIcon);
+	const inputClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "input")), styles["input"], hasError && styles["inputError"], disabled && styles["inputDisabled"]);
+	const containerClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "container")), styles["inputContainer"]);
+	const startIconClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "start-icon")), styles["startIcon"]);
+	const endIconClassName = (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("text-field", "end-icon")), styles["endIcon"]);
+	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)("text-field")), className),
+		style,
+		children: [label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+			required,
+			error: hasError,
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: containerClassName,
+			children: [
+				startIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: startIconClassName,
+					onClick: onStartIconClick,
+					role: onStartIconClick ? "button" : void 0,
+					tabIndex: onStartIconClick && !disabled ? 0 : void 0,
+					"aria-label": "Start icon",
+					children: startIcon
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					className: inputClassName,
+					type,
+					disabled,
+					"aria-invalid": hasError,
+					"aria-required": required,
+					...rest
+				}),
+				endIcon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: endIconClassName,
+					onClick: onEndIconClick,
+					role: onEndIconClick ? "button" : void 0,
+					tabIndex: onEndIconClick && !disabled ? 0 : void 0,
+					"aria-label": "End icon",
+					children: endIcon
+				})
+			]
+		})]
+	});
+};
+var TextField_default = TextField;
+
+//#endregion
+exports.default = TextField_default;
+//# sourceMappingURL=TextField.cjs.map

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

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

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

@@ -0,0 +1,132 @@
+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/TextField/TextField.styles.ts
+/**
+* Creates styles for the TextField 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 hasStartIcon - Whether the component has a start icon
+* @param hasEndIcon - Whether the component has an end icon
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme, disabled, hasError, hasStartIcon, hasEndIcon) => (0, react.useMemo)(() => {
+	const inlineStartPadding = hasStartIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+	const inlineEndPadding = hasEndIcon ? `calc(${theme.vars.spacing.unit} * 5)` : `calc(${theme.vars.spacing.unit} * 1.5)`;
+	const inputContainer = __emotion_css.css`
+      position: relative;
+      display: flex;
+      align-items: center;
+    `;
+	const input = __emotion_css.css`
+      width: 100%;
+      padding-block: ${theme.vars.spacing.unit};
+      padding-inline-start: ${inlineStartPadding};
+      padding-inline-end: ${inlineEndPadding};
+      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;
+
+      &: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};
+      }
+
+      &::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;
+      }
+
+      &:hover:not(:disabled) {
+        border-color: ${theme.vars.colors.error.main};
+      }
+    `;
+	const inputDisabled = __emotion_css.css`
+      background-color: ${theme.vars.colors.background.disabled};
+      opacity: 0.6;
+      cursor: not-allowed;
+    `;
+	const icon = __emotion_css.css`
+      position: absolute;
+      background: none;
+      border: none;
+      cursor: ${disabled ? "not-allowed" : "pointer"};
+      padding: calc(${theme.vars.spacing.unit} / 2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${theme.vars.colors.text.secondary};
+      opacity: ${disabled ? .5 : 1};
+      top: 50%;
+      transform: translateY(-50%);
+      transition:
+        color 0.2s ease,
+        opacity 0.2s ease;
+
+      &:hover:not(:disabled) {
+        color: ${theme.vars.colors.text.primary};
+      }
+
+      &:focus {
+        outline: 2px solid ${theme.vars.colors.primary.main};
+        outline-offset: 2px;
+      }
+    `;
+	const startIcon = __emotion_css.css`
+      ${icon};
+      inset-inline-start: ${theme.vars.spacing.unit};
+    `;
+	return {
+		endIcon: __emotion_css.css`
+      ${icon};
+      inset-inline-end: ${theme.vars.spacing.unit};
+    `,
+		icon,
+		input,
+		inputContainer,
+		inputDisabled,
+		inputError,
+		startIcon
+	};
+}, [
+	theme,
+	colorScheme,
+	disabled,
+	hasError,
+	hasStartIcon,
+	hasEndIcon
+]);
+var TextField_styles_default = useStyles;
+
+//#endregion
+exports.default = TextField_styles_default;
+//# sourceMappingURL=TextField.styles.cjs.map

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

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

package/dist/cjs/components/primitives/Toggle/Toggle.cjs

@@ -0,0 +1,64 @@
+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_Toggle_styles = require('./Toggle.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/Toggle/Toggle.tsx
+/**
+* A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input
+* and styled to look like a switch.
+*
+* The component is wrapped in a FormControl to display error messages and helper text.
+* The label is associated with the input for accessibility.
+*
+* @param props - Props for the Toggle component
+* @returns A JSX element representing the Toggle
+*/
+const Toggle = ({ label, error, className, required, helperText, style = {},...rest }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const hasError = !!error;
+	const styles = require_Toggle_styles.default(theme, colorScheme, hasError, !!required);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.default, {
+		error,
+		helperText,
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle")), className),
+		helperTextMarginLeft: `calc(${theme.vars.spacing.unit} * 5.5)`,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+			style,
+			className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "container")), styles["container"]),
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+					type: "checkbox",
+					role: "switch",
+					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "input")), styles["input"]),
+					"aria-invalid": hasError,
+					"aria-required": required,
+					...rest
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "track")), styles["track"]),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "thumb")), styles["thumb"]) })
+				}),
+				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InputLabel.default, {
+					required,
+					error: hasError,
+					variant: "inline",
+					className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "label")), styles["label"], styles["errorLabel"], { [(0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("toggle", "label", "error"))]: hasError }),
+					children: label
+				})
+			]
+		})
+	});
+};
+var Toggle_default = Toggle;
+
+//#endregion
+exports.default = Toggle_default;
+//# sourceMappingURL=Toggle.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.cjs","names":["Toggle: FC<ToggleProps>","useTheme","styles: Record<string, string>","useStyles","FormControl","InputLabel"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.tsx"],"sourcesContent":["/**\n * Copyright (c) 2026, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {withVendorCSSClassPrefix, bem} from '@thunderid/browser';\nimport {FC, InputHTMLAttributes} from 'react';\nimport useStyles from './Toggle.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport FormControl from '../FormControl/FormControl';\nimport InputLabel from '../InputLabel/InputLabel';\n\n/**\n * Props for the Toggle component.\n */\nexport interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'type'> {\n  className?: string;\n  error?: string;\n  helperText?: string;\n  label?: string;\n  required?: boolean;\n}\n\n/**\n * A Toggle component that represents a boolean input. It is built on top of a hidden checkbox input\n * and styled to look like a switch.\n *\n * The component is wrapped in a FormControl to display error messages and helper text.\n * The label is associated with the input for accessibility.\n *\n * @param props - Props for the Toggle component\n * @returns A JSX element representing the Toggle\n */\nconst Toggle: FC<ToggleProps> = ({label, error, className, required, helperText, style = {}, ...rest}: ToggleProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const hasError = !!error;\n  const styles: Record<string, string> = useStyles(theme, colorScheme, hasError, !!required);\n\n  return (\n    <FormControl\n      error={error}\n      helperText={helperText}\n      className={cx(withVendorCSSClassPrefix(bem('toggle')), className)}\n      helperTextMarginLeft={`calc(${theme.vars.spacing.unit} * 5.5)`}\n    >\n      <label style={style} className={cx(withVendorCSSClassPrefix(bem('toggle', 'container')), styles['container'])}>\n        <input\n          type=\"checkbox\"\n          role=\"switch\"\n          className={cx(withVendorCSSClassPrefix(bem('toggle', 'input')), styles['input'])}\n          aria-invalid={hasError}\n          aria-required={required}\n          {...rest}\n        />\n        <div className={cx(withVendorCSSClassPrefix(bem('toggle', 'track')), styles['track'])}>\n          <span className={cx(withVendorCSSClassPrefix(bem('toggle', 'thumb')), styles['thumb'])} />\n        </div>\n        {label && (\n          <InputLabel\n            required={required}\n            error={hasError}\n            variant=\"inline\"\n            className={cx(withVendorCSSClassPrefix(bem('toggle', 'label')), styles['label'], styles['errorLabel'], {\n              [withVendorCSSClassPrefix(bem('toggle', 'label', 'error'))]: hasError,\n            })}\n          >\n            {label}\n          </InputLabel>\n        )}\n      </label>\n    </FormControl>\n  );\n};\n\nexport default Toggle;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAMA,UAA2B,EAAC,OAAO,OAAO,WAAW,UAAU,YAAY,QAAQ,EAAE,CAAE,GAAG,WAAuB;CACrH,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAM,WAAW,CAAC,CAAC;CACnB,MAAMC,SAAiCC,8BAAU,OAAO,aAAa,UAAU,CAAC,CAAC,SAAS;AAE1F,QACE,2CAACC;EACQ;EACK;EACZ,gHAA2C,SAAS,CAAC,EAAE,UAAU;EACjE,sBAAsB,QAAQ,MAAM,KAAK,QAAQ,KAAK;YAEtD,4CAAC;GAAa;GAAO,gHAA2C,UAAU,YAAY,CAAC,EAAE,OAAO,aAAa;;IAC3G,2CAAC;KACC,MAAK;KACL,MAAK;KACL,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;KAChF,gBAAc;KACd,iBAAe;KACf,GAAI;MACJ;IACF,2CAAC;KAAI,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS;eACnF,2CAAC,UAAK,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,SAAS,GAAI;MACtF;IACL,SACC,2CAACC;KACW;KACV,OAAO;KACP,SAAQ;KACR,gHAA2C,UAAU,QAAQ,CAAC,EAAE,OAAO,UAAU,OAAO,eAAe,kFACvE,UAAU,SAAS,QAAQ,CAAC,GAAG,UAC9D,CAAC;eAED;MACU;;IAET;GACI;;AAIlB,qBAAe"}

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

@@ -0,0 +1,101 @@
+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/Toggle/Toggle.styles.ts
+const useStyles = (theme, colorScheme, hasError, required) => (0, react.useMemo)(() => {
+	const containerStyles = __emotion_css.css`
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+    `;
+	const inputStyles = __emotion_css.css`
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+      white-space: nowrap;
+
+      &:focus-visible + div {
+        outline: 2px solid ${theme.vars.colors.primary.main};
+        outline-offset: 2px;
+      }
+
+      &:disabled + div {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `;
+	const trackStyles = __emotion_css.css`
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      width: 36px;
+      height: 20px;
+      background-color: ${theme.vars.colors.text.secondary};
+      opacity: 0.2;
+      border-radius: 9999px;
+      transition: all 0.2s ease-in-out;
+
+      input:checked + & {
+        background-color: ${theme.vars.colors.primary.main};
+        opacity: 1;
+      }
+
+      input:disabled + & {
+        opacity: 0.4;
+      }
+    `;
+	const thumbStyles = __emotion_css.css`
+      position: absolute;
+      left: 2px;
+      width: 16px;
+      height: 16px;
+      background-color: #fff;
+      border-radius: 50%;
+      transition: transform 0.2s ease-in-out;
+
+      input:checked + * > & {
+        transform: translateX(16px);
+      }
+    `;
+	const labelStyles = __emotion_css.css`
+      margin-left: calc(${theme.vars.spacing.unit} * 1.5);
+      color: ${theme.vars.colors.text.primary};
+      font-size: ${theme.vars.typography.fontSizes.sm};
+      font-family: ${theme.vars.typography.fontFamily};
+      cursor: pointer;
+
+      input:disabled ~ & {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `;
+	const errorLabelStyles = __emotion_css.css`
+      color: ${theme.vars.colors.error.main};
+    `;
+	return {
+		container: containerStyles,
+		errorLabel: hasError ? errorLabelStyles : "",
+		input: inputStyles,
+		label: labelStyles,
+		thumb: thumbStyles,
+		track: trackStyles
+	};
+}, [
+	theme,
+	colorScheme,
+	hasError,
+	required
+]);
+var Toggle_styles_default = useStyles;
+
+//#endregion
+exports.default = Toggle_styles_default;
+//# sourceMappingURL=Toggle.styles.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.styles.cjs","names":["containerStyles: string","inputStyles: string","trackStyles: string","thumbStyles: string","labelStyles: string","errorLabelStyles: string"],"sources":["../../../../../src/components/primitives/Toggle/Toggle.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2026, 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\nconst useStyles = (theme: Theme, colorScheme: string, hasError: boolean, required: boolean): Record<string, string> =>\n  useMemo(() => {\n    const containerStyles: string = css`\n      display: inline-flex;\n      align-items: center;\n      cursor: pointer;\n    `;\n\n    const inputStyles: string = css`\n      border: 0;\n      clip: rect(0 0 0 0);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n\n      &:focus-visible + div {\n        outline: 2px solid ${theme.vars.colors.primary.main};\n        outline-offset: 2px;\n      }\n\n      &:disabled + div {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const trackStyles: string = css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      width: 36px;\n      height: 20px;\n      background-color: ${theme.vars.colors.text.secondary};\n      opacity: 0.2;\n      border-radius: 9999px;\n      transition: all 0.2s ease-in-out;\n\n      input:checked + & {\n        background-color: ${theme.vars.colors.primary.main};\n        opacity: 1;\n      }\n\n      input:disabled + & {\n        opacity: 0.4;\n      }\n    `;\n\n    const thumbStyles: string = css`\n      position: absolute;\n      left: 2px;\n      width: 16px;\n      height: 16px;\n      background-color: #fff;\n      border-radius: 50%;\n      transition: transform 0.2s ease-in-out;\n\n      input:checked + * > & {\n        transform: translateX(16px);\n      }\n    `;\n\n    const labelStyles: string = css`\n      margin-left: calc(${theme.vars.spacing.unit} * 1.5);\n      color: ${theme.vars.colors.text.primary};\n      font-size: ${theme.vars.typography.fontSizes.sm};\n      font-family: ${theme.vars.typography.fontFamily};\n      cursor: pointer;\n\n      input:disabled ~ & {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorLabelStyles: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    return {\n      container: containerStyles,\n      errorLabel: hasError ? errorLabelStyles : '',\n      input: inputStyles,\n      label: labelStyles,\n      thumb: thumbStyles,\n      track: trackStyles,\n    };\n  }, [theme, colorScheme, hasError, required]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;AAsBA,MAAM,aAAa,OAAc,aAAqB,UAAmB,sCACzD;CACZ,MAAMA,kBAA0B,iBAAG;;;;;CAMnC,MAAMC,cAAsB,iBAAG;;;;;;;;;;;;6BAYN,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;;CAUxD,MAAMC,cAAsB,iBAAG;;;;;;0BAMT,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;;4BAM/B,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;;;CASvD,MAAMC,cAAsB,iBAAG;;;;;;;;;;;;;CAc/B,MAAMC,cAAsB,iBAAG;0BACT,MAAM,KAAK,QAAQ,KAAK;eACnC,MAAM,KAAK,OAAO,KAAK,QAAQ;mBAC3B,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,WAAW;;;;;;;;CASlD,MAAMC,mBAA2B,iBAAG;eACzB,MAAM,KAAK,OAAO,MAAM,KAAK;;AAGxC,QAAO;EACL,WAAW;EACX,YAAY,WAAW,mBAAmB;EAC1C,OAAO;EACP,OAAO;EACP,OAAO;EACP,OAAO;EACR;GACA;CAAC;CAAO;CAAa;CAAU;CAAS,CAAC;AAE9C,4BAAe"}

package/dist/cjs/components/primitives/Typography/Typography.cjs

@@ -0,0 +1,64 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_Typography_styles = require('./Typography.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/Typography/Typography.tsx
+const variantMapping = {
+	body1: "p",
+	body2: "p",
+	button: "span",
+	caption: "span",
+	h1: "h1",
+	h2: "h2",
+	h3: "h3",
+	h4: "h4",
+	h5: "h5",
+	h6: "h6",
+	overline: "span",
+	subtitle1: "h6",
+	subtitle2: "h6"
+};
+/**
+* Typography component for consistent text rendering throughout the application.
+* Integrates with the theme system and provides semantic HTML elements.
+*/
+const Typography = ({ children, variant = "body1", component, align = "left", color = "textPrimary", noWrap = false, className, style = {}, inline = false, fontWeight, fontSize, lineHeight, gutterBottom = false,...rest }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_Typography_styles.default(theme, colorScheme, variant, align, color, noWrap, inline, gutterBottom, fontWeight, fontSize, lineHeight);
+	const Component = component || variantMapping[variant] || "span";
+	const getVariantClass = (variantName) => {
+		switch (variantName) {
+			case "h1": return styles["typographyH1"];
+			case "h2": return styles["typographyH2"];
+			case "h3": return styles["typographyH3"];
+			case "h4": return styles["typographyH4"];
+			case "h5": return styles["typographyH5"];
+			case "h6": return styles["typographyH6"];
+			case "subtitle1": return styles["typographySubtitle1"];
+			case "subtitle2": return styles["typographySubtitle2"];
+			case "body1": return styles["typographyBody1"];
+			case "body2": return styles["typographyBody2"];
+			case "caption": return styles["typographyCaption"];
+			case "overline": return styles["typographyOverline"];
+			case "button": return styles["typographyButton"];
+			default: return "";
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+		className: (0, __emotion_css.cx)((0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("typography")), (0, __thunderid_browser.withVendorCSSClassPrefix)((0, __thunderid_browser.bem)("typography", variant)), styles["typography"], getVariantClass(variant), noWrap && styles["typographyNoWrap"], inline && styles["typographyInline"], gutterBottom && styles["typographyGutterBottom"], className),
+		style,
+		...rest,
+		children
+	});
+};
+var Typography_default = Typography;
+
+//#endregion
+exports.default = Typography_default;
+//# sourceMappingURL=Typography.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.cjs","names":["variantMapping: Record<TypographyVariant, ElementType>","Typography: FC<TypographyProps>","useTheme","styles: Record<string, string>","useStyles","Component: ElementType"],"sources":["../../../../../src/components/primitives/Typography/Typography.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, ReactNode, ElementType} from 'react';\nimport useStyles, {TypographyVariant, TypographyAlign, TypographyColor} from './Typography.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\nexport interface TypographyProps {\n  /**\n   * Text alignment\n   */\n  align?: TypographyAlign;\n  /**\n   * The content to be rendered\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n  /**\n   * Color variant\n   */\n  color?: TypographyColor;\n  /**\n   * The HTML element or React component to render\n   */\n  component?: ElementType;\n  /**\n   * Custom font size (overrides variant sizing)\n   */\n  fontSize?: string | number;\n  /**\n   * Custom font weight\n   */\n  fontWeight?: 'normal' | 'medium' | 'semibold' | 'bold' | number;\n  /**\n   * Whether to disable gutters (margin bottom)\n   */\n  gutterBottom?: boolean;\n  /**\n   * Whether the text should be displayed inline\n   */\n  inline?: boolean;\n  /**\n   * Line height\n   */\n  lineHeight?: string | number;\n  /**\n   * Whether the text should be clipped with ellipsis when it overflows\n   */\n  noWrap?: boolean;\n  /**\n   * Custom styles\n   */\n  style?: CSSProperties;\n  /**\n   * The typography variant to apply\n   */\n  variant?: TypographyVariant;\n}\n\n// Default component mapping for variants\nconst variantMapping: Record<TypographyVariant, ElementType> = {\n  body1: 'p',\n  body2: 'p',\n  button: 'span',\n  caption: 'span',\n  h1: 'h1',\n  h2: 'h2',\n  h3: 'h3',\n  h4: 'h4',\n  h5: 'h5',\n  h6: 'h6',\n  overline: 'span',\n  subtitle1: 'h6',\n  subtitle2: 'h6',\n};\n\n/**\n * Typography component for consistent text rendering throughout the application.\n * Integrates with the theme system and provides semantic HTML elements.\n */\nconst Typography: FC<TypographyProps> = ({\n  children,\n  variant = 'body1',\n  component,\n  align = 'left',\n  color = 'textPrimary',\n  noWrap = false,\n  className,\n  style = {},\n  inline = false,\n  fontWeight,\n  fontSize,\n  lineHeight,\n  gutterBottom = false,\n  ...rest\n}: TypographyProps) => {\n  const {theme, colorScheme}: ReturnType<typeof useTheme> = useTheme();\n  const styles: Record<string, string> = useStyles(\n    theme,\n    colorScheme,\n    variant,\n    align,\n    color,\n    noWrap,\n    inline,\n    gutterBottom,\n    fontWeight,\n    fontSize,\n    lineHeight,\n  );\n\n  const Component: ElementType = component || variantMapping[variant] || 'span';\n\n  const getVariantClass = (variantName: TypographyVariant): string => {\n    switch (variantName) {\n      case 'h1':\n        return styles['typographyH1'];\n      case 'h2':\n        return styles['typographyH2'];\n      case 'h3':\n        return styles['typographyH3'];\n      case 'h4':\n        return styles['typographyH4'];\n      case 'h5':\n        return styles['typographyH5'];\n      case 'h6':\n        return styles['typographyH6'];\n      case 'subtitle1':\n        return styles['typographySubtitle1'];\n      case 'subtitle2':\n        return styles['typographySubtitle2'];\n      case 'body1':\n        return styles['typographyBody1'];\n      case 'body2':\n        return styles['typographyBody2'];\n      case 'caption':\n        return styles['typographyCaption'];\n      case 'overline':\n        return styles['typographyOverline'];\n      case 'button':\n        return styles['typographyButton'];\n      default:\n        return '';\n    }\n  };\n\n  const typographyClassName: string = cx(\n    withVendorCSSClassPrefix(bem('typography')),\n    withVendorCSSClassPrefix(bem('typography', variant)),\n    styles['typography'],\n    getVariantClass(variant),\n    noWrap && styles['typographyNoWrap'],\n    inline && styles['typographyInline'],\n    gutterBottom && styles['typographyGutterBottom'],\n    className,\n  );\n\n  return (\n    <Component className={typographyClassName} style={style} {...rest}>\n      {children}\n    </Component>\n  );\n};\n\nexport default Typography;\n"],"mappings":";;;;;;;;;;;AAgFA,MAAMA,iBAAyD;CAC7D,OAAO;CACP,OAAO;CACP,QAAQ;CACR,SAAS;CACT,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,UAAU;CACV,WAAW;CACX,WAAW;CACZ;;;;;AAMD,MAAMC,cAAmC,EACvC,UACA,UAAU,SACV,WACA,QAAQ,QACR,QAAQ,eACR,SAAS,OACT,WACA,QAAQ,EAAE,EACV,SAAS,OACT,YACA,UACA,YACA,eAAe,MACf,GAAG,WACkB;CACrB,MAAM,EAAC,OAAO,gBAA4CC,0BAAU;CACpE,MAAMC,SAAiCC,kCACrC,OACA,aACA,SACA,OACA,OACA,QACA,QACA,cACA,YACA,UACA,WACD;CAED,MAAMC,YAAyB,aAAa,eAAe,YAAY;CAEvE,MAAM,mBAAmB,gBAA2C;AAClE,UAAQ,aAAR;GACE,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,KACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,YACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,QACH,QAAO,OAAO;GAChB,KAAK,UACH,QAAO,OAAO;GAChB,KAAK,WACH,QAAO,OAAO;GAChB,KAAK,SACH,QAAO,OAAO;GAChB,QACE,QAAO;;;AAeb,QACE,2CAAC;EAAU,gHAXkB,aAAa,CAAC,iFACd,cAAc,QAAQ,CAAC,EACpD,OAAO,eACP,gBAAgB,QAAQ,EACxB,UAAU,OAAO,qBACjB,UAAU,OAAO,qBACjB,gBAAgB,OAAO,2BACvB,UACD;EAGmD;EAAO,GAAI;EAC1D;GACS;;AAIhB,yBAAe"}