@thunderid/react 0.1.0 → 0.2.0

package/dist/components/control/SignedIn.js

@@ -0,0 +1,33 @@
+import useThunderID_default from "../../contexts/ThunderID/useThunderID.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/control/SignedIn.tsx
+/**
+* A component that only renders its children when the user is signed in.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { SignedIn } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <SignedIn fallback={<p>Please sign in to continue</p>}>
+*       <p>Welcome! You are signed in.</p>
+*     </SignedIn>
+*   );
+* }
+* ```
+*/
+const SignedIn = ({ children, fallback = null }) => {
+	const { isSignedIn } = useThunderID_default();
+	if (!isSignedIn) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	return /* @__PURE__ */ jsx(Fragment, { children });
+};
+SignedIn.displayName = "SignedIn";
+var SignedIn_default = SignedIn;
+
+//#endregion
+export { SignedIn_default as default };
+//# sourceMappingURL=SignedIn.js.map

package/dist/components/control/SignedIn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedIn.js","names":["SignedIn: FC<PropsWithChildren<SignedInProps>>","useThunderID"],"sources":["../../../src/components/control/SignedIn.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 {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the SignedIn component.\n */\nexport interface SignedInProps {\n  /**\n   * Content to show when the user is not signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the user is signed in.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { SignedIn } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <SignedIn fallback={<p>Please sign in to continue</p>}>\n *       <p>Welcome! You are signed in.</p>\n *     </SignedIn>\n *   );\n * }\n * ```\n */\nconst SignedIn: FC<PropsWithChildren<SignedInProps>> = ({\n  children,\n  fallback = null,\n}: PropsWithChildren<SignedInProps>) => {\n  const {isSignedIn} = useThunderID();\n\n  if (!isSignedIn) {\n    return <>{fallback}</>;\n  }\n\n  return <>{children}</>;\n};\n\nSignedIn.displayName = 'SignedIn';\n\nexport default SignedIn;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAMA,YAAkD,EACtD,UACA,WAAW,WAC2B;CACtC,MAAM,EAAC,eAAcC,sBAAc;AAEnC,KAAI,CAAC,WACH,QAAO,0CAAG,WAAY;AAGxB,QAAO,gCAAG,WAAY;;AAGxB,SAAS,cAAc;AAEvB,uBAAe"}

package/dist/components/control/SignedOut.js

@@ -0,0 +1,33 @@
+import useThunderID_default from "../../contexts/ThunderID/useThunderID.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/components/control/SignedOut.tsx
+/**
+* A component that only renders its children when the user is signed out.
+*
+* @remarks This component is only supported in browser based React applications (CSR).
+*
+* @example
+* ```tsx
+* import { SignedOut } from '@thunderid/auth-react';
+*
+* const App = () => {
+*   return (
+*     <SignedOut fallback={<p>You are already signed in</p>}>
+*       <p>Please sign in to continue</p>
+*     </SignedOut>
+*   );
+* }
+* ```
+*/
+const SignedOut = ({ children, fallback = null }) => {
+	const { isSignedIn } = useThunderID_default();
+	if (!isSignedIn) return /* @__PURE__ */ jsx(Fragment, { children });
+	return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+};
+SignedOut.displayName = "SignedOut";
+var SignedOut_default = SignedOut;
+
+//#endregion
+export { SignedOut_default as default };
+//# sourceMappingURL=SignedOut.js.map

package/dist/components/control/SignedOut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignedOut.js","names":["SignedOut: FC<PropsWithChildren<SignedOutProps>>","useThunderID"],"sources":["../../../src/components/control/SignedOut.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 {FC, PropsWithChildren, ReactNode} from 'react';\nimport useThunderID from '../../contexts/ThunderID/useThunderID';\n\n/**\n * Props for the SignedOut component.\n */\nexport interface SignedOutProps {\n  /**\n   * Content to show when the user is signed in.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * A component that only renders its children when the user is signed out.\n *\n * @remarks This component is only supported in browser based React applications (CSR).\n *\n * @example\n * ```tsx\n * import { SignedOut } from '@thunderid/auth-react';\n *\n * const App = () => {\n *   return (\n *     <SignedOut fallback={<p>You are already signed in</p>}>\n *       <p>Please sign in to continue</p>\n *     </SignedOut>\n *   );\n * }\n * ```\n */\nconst SignedOut: FC<PropsWithChildren<SignedOutProps>> = ({\n  children,\n  fallback = null,\n}: PropsWithChildren<SignedOutProps>) => {\n  const {isSignedIn} = useThunderID();\n\n  if (!isSignedIn) {\n    return <>{children}</>;\n  }\n\n  return <>{fallback}</>;\n};\n\nSignedOut.displayName = 'SignedOut';\n\nexport default SignedOut;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiDA,MAAMA,aAAoD,EACxD,UACA,WAAW,WAC4B;CACvC,MAAM,EAAC,eAAcC,sBAAc;AAEnC,KAAI,CAAC,WACH,QAAO,gCAAG,WAAY;AAGxB,QAAO,0CAAG,WAAY;;AAGxB,UAAU,cAAc;AAExB,wBAAe"}

package/dist/components/factories/FieldFactory.js

@@ -0,0 +1,137 @@
+import Checkbox_default from "../primitives/Checkbox/Checkbox.js";
+import DatePicker_default from "../primitives/DatePicker/DatePicker.js";
+import OtpField_default from "../primitives/OtpField/OtpField.js";
+import TextField_default from "../primitives/TextField/TextField.js";
+import PasswordField_default from "../primitives/PasswordField/PasswordField.js";
+import Select_default from "../primitives/Select/Select.js";
+import { FieldType } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/factories/FieldFactory.tsx
+/**
+* Utility function to validate field values based on type
+*/
+const validateFieldValue = (value, type, required = false, touched = false) => {
+	if (required && touched && (!value || value.trim() === "")) return "This field is required";
+	if (!value || value.trim() === "") return null;
+	switch (type) {
+		case FieldType.Number: {
+			const numValue = parseInt(value, 10);
+			if (Number.isNaN(numValue)) return "Please enter a valid number";
+			break;
+		}
+		default: break;
+	}
+	return null;
+};
+/**
+* Factory function to create form fields based on the EmbeddedSignInFlowAuthenticatorParamType.
+*
+* @param config - The field configuration
+* @returns The appropriate React component for the field type
+*
+* @example
+* ```tsx
+* const field = createField({
+*   param: 'username',
+*   type: EmbeddedSignInFlowAuthenticatorParamType.String,
+*   label: 'Username',
+*   confidential: false,
+*   required: true,
+*   value: '',
+*   onChange: (value) => console.log(value)
+* });
+* ```
+*/
+const createField = (config) => {
+	const { name, type, label, required, value, onChange, onBlur, disabled = false, error, className, options = [], touched = false, placeholder } = config;
+	const validationError = error || validateFieldValue(value, type, required, touched);
+	const commonProps = {
+		className,
+		"data-testid": `thunderid-signin-${name}`,
+		disabled,
+		error: validationError,
+		label,
+		name,
+		onBlur,
+		placeholder,
+		required,
+		value
+	};
+	switch (type) {
+		case FieldType.Password: return /* @__PURE__ */ jsx(PasswordField_default, {
+			...commonProps,
+			onChange
+		});
+		case FieldType.Text: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "text",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "off"
+		});
+		case FieldType.Email: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "email",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "email"
+		});
+		case FieldType.Tel: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "tel",
+			onChange: (e) => onChange(e.target.value),
+			autoComplete: "tel"
+		});
+		case FieldType.Date: return /* @__PURE__ */ jsx(DatePicker_default, {
+			...commonProps,
+			onChange: (e) => onChange(e.target.value)
+		});
+		case FieldType.Checkbox: {
+			const isChecked = value === "true" || value === true;
+			return /* @__PURE__ */ jsx(Checkbox_default, {
+				...commonProps,
+				checked: isChecked,
+				onChange: (e) => onChange(e.target.checked.toString())
+			});
+		}
+		case FieldType.Otp: return /* @__PURE__ */ jsx(OtpField_default, {
+			...commonProps,
+			onChange: (e) => onChange(e.target.value)
+		});
+		case FieldType.Number: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "number",
+			onChange: (e) => onChange(e.target.value),
+			helperText: "Enter a numeric value"
+		});
+		case FieldType.Select: {
+			const fieldOptions = options.length > 0 ? options : [];
+			if (fieldOptions.length > 0) return /* @__PURE__ */ jsx(Select_default, {
+				...commonProps,
+				options: fieldOptions,
+				onChange: (e) => onChange(e.target.value),
+				helperText: "Select from available options"
+			});
+			return /* @__PURE__ */ jsx(TextField_default, {
+				...commonProps,
+				type: "text",
+				onChange: (e) => onChange(e.target.value),
+				helperText: "Enter multiple values separated by commas (e.g., value1, value2, value3)",
+				placeholder: "value1, value2, value3"
+			});
+		}
+		default: return /* @__PURE__ */ jsx(TextField_default, {
+			...commonProps,
+			type: "text",
+			onChange: (e) => onChange(e.target.value),
+			helperText: "Unknown field type, treating as text"
+		});
+	}
+};
+/**
+* React component wrapper for the field factory.
+*/
+const FieldFactory = (props) => createField(props);
+
+//#endregion
+export { FieldFactory, createField, validateFieldValue };
+//# sourceMappingURL=FieldFactory.js.map

package/dist/components/factories/FieldFactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldFactory.js","names":["numValue: number","validationError: string | null","commonProps: Record<string, any>","PasswordField","TextField","DatePicker","isChecked: boolean","Checkbox","OtpField","fieldOptions: SelectOption[]","Select","FieldFactory: FC<FieldConfig>"],"sources":["../../../src/components/factories/FieldFactory.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 {FieldType} from '@thunderid/browser';\nimport {ChangeEvent, FC, ReactElement} from 'react';\nimport Checkbox from '../primitives/Checkbox/Checkbox';\nimport DatePicker from '../primitives/DatePicker/DatePicker';\nimport OtpField from '../primitives/OtpField/OtpField';\nimport PasswordField from '../primitives/PasswordField/PasswordField';\nimport Select, {SelectOption} from '../primitives/Select/Select';\nimport TextField from '../primitives/TextField/TextField';\n\n/**\n * Interface for field configuration.\n */\nexport interface FieldConfig {\n  /**\n   * Additional CSS class name.\n   */\n  className?: string;\n  /**\n   * Whether the field is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Error message to display.\n   */\n  error?: string;\n  /**\n   * Display name for the field.\n   */\n  label: string;\n  /**\n   * The name of the field.\n   */\n  name: string;\n  /**\n   * Callback function when the field loses focus.\n   */\n  onBlur?: () => void;\n  /**\n   * Callback function when the field value changes.\n   */\n  onChange: (value: string) => void;\n  /**\n   * Additional options for multi-valued fields.\n   */\n  options?: SelectOption[];\n  /**\n   * Placeholder text for the field.\n   */\n  placeholder?: string;\n  /**\n   * Whether the field is required.\n   */\n  required: boolean;\n  /**\n   * Whether the field has been touched/interacted with by the user.\n   */\n  touched?: boolean;\n  /**\n   * The field type.\n   */\n  type: FieldType;\n  /**\n   * Current value of the field.\n   */\n  value: string;\n}\n\n/**\n * Utility function to validate field values based on type\n */\nexport const validateFieldValue = (\n  value: string,\n  type: FieldType,\n  required = false,\n  touched = false,\n): string | null => {\n  if (required && touched && (!value || value.trim() === '')) {\n    return 'This field is required';\n  }\n\n  if (!value || value.trim() === '') {\n    return null;\n  }\n\n  switch (type) {\n    case FieldType.Number: {\n      const numValue: number = parseInt(value, 10);\n      if (Number.isNaN(numValue)) {\n        return 'Please enter a valid number';\n      }\n      break;\n    }\n    default:\n      break;\n  }\n\n  return null;\n};\n\n/**\n * Factory function to create form fields based on the EmbeddedSignInFlowAuthenticatorParamType.\n *\n * @param config - The field configuration\n * @returns The appropriate React component for the field type\n *\n * @example\n * ```tsx\n * const field = createField({\n *   param: 'username',\n *   type: EmbeddedSignInFlowAuthenticatorParamType.String,\n *   label: 'Username',\n *   confidential: false,\n *   required: true,\n *   value: '',\n *   onChange: (value) => console.log(value)\n * });\n * ```\n */\nexport const createField = (config: FieldConfig): ReactElement => {\n  const {\n    name,\n    type,\n    label,\n    required,\n    value,\n    onChange,\n    onBlur,\n    disabled = false,\n    error,\n    className,\n    options = [],\n    touched = false,\n    placeholder,\n  } = config;\n\n  const validationError: string | null = error || validateFieldValue(value, type, required, touched);\n\n  const commonProps: Record<string, any> = {\n    className,\n    'data-testid': `thunderid-signin-${name}`,\n    disabled,\n    error: validationError,\n    label,\n    name,\n    onBlur,\n    placeholder,\n    required,\n    value,\n  };\n\n  switch (type) {\n    case FieldType.Password:\n      return <PasswordField {...commonProps} onChange={onChange} />;\n    case FieldType.Text:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"off\"\n        />\n      );\n    case FieldType.Email:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"email\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"email\"\n        />\n      );\n    case FieldType.Tel:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"tel\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          autoComplete=\"tel\"\n        />\n      );\n    case FieldType.Date:\n      return (\n        <DatePicker {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n      );\n    case FieldType.Checkbox: {\n      const isChecked: boolean = value === 'true' || (value as any) === true;\n      return (\n        <Checkbox\n          {...commonProps}\n          checked={isChecked}\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.checked.toString())}\n        />\n      );\n    }\n    case FieldType.Otp:\n      return (\n        <OtpField {...commonProps} onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)} />\n      );\n    case FieldType.Number:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"number\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Enter a numeric value\"\n        />\n      );\n    case FieldType.Select: {\n      const fieldOptions: SelectOption[] = options.length > 0 ? options : [];\n\n      if (fieldOptions.length > 0) {\n        return (\n          <Select\n            {...commonProps}\n            options={fieldOptions}\n            onChange={(e: ChangeEvent<HTMLSelectElement>): void => onChange(e.target.value)}\n            helperText=\"Select from available options\"\n          />\n        );\n      }\n\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Enter multiple values separated by commas (e.g., value1, value2, value3)\"\n          placeholder=\"value1, value2, value3\"\n        />\n      );\n    }\n    default:\n      return (\n        <TextField\n          {...commonProps}\n          type=\"text\"\n          onChange={(e: ChangeEvent<HTMLInputElement>): void => onChange(e.target.value)}\n          helperText=\"Unknown field type, treating as text\"\n        />\n      );\n  }\n};\n\n/**\n * React component wrapper for the field factory.\n */\nexport const FieldFactory: FC<FieldConfig> = (props: FieldConfig): ReactElement => createField(props);\n\nexport default FieldFactory;\n"],"mappings":";;;;;;;;;;;;;AAwFA,MAAa,sBACX,OACA,MACA,WAAW,OACX,UAAU,UACQ;AAClB,KAAI,YAAY,YAAY,CAAC,SAAS,MAAM,MAAM,KAAK,IACrD,QAAO;AAGT,KAAI,CAAC,SAAS,MAAM,MAAM,KAAK,GAC7B,QAAO;AAGT,SAAQ,MAAR;EACE,KAAK,UAAU,QAAQ;GACrB,MAAMA,WAAmB,SAAS,OAAO,GAAG;AAC5C,OAAI,OAAO,MAAM,SAAS,CACxB,QAAO;AAET;;EAEF,QACE;;AAGJ,QAAO;;;;;;;;;;;;;;;;;;;;;AAsBT,MAAa,eAAe,WAAsC;CAChE,MAAM,EACJ,MACA,MACA,OACA,UACA,OACA,UACA,QACA,WAAW,OACX,OACA,WACA,UAAU,EAAE,EACZ,UAAU,OACV,gBACE;CAEJ,MAAMC,kBAAiC,SAAS,mBAAmB,OAAO,MAAM,UAAU,QAAQ;CAElG,MAAMC,cAAmC;EACvC;EACA,eAAe,oBAAoB;EACnC;EACA,OAAO;EACP;EACA;EACA;EACA;EACA;EACA;EACD;AAED,SAAQ,MAAR;EACE,KAAK,UAAU,SACb,QAAO,oBAACC;GAAc,GAAI;GAAuB;IAAY;EAC/D,KAAK,UAAU,KACb,QACE,oBAACC;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,MACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,IACb,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,cAAa;IACb;EAEN,KAAK,UAAU,KACb,QACE,oBAACC;GAAW,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEnH,KAAK,UAAU,UAAU;GACvB,MAAMC,YAAqB,UAAU,UAAW,UAAkB;AAClE,UACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA2C,SAAS,EAAE,OAAO,QAAQ,UAAU,CAAC;KAC3F;;EAGN,KAAK,UAAU,IACb,QACE,oBAACC;GAAS,GAAI;GAAa,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAAI;EAEjH,KAAK,UAAU,OACb,QACE,oBAACJ;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;EAEN,KAAK,UAAU,QAAQ;GACrB,MAAMK,eAA+B,QAAQ,SAAS,IAAI,UAAU,EAAE;AAEtE,OAAI,aAAa,SAAS,EACxB,QACE,oBAACC;IACC,GAAI;IACJ,SAAS;IACT,WAAW,MAA4C,SAAS,EAAE,OAAO,MAAM;IAC/E,YAAW;KACX;AAIN,UACE,oBAACN;IACC,GAAI;IACJ,MAAK;IACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;IAC9E,YAAW;IACX,aAAY;KACZ;;EAGN,QACE,QACE,oBAACA;GACC,GAAI;GACJ,MAAK;GACL,WAAW,MAA2C,SAAS,EAAE,OAAO,MAAM;GAC9E,YAAW;IACX;;;;;;AAQV,MAAaO,gBAAiC,UAAqC,YAAY,MAAM"}

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.js

@@ -0,0 +1,178 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import FormControl_default from "../../primitives/FormControl/FormControl.js";
+import InputLabel_default from "../../primitives/InputLabel/InputLabel.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
+import Dialog_default from "../../primitives/Dialog/Dialog.js";
+import BaseCreateOrganization_styles_default from "./BaseCreateOrganization.styles.js";
+import { createPackageComponentLogger } from "@thunderid/browser";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@emotion/css";
+
+//#region src/components/presentation/CreateOrganization/BaseCreateOrganization.tsx
+const logger$1 = createPackageComponentLogger("@thunderid/react", "BaseCreateOrganization");
+/**
+* Removes special characters except space and hyphen from the organization name
+* and generates a valid handle.
+* @param name
+* @returns
+*/
+const generateHandleFromName = (name) => name.toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+/**
+* BaseCreateOrganization component provides the core functionality for creating organizations.
+* This component serves as the base for framework-specific implementations.
+*/
+const BaseCreateOrganization = ({ cardLayout = true, className = "", defaultParentId = "", error, initialValues = {}, loading = false, mode = "inline", onCancel, onOpenChange, onSubmit, onSuccess, open = false, preferences, renderAdditionalFields, style, title = "Create Organization" }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = BaseCreateOrganization_styles_default(theme, colorScheme);
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [formData, setFormData] = useState({
+		description: "",
+		handle: "",
+		name: "",
+		...initialValues
+	});
+	const [formErrors, setFormErrors] = useState({});
+	const validateForm = () => {
+		const errors = {};
+		if (!formData.name.trim()) errors.name = "Organization name is required";
+		if (!formData.handle.trim()) errors.handle = "Organization handle is required";
+		else if (!/^[a-z0-9-]+$/.test(formData.handle)) errors.handle = "Handle can only contain lowercase letters, numbers, and hyphens";
+		if (!formData.description.trim()) errors.description = "Organization description is required";
+		setFormErrors(errors);
+		return Object.keys(errors).length === 0;
+	};
+	const handleInputChange = (field, value) => {
+		setFormData((prev) => ({
+			...prev,
+			[field]: value
+		}));
+		if (formErrors[field]) setFormErrors((prev) => ({
+			...prev,
+			[field]: void 0
+		}));
+	};
+	/**
+	* Handles changes to the organization name input.
+	* Automatically generates the organization handle based on the name if the handle is not set or matches
+	*
+	* @param value - The new value for the organization name.
+	*/
+	const handleNameChange = (value) => {
+		handleInputChange("name", value);
+		if (!formData.handle || formData.handle === generateHandleFromName(formData.name)) handleInputChange("handle", generateHandleFromName(value));
+	};
+	const handleSubmit = async (e) => {
+		e.preventDefault();
+		if (!validateForm() || loading) return;
+		const payload = {
+			description: formData.description.trim(),
+			name: formData.name.trim(),
+			orgHandle: formData.handle.trim(),
+			parentId: defaultParentId,
+			type: "TENANT"
+		};
+		try {
+			await onSubmit?.(payload);
+			if (onSuccess) onSuccess(payload);
+		} catch (submitError) {
+			logger$1.error("Form submission error:");
+		}
+	};
+	const createOrganizationContent = /* @__PURE__ */ jsx("div", {
+		className: cx(styles["root"], cardLayout && styles["card"], className),
+		style,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cx(styles["content"]),
+			children: [/* @__PURE__ */ jsxs("form", {
+				id: "create-organization-form",
+				className: cx(styles["form"]),
+				onSubmit: handleSubmit,
+				children: [
+					error && /* @__PURE__ */ jsxs(Alert_default, {
+						variant: "error",
+						className: styles["errorAlert"],
+						children: [/* @__PURE__ */ jsx(Alert_default.Title, { children: "Error" }), /* @__PURE__ */ jsx(Alert_default.Description, { children: error })]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cx(styles["fieldGroup"]),
+						children: /* @__PURE__ */ jsx(TextField_default, {
+							label: `${t("elements.fields.organization.name.label")}`,
+							placeholder: t("elements.fields.organization.name.placeholder"),
+							value: formData.name,
+							onChange: (e) => handleNameChange(e.target.value),
+							disabled: loading,
+							required: true,
+							error: formErrors.name,
+							className: cx(styles["input"])
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cx(styles["fieldGroup"]),
+						children: /* @__PURE__ */ jsx(TextField_default, {
+							label: `${t("elements.fields.organization.handle.label") || "Organization Handle"}`,
+							placeholder: t("elements.fields.organization.handle.placeholder") || "my-organization",
+							value: formData.handle,
+							onChange: (e) => handleInputChange("handle", e.target.value),
+							disabled: loading,
+							required: true,
+							error: formErrors.handle,
+							helperText: "This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.",
+							className: cx(styles["input"])
+						})
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cx(styles["fieldGroup"]),
+						children: /* @__PURE__ */ jsxs(FormControl_default, {
+							error: formErrors.description,
+							children: [/* @__PURE__ */ jsx(InputLabel_default, {
+								required: true,
+								children: t("elements.fields.organization.description.label")
+							}), /* @__PURE__ */ jsx("textarea", {
+								className: cx(styles["textarea"], formErrors.description && styles["textareaError"]),
+								placeholder: t("organization.create.description.placeholder"),
+								value: formData.description,
+								onChange: (e) => handleInputChange("description", e.target.value),
+								disabled: loading,
+								required: true
+							})]
+						})
+					}),
+					renderAdditionalFields?.()
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cx(styles["actions"]),
+				children: [onCancel && /* @__PURE__ */ jsx(Button_default, {
+					type: "button",
+					variant: "outline",
+					onClick: onCancel,
+					disabled: loading,
+					children: t("organization.create.buttons.cancel.text")
+				}), /* @__PURE__ */ jsx(Button_default, {
+					type: "submit",
+					variant: "solid",
+					color: "primary",
+					disabled: loading,
+					form: "create-organization-form",
+					children: loading ? t("organization.create.buttons.create_organization.loading.text") : t("organization.create.buttons.create_organization.text")
+				})]
+			})]
+		})
+	});
+	if (mode === "popup") return /* @__PURE__ */ jsx(Dialog_default, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(Dialog_default.Content, { children: [/* @__PURE__ */ jsx(Dialog_default.Heading, { children: title }), /* @__PURE__ */ jsx("div", {
+			className: styles["popup"],
+			children: createOrganizationContent
+		})] })
+	});
+	return createOrganizationContent;
+};
+
+//#endregion
+export { BaseCreateOrganization };
+//# sourceMappingURL=BaseCreateOrganization.js.map

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCreateOrganization.js","names":["logger: ReturnType<typeof createPackageComponentLogger>","BaseCreateOrganization: FC<BaseCreateOrganizationProps>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","useTranslation","errors: Partial<OrganizationFormData>","payload: CreateOrganizationPayload","createOrganizationContent: ReactElement","AlertPrimitive","TextField","FormControl","InputLabel","Button","DialogPrimitive"],"sources":["../../../../src/components/presentation/CreateOrganization/BaseCreateOrganization.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 {CreateOrganizationPayload, createPackageComponentLogger, Preferences} from '@thunderid/browser';\nimport {ChangeEvent, CSSProperties, FC, FormEvent, ReactElement, ReactNode, useState} from 'react';\nimport useStyles from './BaseCreateOrganization.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport AlertPrimitive from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport FormControl from '../../primitives/FormControl/FormControl';\nimport InputLabel from '../../primitives/InputLabel/InputLabel';\nimport TextField from '../../primitives/TextField/TextField';\n\nconst logger: ReturnType<typeof createPackageComponentLogger> = createPackageComponentLogger(\n  '@thunderid/react',\n  'BaseCreateOrganization',\n);\n\n/**\n * Interface for organization form data.\n */\nexport interface OrganizationFormData {\n  description: string;\n  handle: string;\n  name: string;\n}\n\n/**\n * Props interface for the BaseCreateOrganization component.\n */\nexport interface BaseCreateOrganizationProps {\n  cardLayout?: boolean;\n  className?: string;\n  defaultParentId?: string;\n  error?: string | null;\n  initialValues?: Partial<OrganizationFormData>;\n  loading?: boolean;\n  mode?: 'inline' | 'popup';\n  onCancel?: () => void;\n  onOpenChange?: (open: boolean) => void;\n  onSubmit?: (payload: CreateOrganizationPayload) => void | Promise<void>;\n  onSuccess?: (organization: any) => void;\n  open?: boolean;\n  /**\n   * Component-level preferences to override global i18n and theme settings.\n   * Preferences are deep-merged with global ones, with component preferences\n   * taking precedence. Affects this component and all its descendants.\n   */\n  preferences?: Preferences;\n  renderAdditionalFields?: () => ReactNode;\n  style?: CSSProperties;\n\n  title?: string;\n}\n\n/**\n * Removes special characters except space and hyphen from the organization name\n * and generates a valid handle.\n * @param name\n * @returns\n */\nconst generateHandleFromName = (name: string): string =>\n  name\n    .toLowerCase()\n    .replace(/[^a-z0-9\\s-]/g, '')\n    .replace(/\\s+/g, '-')\n    .replace(/-+/g, '-')\n    .replace(/^-|-$/g, '');\n\n/**\n * BaseCreateOrganization component provides the core functionality for creating organizations.\n * This component serves as the base for framework-specific implementations.\n */\nexport const BaseCreateOrganization: FC<BaseCreateOrganizationProps> = ({\n  cardLayout = true,\n  className = '',\n  defaultParentId = '',\n  error,\n  initialValues = {},\n  loading = false,\n  mode = 'inline',\n  onCancel,\n  onOpenChange,\n  onSubmit,\n  onSuccess,\n  open = false,\n  preferences,\n  renderAdditionalFields,\n  style,\n  title = 'Create Organization',\n}: BaseCreateOrganizationProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n  const [formData, setFormData] = useState<OrganizationFormData>({\n    description: '',\n    handle: '',\n    name: '',\n    ...initialValues,\n  });\n  const [formErrors, setFormErrors] = useState<Partial<OrganizationFormData> & {avatar?: string}>({});\n\n  const validateForm = (): boolean => {\n    const errors: Partial<OrganizationFormData> = {};\n\n    if (!formData.name.trim()) {\n      errors.name = 'Organization name is required';\n    }\n\n    if (!formData.handle.trim()) {\n      errors.handle = 'Organization handle is required';\n    } else if (!/^[a-z0-9-]+$/.test(formData.handle)) {\n      errors.handle = 'Handle can only contain lowercase letters, numbers, and hyphens';\n    }\n\n    if (!formData.description.trim()) {\n      errors.description = 'Organization description is required';\n    }\n\n    setFormErrors(errors);\n    return Object.keys(errors).length === 0;\n  };\n\n  const handleInputChange = (field: keyof OrganizationFormData, value: string): void => {\n    setFormData((prev: OrganizationFormData) => ({\n      ...prev,\n      [field]: value,\n    }));\n\n    if (formErrors[field]) {\n      setFormErrors((prev: Partial<OrganizationFormData> & {avatar?: string}) => ({\n        ...prev,\n        [field]: undefined,\n      }));\n    }\n  };\n\n  /**\n   * Handles changes to the organization name input.\n   * Automatically generates the organization handle based on the name if the handle is not set or matches\n   *\n   * @param value - The new value for the organization name.\n   */\n  const handleNameChange = (value: string): void => {\n    handleInputChange('name', value);\n\n    if (!formData.handle || formData.handle === generateHandleFromName(formData.name)) {\n      const newHandle: string = generateHandleFromName(value);\n      handleInputChange('handle', newHandle);\n    }\n  };\n\n  const handleSubmit = async (e: FormEvent): Promise<void> => {\n    e.preventDefault();\n\n    if (!validateForm() || loading) {\n      return;\n    }\n\n    const payload: CreateOrganizationPayload = {\n      description: formData.description.trim(),\n      name: formData.name.trim(),\n      orgHandle: formData.handle.trim(),\n      parentId: defaultParentId,\n      type: 'TENANT',\n    };\n\n    try {\n      await onSubmit?.(payload);\n      if (onSuccess) {\n        onSuccess(payload);\n      }\n    } catch (submitError) {\n      // Error handling is done by parent component\n      logger.error('Form submission error:');\n    }\n  };\n\n  const createOrganizationContent: ReactElement = (\n    <div className={cx(styles['root'], cardLayout && styles['card'], className)} style={style}>\n      <div className={cx(styles['content'])}>\n        <form id=\"create-organization-form\" className={cx(styles['form'])} onSubmit={handleSubmit}>\n          {error && (\n            <AlertPrimitive variant=\"error\" className={styles['errorAlert']}>\n              <AlertPrimitive.Title>Error</AlertPrimitive.Title>\n              <AlertPrimitive.Description>{error}</AlertPrimitive.Description>\n            </AlertPrimitive>\n          )}\n          <div className={cx(styles['fieldGroup'])}>\n            <TextField\n              label={`${t('elements.fields.organization.name.label')}`}\n              placeholder={t('elements.fields.organization.name.placeholder')}\n              value={formData.name}\n              onChange={(e: ChangeEvent<HTMLInputElement>): void => handleNameChange(e.target.value)}\n              disabled={loading}\n              required\n              error={formErrors.name}\n              className={cx(styles['input'])}\n            />\n          </div>\n          <div className={cx(styles['fieldGroup'])}>\n            <TextField\n              label={`${t('elements.fields.organization.handle.label') || 'Organization Handle'}`}\n              placeholder={t('elements.fields.organization.handle.placeholder') || 'my-organization'}\n              value={formData.handle}\n              onChange={(e: ChangeEvent<HTMLInputElement>): void => handleInputChange('handle', e.target.value)}\n              disabled={loading}\n              required\n              error={formErrors.handle}\n              helperText=\"This will be your organization's unique identifier. Only lowercase letters, numbers, and hyphens are allowed.\"\n              className={cx(styles['input'])}\n            />\n          </div>\n          <div className={cx(styles['fieldGroup'])}>\n            <FormControl error={formErrors.description}>\n              <InputLabel required>{t('elements.fields.organization.description.label')}</InputLabel>\n              <textarea\n                className={cx(styles['textarea'], formErrors.description && styles['textareaError'])}\n                placeholder={t('organization.create.description.placeholder')}\n                value={formData.description}\n                onChange={(e: ChangeEvent<HTMLTextAreaElement>): void =>\n                  handleInputChange('description', e.target.value)\n                }\n                disabled={loading}\n                required\n              />\n            </FormControl>\n          </div>\n          {renderAdditionalFields?.()}\n        </form>\n        <div className={cx(styles['actions'])}>\n          {onCancel && (\n            <Button type=\"button\" variant=\"outline\" onClick={onCancel} disabled={loading}>\n              {t('organization.create.buttons.cancel.text')}\n            </Button>\n          )}\n          <Button type=\"submit\" variant=\"solid\" color=\"primary\" disabled={loading} form=\"create-organization-form\">\n            {loading\n              ? t('organization.create.buttons.create_organization.loading.text')\n              : t('organization.create.buttons.create_organization.text')}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n\n  if (mode === 'popup') {\n    return (\n      <DialogPrimitive open={open} onOpenChange={onOpenChange}>\n        <DialogPrimitive.Content>\n          <DialogPrimitive.Heading>{title}</DialogPrimitive.Heading>\n          <div className={styles['popup']}>{createOrganizationContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return createOrganizationContent;\n};\n\nexport default BaseCreateOrganization;\n"],"mappings":"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"}

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.styles.js

@@ -0,0 +1,147 @@
+import { useMemo } from "react";
+import { css } from "@emotion/css";
+
+//#region src/components/presentation/CreateOrganization/BaseCreateOrganization.styles.ts
+/**
+* Creates styles for the BaseCreateOrganization component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const root = css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      min-width: 600px;
+      margin: 0 auto;
+      font-family: ${theme.vars.typography.fontFamily};
+    `;
+	const card = css`
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+      padding: calc(${theme.vars.spacing.unit} * 4);
+    `;
+	const content = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const form = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      width: 100%;
+    `;
+	const header = css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);
+    `;
+	const field = css`
+      display: flex;
+      align-items: center;
+      padding: ${theme.vars.spacing.unit} 0;
+      border-bottom: 1px solid ${theme.vars.colors.border};
+      min-height: 32px;
+    `;
+	const fieldGroup = css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 0.5);
+    `;
+	const textarea = css`
+      width: 100%;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);
+      border: 1px solid ${theme.vars.colors.border};
+      border-radius: ${theme.vars.borderRadius.medium};
+      font-size: ${theme.vars.typography.fontSizes.md};
+      color: ${theme.vars.colors.text.primary};
+      background-color: ${theme.vars.colors.background.surface};
+      font-family: ${theme.vars.typography.fontFamily};
+      min-height: 80px;
+      resize: vertical;
+      outline: none;
+      &:focus {
+        border-color: ${theme.vars.colors.primary.main};
+        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;
+      }
+      &:disabled {
+        background-color: ${theme.vars.colors.background.disabled};
+        color: ${theme.vars.colors.text.secondary};
+        cursor: not-allowed;
+      }
+    `;
+	const textareaError = css`
+      border-color: ${theme.vars.colors.error.main};
+    `;
+	const input = css``;
+	const avatarContainer = css`
+      align-items: flex-start;
+      display: flex;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      margin-bottom: ${theme.vars.spacing.unit};
+    `;
+	const actions = css`
+      display: flex;
+      gap: ${theme.vars.spacing.unit};
+      justify-content: flex-end;
+      padding-top: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const infoContainer = css`
+      display: flex;
+      flex-direction: column;
+      gap: ${theme.vars.spacing.unit};
+    `;
+	const value = css`
+      color: ${theme.vars.colors.text.primary};
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: ${theme.vars.spacing.unit};
+      overflow: hidden;
+      min-height: 32px;
+      line-height: 32px;
+    `;
+	const popup = css`
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	return {
+		actions,
+		avatarContainer,
+		card,
+		content,
+		errorAlert: css`
+      margin-bottom: calc(${theme.vars.spacing.unit} * 2);
+    `,
+		field,
+		fieldGroup,
+		form,
+		header,
+		infoContainer,
+		input,
+		popup,
+		root,
+		textarea,
+		textareaError,
+		value
+	};
+}, [
+	theme.vars.spacing.unit,
+	theme.vars.colors.background.surface,
+	theme.vars.colors.border,
+	theme.vars.borderRadius.large,
+	theme.vars.borderRadius.medium,
+	theme.vars.typography.fontSizes.md,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.primary.main,
+	theme.vars.colors.background.disabled,
+	theme.vars.colors.text.secondary,
+	theme.vars.colors.error.main,
+	theme.vars.typography.fontFamily,
+	colorScheme
+]);
+var BaseCreateOrganization_styles_default = useStyles;
+
+//#endregion
+export { BaseCreateOrganization_styles_default as default };
+//# sourceMappingURL=BaseCreateOrganization.styles.js.map

package/dist/components/presentation/CreateOrganization/BaseCreateOrganization.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseCreateOrganization.styles.js","names":["root: string","card: string","content: string","form: string","header: string","field: string","fieldGroup: string","textarea: string","textareaError: string","input: string","avatarContainer: string","actions: string","infoContainer: string","value: string","popup: string"],"sources":["../../../../src/components/presentation/CreateOrganization/BaseCreateOrganization.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 BaseCreateOrganization component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n    `;\n\n    const card: string = css`\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n      padding: calc(${theme.vars.spacing.unit} * 4);\n    `;\n\n    const content: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const form: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      width: 100%;\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n      margin-bottom: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const field: string = css`\n      display: flex;\n      align-items: center;\n      padding: ${theme.vars.spacing.unit} 0;\n      border-bottom: 1px solid ${theme.vars.colors.border};\n      min-height: 32px;\n    `;\n\n    const fieldGroup: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 0.5);\n    `;\n\n    const textarea: string = css`\n      width: 100%;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 1.5);\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.borderRadius.medium};\n      font-size: ${theme.vars.typography.fontSizes.md};\n      color: ${theme.vars.colors.text.primary};\n      background-color: ${theme.vars.colors.background.surface};\n      font-family: ${theme.vars.typography.fontFamily};\n      min-height: 80px;\n      resize: vertical;\n      outline: none;\n      &:focus {\n        border-color: ${theme.vars.colors.primary.main};\n        box-shadow: 0 0 0 2px ${theme.vars.colors.primary.main}20;\n      }\n      &:disabled {\n        background-color: ${theme.vars.colors.background.disabled};\n        color: ${theme.vars.colors.text.secondary};\n        cursor: not-allowed;\n      }\n    `;\n\n    const textareaError: string = css`\n      border-color: ${theme.vars.colors.error.main};\n    `;\n\n    const input: string = css``;\n\n    const avatarContainer: string = css`\n      align-items: flex-start;\n      display: flex;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      margin-bottom: ${theme.vars.spacing.unit};\n    `;\n\n    const actions: string = css`\n      display: flex;\n      gap: ${theme.vars.spacing.unit};\n      justify-content: flex-end;\n      padding-top: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const infoContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: ${theme.vars.spacing.unit};\n    `;\n\n    const value: string = css`\n      color: ${theme.vars.colors.text.primary};\n      flex: 1;\n      display: flex;\n      align-items: center;\n      gap: ${theme.vars.spacing.unit};\n      overflow: hidden;\n      min-height: 32px;\n      line-height: 32px;\n    `;\n\n    const popup: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const errorAlert: string = css`\n      margin-bottom: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    return {\n      actions,\n      avatarContainer,\n      card,\n      content,\n      errorAlert,\n      field,\n      fieldGroup,\n      form,\n      header,\n      infoContainer,\n      input,\n      popup,\n      root,\n      textarea,\n      textareaError,\n      value,\n    };\n  }, [\n    theme.vars.spacing.unit,\n    theme.vars.colors.background.surface,\n    theme.vars.colors.border,\n    theme.vars.borderRadius.large,\n    theme.vars.borderRadius.medium,\n    theme.vars.typography.fontSizes.md,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.primary.main,\n    theme.vars.colors.background.disabled,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.error.main,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,OAAe,GAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;;CAGlD,MAAMC,OAAe,GAAG;oBACR,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;sBAC/B,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,UAAkB,GAAG;;;kBAGb,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,OAAe,GAAG;;;kBAGV,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,SAAiB,GAAG;;;kBAGZ,MAAM,KAAK,QAAQ,KAAK;4BACd,MAAM,KAAK,QAAQ,KAAK;;CAGhD,MAAMC,QAAgB,GAAG;;;iBAGZ,MAAM,KAAK,QAAQ,KAAK;iCACR,MAAM,KAAK,OAAO,OAAO;;;CAItD,MAAMC,aAAqB,GAAG;;;kBAGhB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,WAAmB,GAAG;;iBAEf,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;0BAC/C,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,aAAa,OAAO;mBACnC,MAAM,KAAK,WAAW,UAAU,GAAG;eACvC,MAAM,KAAK,OAAO,KAAK,QAAQ;0BACpB,MAAM,KAAK,OAAO,WAAW,QAAQ;qBAC1C,MAAM,KAAK,WAAW,WAAW;;;;;wBAK9B,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACvB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;4BAGnC,MAAM,KAAK,OAAO,WAAW,SAAS;iBACjD,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK9C,MAAMC,gBAAwB,GAAG;sBACf,MAAM,KAAK,OAAO,MAAM,KAAK;;CAG/C,MAAMC,QAAgB,GAAG;CAEzB,MAAMC,kBAA0B,GAAG;;;kBAGrB,MAAM,KAAK,QAAQ,KAAK;uBACnB,MAAM,KAAK,QAAQ,KAAK;;CAG3C,MAAMC,UAAkB,GAAG;;aAElB,MAAM,KAAK,QAAQ,KAAK;;0BAEX,MAAM,KAAK,QAAQ,KAAK;;CAG9C,MAAMC,gBAAwB,GAAG;;;aAGxB,MAAM,KAAK,QAAQ,KAAK;;CAGjC,MAAMC,QAAgB,GAAG;eACd,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;aAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;CAMjC,MAAMC,QAAgB,GAAG;sBACP,MAAM,KAAK,QAAQ,KAAK;;AAO1C,QAAO;EACL;EACA;EACA;EACA;EACA,YATyB,GAAG;4BACN,MAAM,KAAK,QAAQ,KAAK;;EAS9C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,WAAW,UAAU;CAChC,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,MAAM;CACxB,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,4CAAe"}

package/dist/components/presentation/CreateOrganization/CreateOrganization.d.ts

@@ -25,7 +25,7 @@ export interface CreateOrganizationProps extends Omit<BaseCreateOrganizationProp
     /**
      * Fallback element to render when the user is not signed in.
      */
-    fallback?: ReactElement;
+    fallback?: ReactElement | null;
     /**
      * Custom organization creation handler (will use default API if not provided).
      */

package/dist/components/presentation/CreateOrganization/CreateOrganization.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateOrganization.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/CreateOrganization/CreateOrganization.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,yBAAyB,EAAC,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAC,EAAE,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AACjD,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAK7F;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,2BAA2B,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAClH;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyE1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"CreateOrganization.d.ts","sourceRoot":"","sources":["../../../../src/components/presentation/CreateOrganization/CreateOrganization.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,yBAAyB,EAAC,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAC,EAAE,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AACjD,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAK7F;;GAEG;AACH,MAAM,WAAW,uBAAwB,SAAQ,IAAI,CAAC,2BAA2B,EAAE,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;IAClH;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAyE1D,CAAC;AAEF,eAAe,kBAAkB,CAAC"}