@thunderid/react 0.0.5 → 0.2.0

package/dist/cjs/components/presentation/OrganizationProfile/BaseOrganizationProfile.cjs

@@ -0,0 +1,328 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_Button = require('../../primitives/Button/Button.cjs');
+const require_TextField = require('../../primitives/TextField/TextField.cjs');
+const require_Card = require('../../primitives/Card/Card.cjs');
+const require_Avatar = require('../../primitives/Avatar/Avatar.cjs');
+const require_Dialog = require('../../primitives/Dialog/Dialog.cjs');
+const require_BaseOrganizationProfile_styles = require('./BaseOrganizationProfile.styles.cjs');
+const require_KeyValueInput = require('../../primitives/KeyValueInput/KeyValueInput.cjs');
+let __thunderid_browser = require("@thunderid/browser");
+__thunderid_browser = require_rolldown_runtime.__toESM(__thunderid_browser);
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/OrganizationProfile/BaseOrganizationProfile.tsx
+/**
+* BaseOrganizationProfile component displays organization information in a
+* structured and styled format. It shows organization details such as name,
+* description, status, and other available information with support for inline editing.
+*
+* This is the base component that can be used in any context where you have
+* an organization object available. It provides editing capabilities similar to
+* the UserProfile component, allowing users to modify organization fields directly.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <BaseOrganizationProfile organization={organizationData} />
+*
+* // With editing enabled and update handler
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   editable={true}
+*   onUpdate={async (payload) => {
+*     await updateOrganizationAPI(orgId, payload);
+*   }}
+* />
+*
+* // With card layout and custom title
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   cardLayout={true}
+*   title="Organization Details"
+*   fallback={<div>No organization data available</div>}
+* />
+*
+* // With custom fields configuration
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   fields={[
+*     { key: 'id', label: 'Organization ID', editable: false },
+*     { key: 'name', label: 'Organization Name', editable: true },
+*     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },
+*     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },
+*     { key: 'attributes', label: 'Custom Attributes', editable: true }
+*   ]}
+*   onUpdate={handleUpdate}
+* />
+*
+* // In popup mode
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   mode="popup"
+*   open={isOpen}
+*   onOpenChange={setIsOpen}
+*   title="Edit Organization"
+* />
+* ```
+* <BaseOrganizationProfile
+*   organization={organizationData}
+*   fields={[
+*     { key: 'id', label: 'Organization ID' },
+*     { key: 'name', label: 'Organization Name' },
+*     { key: 'description', label: 'Description', render: (value) => value || 'No description' },
+*     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },
+*     { key: 'attributes', label: 'Custom Attributes' }
+*   ]}
+* />
+* ```
+*/
+const BaseOrganizationProfile = ({ fallback = null, className = "", cardLayout = true, organization, title = "Organization Profile", mode = "inline", editable = true, onOpenChange, onUpdate, open = false, saveButtonText = "Save Changes", cancelButtonText = "Cancel", fields = [
+	{
+		editable: false,
+		key: "id",
+		label: "Organization ID"
+	},
+	{
+		editable: true,
+		key: "name",
+		label: "Organization Name"
+	},
+	{
+		editable: true,
+		key: "description",
+		label: "Organization Description",
+		render: (value) => value || "-"
+	},
+	{
+		editable: false,
+		key: "created",
+		label: "Created Date",
+		render: (value) => (0, __thunderid_browser.formatDate)(value)
+	},
+	{
+		editable: false,
+		key: "lastModified",
+		label: "Last Modified Date",
+		render: (value) => (0, __thunderid_browser.formatDate)(value)
+	}
+] }) => {
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_BaseOrganizationProfile_styles.default(theme, colorScheme);
+	const [editedOrganization, setEditedOrganization] = (0, react.useState)(organization);
+	const [editingFields, setEditingFields] = (0, react.useState)({});
+	const PencilIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })
+	});
+	const toggleFieldEdit = (0, react.useCallback)((fieldName) => {
+		setEditingFields((prev) => ({
+			...prev,
+			[fieldName]: !prev[fieldName]
+		}));
+	}, []);
+	const getFieldPlaceholder = (0, react.useCallback)((fieldKey) => {
+		return `Enter ${{
+			description: "organization description",
+			name: "organization name",
+			orgHandle: "organization handle",
+			status: "organization status",
+			type: "organization type"
+		}[fieldKey] || fieldKey.toLowerCase()}`;
+	}, []);
+	const handleFieldSave = (0, react.useCallback)((fieldKey) => {
+		if (!onUpdate || !fieldKey) return;
+		let fieldValue;
+		if (editedOrganization && fieldKey && editedOrganization[fieldKey] !== void 0) fieldValue = editedOrganization[fieldKey];
+		else if (organization?.[fieldKey] !== void 0) fieldValue = organization[fieldKey];
+		else fieldValue = "";
+		onUpdate({ [fieldKey]: fieldValue });
+		toggleFieldEdit(fieldKey);
+	}, [
+		editedOrganization,
+		organization,
+		onUpdate,
+		toggleFieldEdit
+	]);
+	const handleFieldCancel = (0, react.useCallback)((fieldKey) => {
+		setEditedOrganization((prev) => ({
+			...prev,
+			[fieldKey]: organization?.[fieldKey]
+		}));
+		toggleFieldEdit(fieldKey);
+	}, [organization, toggleFieldEdit]);
+	const getOrgInitials = (name) => {
+		if (!name) return "ORG";
+		return name.split(" ").map((word) => word.charAt(0)).join("").toUpperCase().slice(0, 2);
+	};
+	const renderField = (field, isEditing, onEditValue, onStartEdit) => {
+		if (!field) return null;
+		const { key, label, editable: fieldEditable = true } = field;
+		const value = key === "attributes" ? organization?.attributes || {} : organization?.[key];
+		const renderedValue = field.render ? field.render(value, organization) : value;
+		if (isEditing && onEditValue && fieldEditable && editable) {
+			const fieldValue = editedOrganization && key && editedOrganization[key] !== void 0 ? editedOrganization[key] : value || "";
+			const commonProps = {
+				className: (0, __emotion_css.cx)(styles["fieldInput"]),
+				label: void 0,
+				onChange: (e) => onEditValue(e.target ? e.target.value : e),
+				placeholder: getFieldPlaceholder(key),
+				value: typeof fieldValue === "object" ? JSON.stringify(fieldValue) : String(fieldValue || "")
+			};
+			let fieldInput;
+			if (key === "attributes") fieldInput = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KeyValueInput.default, {
+				value: typeof fieldValue === "object" && fieldValue !== null ? fieldValue : {},
+				onChange: (pairs) => {
+					onEditValue(pairs.reduce((acc, pair) => {
+						acc[pair.key] = pair.value;
+						return acc;
+					}, {}));
+				},
+				onAdd: (pair) => {
+					if (onUpdate) onUpdate([{
+						operation: "ADD",
+						path: `/attributes/${pair.key}`,
+						value: pair.value
+					}]);
+				},
+				onRemove: (pair) => {
+					if (onUpdate) onUpdate([{
+						operation: "REMOVE",
+						path: `/attributes/${pair.key}`,
+						value: ""
+					}]);
+				},
+				label: "",
+				keyPlaceholder: "Attribute name",
+				valuePlaceholder: "Attribute value",
+				helperText: "Add custom attributes as key-value pairs"
+			});
+			else fieldInput = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TextField.default, { ...commonProps });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, __emotion_css.cx)(styles["label"]),
+				children: label
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["value"]),
+				children: fieldInput
+			})] });
+		}
+		const hasValue = value !== void 0 && value !== null && value !== "";
+		const isFieldEditable = editable && fieldEditable;
+		let displayValue;
+		if (hasValue) displayValue = key === "attributes" && typeof value === "object" && value !== null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_KeyValueInput.default, {
+			value,
+			readOnly: true,
+			label: ""
+		}) : String(renderedValue);
+		else if (isFieldEditable) displayValue = getFieldPlaceholder(key);
+		else displayValue = "-";
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: (0, __emotion_css.cx)(styles["label"]),
+			children: label
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["value"], !hasValue && styles["valueEmpty"]),
+			children: !hasValue && isFieldEditable && onStartEdit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+				onClick: onStartEdit,
+				variant: "text",
+				color: "secondary",
+				size: "small",
+				title: "Click to edit",
+				className: (0, __emotion_css.cx)(styles["placeholderButton"]),
+				children: displayValue
+			}) : displayValue
+		})] });
+	};
+	const renderOrganizationField = (field) => {
+		if (!field?.key) return null;
+		const hasValue = organization?.[field.key] !== void 0 && organization?.[field.key] !== "" && organization?.[field.key] !== null;
+		const isFieldEditing = editingFields[field.key];
+		const isFieldEditable = editable && field.editable !== false;
+		if (!(hasValue || isFieldEditing || isFieldEditable)) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, __emotion_css.cx)(styles["field"]),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["fieldContent"]),
+				children: renderField(field, isFieldEditing, (value) => {
+					const tempEditedOrganization = { ...editedOrganization };
+					tempEditedOrganization[field.key] = value;
+					setEditedOrganization(tempEditedOrganization);
+				}, () => toggleFieldEdit(field.key))
+			}), isFieldEditable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, __emotion_css.cx)(styles["fieldActions"]),
+				children: isFieldEditing ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					onClick: () => handleFieldSave(field.key),
+					color: "primary",
+					variant: "solid",
+					size: "small",
+					title: "Save changes",
+					children: saveButtonText
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					onClick: () => handleFieldCancel(field.key),
+					color: "secondary",
+					variant: "solid",
+					size: "small",
+					title: "Cancel editing",
+					children: cancelButtonText
+				})] }) : hasValue && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.default, {
+					onClick: () => toggleFieldEdit(field.key),
+					variant: "text",
+					color: "secondary",
+					size: "small",
+					title: "Edit field",
+					className: (0, __emotion_css.cx)(styles["editButton"]),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PencilIcon, {})
+				})
+			})]
+		}, field.key);
+	};
+	if (!organization) return fallback;
+	const profileContent = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Card.default, {
+		className: (0, __emotion_css.cx)(styles["root"], cardLayout && styles["card"], className),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, __emotion_css.cx)(styles["header"]),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Avatar.Avatar, {
+				name: getOrgInitials(organization.name),
+				size: 80,
+				alt: `${organization.name} logo`
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, __emotion_css.cx)(styles["orgInfo"]),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					className: (0, __emotion_css.cx)(styles["name"]),
+					children: organization.name
+				}), organization.orgHandle && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					className: (0, __emotion_css.cx)(styles["handle"]),
+					children: ["@", organization.orgHandle]
+				})]
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["infoContainer"]),
+			children: fields.map((field) => renderOrganizationField(field))
+		})]
+	});
+	if (mode === "popup") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Dialog.default.Content, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Dialog.default.Heading, { children: title }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["popup"]),
+			children: profileContent
+		})] })
+	});
+	return profileContent;
+};
+var BaseOrganizationProfile_default = BaseOrganizationProfile;
+
+//#endregion
+exports.default = BaseOrganizationProfile_default;
+//# sourceMappingURL=BaseOrganizationProfile.cjs.map

package/dist/cjs/components/presentation/OrganizationProfile/BaseOrganizationProfile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationProfile.cjs","names":["BaseOrganizationProfile: FC<BaseOrganizationProfileProps>","useTheme","styles: Record<string, string>","useStyles","toggleFieldEdit: (fieldName: string) => void","getFieldPlaceholder: (fieldKey: string) => string","handleFieldSave: (fieldKey: string) => void","fieldValue: any","handleFieldCancel: (fieldKey: string) => void","value: any","renderedValue: any","commonProps: any","fieldInput: ReactElement","KeyValueInput","TextField","hasValue: boolean","isFieldEditable: boolean","displayValue: string | ReactElement","Button","isFieldEditing: boolean","tempEditedOrganization: any","profileContent: ReactElement","CardPrimitive","Avatar","DialogPrimitive"],"sources":["../../../../../src/components/presentation/OrganizationProfile/BaseOrganizationProfile.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 {OrganizationDetails, formatDate, Preferences} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode, useState, useCallback} from 'react';\nimport useStyles from './BaseOrganizationProfile.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport {Avatar} from '../../primitives/Avatar/Avatar';\nimport Button from '../../primitives/Button/Button';\nimport CardPrimitive from '../../primitives/Card/Card';\nimport DialogPrimitive from '../../primitives/Dialog/Dialog';\nimport KeyValueInput from '../../primitives/KeyValueInput/KeyValueInput';\nimport TextField from '../../primitives/TextField/TextField';\n\nexport interface BaseOrganizationProfileProps {\n  /**\n   * Callback fired when the cancel button is clicked (only used in editable mode).\n   */\n  cancelButtonText?: string;\n\n  /**\n   * Whether to display the profile in a card layout.\n   */\n  cardLayout?: boolean;\n\n  /**\n   * CSS class name for styling the component.\n   */\n  className?: string;\n\n  /**\n   * Whether the organization profile is editable.\n   */\n  editable?: boolean;\n\n  /**\n   * Component to render when no organization data is available.\n   */\n  fallback?: ReactElement | null;\n\n  /**\n   * Array of field configurations to display. Each field specifies what organization data to show.\n   */\n  fields?: {\n    editable?: boolean;\n    key: keyof OrganizationDetails | 'attributes';\n    label: string;\n    render?: (value: any, organization: OrganizationDetails) => ReactNode;\n  }[];\n\n  /**\n   * Display mode for the component.\n   */\n  mode?: 'inline' | 'popup';\n\n  /**\n   * Callback fired when a field value changes.\n   */\n  onChange?: (field: string, value: any) => void;\n\n  /**\n   * Callback fired when the popup should be closed (only used in popup mode).\n   */\n  onOpenChange?: (open: boolean) => void;\n\n  /**\n   * Callback fired when the form is submitted (only used in editable mode).\n   */\n  onSubmit?: (data: any) => void;\n\n  /**\n   * Callback fired when the organization should be updated.\n   */\n  onUpdate?: (payload: any) => Promise<void>;\n\n  /**\n   * Whether the popup is open (only used in popup mode).\n   */\n  open?: boolean;\n\n  /**\n   * The organization details to display.\n   */\n  organization?: OrganizationDetails | null;\n\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\n  /**\n   * Text for the save button (only used in editable mode).\n   */\n  saveButtonText?: string;\n\n  /**\n   * Custom title for the profile.\n   */\n  title?: string;\n}\n\n/**\n * BaseOrganizationProfile component displays organization information in a\n * structured and styled format. It shows organization details such as name,\n * description, status, and other available information with support for inline editing.\n *\n * This is the base component that can be used in any context where you have\n * an organization object available. It provides editing capabilities similar to\n * the UserProfile component, allowing users to modify organization fields directly.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <BaseOrganizationProfile organization={organizationData} />\n *\n * // With editing enabled and update handler\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   editable={true}\n *   onUpdate={async (payload) => {\n *     await updateOrganizationAPI(orgId, payload);\n *   }}\n * />\n *\n * // With card layout and custom title\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   cardLayout={true}\n *   title=\"Organization Details\"\n *   fallback={<div>No organization data available</div>}\n * />\n *\n * // With custom fields configuration\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   fields={[\n *     { key: 'id', label: 'Organization ID', editable: false },\n *     { key: 'name', label: 'Organization Name', editable: true },\n *     { key: 'description', label: 'Description', editable: true, render: (value) => value || 'No description' },\n *     { key: 'created', label: 'Created Date', editable: false, render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'attributes', label: 'Custom Attributes', editable: true }\n *   ]}\n *   onUpdate={handleUpdate}\n * />\n *\n * // In popup mode\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   mode=\"popup\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Edit Organization\"\n * />\n * ```\n * <BaseOrganizationProfile\n *   organization={organizationData}\n *   fields={[\n *     { key: 'id', label: 'Organization ID' },\n *     { key: 'name', label: 'Organization Name' },\n *     { key: 'description', label: 'Description', render: (value) => value || 'No description' },\n *     { key: 'created', label: 'Created Date', render: (value) => new Date(value).toLocaleDateString() },\n *     { key: 'attributes', label: 'Custom Attributes' }\n *   ]}\n * />\n * ```\n */\nconst BaseOrganizationProfile: FC<BaseOrganizationProfileProps> = ({\n  fallback = null,\n  className = '',\n  cardLayout = true,\n  organization,\n  title = 'Organization Profile',\n  mode = 'inline',\n  editable = true,\n  onOpenChange,\n  onUpdate,\n  open = false,\n  saveButtonText = 'Save Changes',\n  cancelButtonText = 'Cancel',\n  fields = [\n    {\n      editable: false,\n      key: 'id',\n      label: 'Organization ID',\n    },\n    {\n      editable: true,\n      key: 'name',\n      label: 'Organization Name',\n    },\n    {\n      editable: true,\n      key: 'description',\n      label: 'Organization Description',\n      render: (value: any): any => value || '-',\n    },\n    {\n      editable: false,\n      key: 'created',\n      label: 'Created Date',\n      render: (value: any): any => formatDate(value),\n    },\n    {\n      editable: false,\n      key: 'lastModified',\n      label: 'Last Modified Date',\n      render: (value: any): any => formatDate(value),\n    },\n  ],\n}: BaseOrganizationProfileProps): ReactElement | null => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const [editedOrganization, setEditedOrganization] = useState(organization);\n  const [editingFields, setEditingFields] = useState<Record<string, boolean>>({});\n\n  const PencilIcon = (): ReactElement => (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" />\n    </svg>\n  );\n\n  const toggleFieldEdit: (fieldName: string) => void = useCallback((fieldName: string) => {\n    setEditingFields((prev: Record<string, boolean>) => ({\n      ...prev,\n      [fieldName]: !prev[fieldName],\n    }));\n  }, []);\n\n  const getFieldPlaceholder: (fieldKey: string) => string = useCallback((fieldKey: string): string => {\n    const fieldLabels: Record<string, string> = {\n      description: 'organization description',\n      name: 'organization name',\n      orgHandle: 'organization handle',\n      status: 'organization status',\n      type: 'organization type',\n    };\n\n    const fieldLabel: string = fieldLabels[fieldKey] || fieldKey.toLowerCase();\n    return `Enter ${fieldLabel}`;\n  }, []);\n\n  const handleFieldSave: (fieldKey: string) => void = useCallback(\n    (fieldKey: string): void => {\n      if (!onUpdate || !fieldKey) return;\n\n      let fieldValue: any;\n      if (editedOrganization && fieldKey && editedOrganization[fieldKey as keyof OrganizationDetails] !== undefined) {\n        fieldValue = editedOrganization[fieldKey as keyof OrganizationDetails];\n      } else if (organization?.[fieldKey as keyof OrganizationDetails] !== undefined) {\n        fieldValue = organization[fieldKey as keyof OrganizationDetails];\n      } else {\n        fieldValue = '';\n      }\n\n      const payload: Record<string, any> = {\n        [fieldKey]: fieldValue,\n      };\n\n      onUpdate(payload);\n      toggleFieldEdit(fieldKey);\n    },\n    [editedOrganization, organization, onUpdate, toggleFieldEdit],\n  );\n\n  const handleFieldCancel: (fieldKey: string) => void = useCallback(\n    (fieldKey: string) => {\n      setEditedOrganization((prev: any) => ({\n        ...prev,\n        [fieldKey]: organization?.[fieldKey as keyof OrganizationDetails],\n      }));\n      toggleFieldEdit(fieldKey);\n    },\n    [organization, toggleFieldEdit],\n  );\n\n  const getOrgInitials = (name?: string): string => {\n    if (!name) return 'ORG';\n    return name\n      .split(' ')\n      .map((word: string) => word.charAt(0))\n      .join('')\n      .toUpperCase()\n      .slice(0, 2);\n  };\n\n  const renderField = (\n    field: any,\n    isEditing: boolean,\n    onEditValue?: (value: any) => void,\n    onStartEdit?: () => void,\n  ): ReactElement | null => {\n    if (!field) return null;\n\n    const {key, label, editable: fieldEditable = true} = field;\n    const value: any =\n      key === 'attributes' ? organization?.attributes || {} : organization?.[key as keyof OrganizationDetails];\n\n    const renderedValue: any = field.render ? field.render(value, organization) : value;\n\n    if (isEditing && onEditValue && fieldEditable && editable) {\n      const fieldValue: any =\n        editedOrganization && key && editedOrganization[key as keyof OrganizationDetails] !== undefined\n          ? editedOrganization[key as keyof OrganizationDetails]\n          : value || '';\n\n      const commonProps: any = {\n        className: cx(styles['fieldInput']),\n        label: undefined,\n        onChange: (e: any): void => onEditValue(e.target ? e.target.value : e),\n        placeholder: getFieldPlaceholder(key),\n        value: typeof fieldValue === 'object' ? JSON.stringify(fieldValue) : String(fieldValue || ''),\n      };\n\n      let fieldInput: ReactElement;\n\n      if (key === 'attributes') {\n        const attributesValue: any = typeof fieldValue === 'object' && fieldValue !== null ? fieldValue : {};\n        fieldInput = (\n          <KeyValueInput\n            value={attributesValue}\n            onChange={(pairs: any): void => {\n              const attributesObject: Record<string, any> = pairs.reduce(\n                (acc: any, pair: any) => {\n                  acc[pair.key] = pair.value;\n                  return acc;\n                },\n                {} as Record<string, any>,\n              );\n              onEditValue(attributesObject);\n            }}\n            onAdd={(pair: any): void => {\n              if (onUpdate) {\n                const operation: any = {\n                  operation: 'ADD',\n                  path: `/attributes/${pair.key}`,\n                  value: pair.value,\n                };\n                onUpdate([operation]);\n              }\n            }}\n            onRemove={(pair: any): void => {\n              if (onUpdate) {\n                const operation: any = {\n                  operation: 'REMOVE',\n                  path: `/attributes/${pair.key}`,\n                  value: '',\n                };\n                onUpdate([operation]);\n              }\n            }}\n            label=\"\"\n            keyPlaceholder=\"Attribute name\"\n            valuePlaceholder=\"Attribute value\"\n            helperText=\"Add custom attributes as key-value pairs\"\n          />\n        );\n      } else {\n        fieldInput = <TextField {...commonProps} />;\n      }\n\n      return (\n        <>\n          <span className={cx(styles['label'])}>{label}</span>\n          <div className={cx(styles['value'])}>{fieldInput}</div>\n        </>\n      );\n    }\n\n    const hasValue: boolean = value !== undefined && value !== null && value !== '';\n    const isFieldEditable: boolean = editable && fieldEditable;\n\n    let displayValue: string | ReactElement;\n    if (hasValue) {\n      displayValue =\n        key === 'attributes' && typeof value === 'object' && value !== null ? (\n          <KeyValueInput value={value} readOnly={true} label=\"\" />\n        ) : (\n          String(renderedValue)\n        );\n    } else if (isFieldEditable) {\n      displayValue = getFieldPlaceholder(key);\n    } else {\n      displayValue = '-';\n    }\n\n    return (\n      <>\n        <span className={cx(styles['label'])}>{label}</span>\n        <div className={cx(styles['value'], !hasValue && styles['valueEmpty'])}>\n          {!hasValue && isFieldEditable && onStartEdit ? (\n            <Button\n              onClick={onStartEdit}\n              variant=\"text\"\n              color=\"secondary\"\n              size=\"small\"\n              title=\"Click to edit\"\n              className={cx(styles['placeholderButton'])}\n            >\n              {displayValue}\n            </Button>\n          ) : (\n            displayValue\n          )}\n        </div>\n      </>\n    );\n  };\n\n  const renderOrganizationField = (field: any): ReactElement | null => {\n    if (!field?.key) return null;\n\n    const hasValue: boolean =\n      organization?.[field.key as keyof OrganizationDetails] !== undefined &&\n      organization?.[field.key as keyof OrganizationDetails] !== '' &&\n      organization?.[field.key as keyof OrganizationDetails] !== null;\n    const isFieldEditing: boolean = editingFields[field.key];\n    const isFieldEditable: boolean = editable && field.editable !== false;\n\n    const shouldShow: boolean = hasValue || isFieldEditing || isFieldEditable;\n\n    if (!shouldShow) {\n      return null;\n    }\n\n    return (\n      <div className={cx(styles['field'])} key={field.key}>\n        <div className={cx(styles['fieldContent'])}>\n          {renderField(\n            field,\n            isFieldEditing,\n            (value: any): void => {\n              const tempEditedOrganization: any = {...editedOrganization};\n              tempEditedOrganization[field.key as keyof OrganizationDetails] = value;\n              setEditedOrganization(tempEditedOrganization);\n            },\n            (): void => toggleFieldEdit(field.key),\n          )}\n        </div>\n        {isFieldEditable && (\n          <div className={cx(styles['fieldActions'])}>\n            {isFieldEditing ? (\n              <>\n                <Button\n                  onClick={(): void => handleFieldSave(field.key)}\n                  color=\"primary\"\n                  variant=\"solid\"\n                  size=\"small\"\n                  title=\"Save changes\"\n                >\n                  {saveButtonText}\n                </Button>\n                <Button\n                  onClick={(): void => handleFieldCancel(field.key)}\n                  color=\"secondary\"\n                  variant=\"solid\"\n                  size=\"small\"\n                  title=\"Cancel editing\"\n                >\n                  {cancelButtonText}\n                </Button>\n              </>\n            ) : (\n              hasValue && (\n                <Button\n                  onClick={(): void => toggleFieldEdit(field.key)}\n                  variant=\"text\"\n                  color=\"secondary\"\n                  size=\"small\"\n                  title=\"Edit field\"\n                  className={cx(styles['editButton'])}\n                >\n                  <PencilIcon />\n                </Button>\n              )\n            )}\n          </div>\n        )}\n      </div>\n    );\n  };\n\n  if (!organization) {\n    return fallback;\n  }\n\n  const profileContent: ReactElement = (\n    <CardPrimitive className={cx(styles['root'], cardLayout && styles['card'], className)}>\n      <div className={cx(styles['header'])}>\n        <Avatar name={getOrgInitials(organization.name)} size={80} alt={`${organization.name} logo`} />\n        <div className={cx(styles['orgInfo'])}>\n          <h2 className={cx(styles['name'])}>{organization.name}</h2>\n          {organization.orgHandle && <p className={cx(styles['handle'])}>@{organization.orgHandle}</p>}\n        </div>\n      </div>\n\n      <div className={cx(styles['infoContainer'])}>{fields.map((field: any) => renderOrganizationField(field))}</div>\n    </CardPrimitive>\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={cx(styles['popup'])}>{profileContent}</div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive>\n    );\n  }\n\n  return profileContent;\n};\n\nexport default BaseOrganizationProfile;\n"],"mappings":"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"}

package/dist/cjs/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.cjs

@@ -0,0 +1,166 @@
+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/presentation/OrganizationProfile/BaseOrganizationProfile.styles.ts
+/**
+* Creates styles for the BaseOrganizationProfile 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) => (0, react.useMemo)(() => ({
+	attributeItem: __emotion_css.css`
+        display: flex;
+        gap: ${theme.vars.spacing.unit};
+        padding: calc(${theme.vars.spacing.unit} / 4) 0;
+        align-items: center;
+      `,
+	attributeKey: __emotion_css.css`
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: ${theme.vars.colors.text.secondary};
+        min-width: 80px;
+        flex-shrink: 0;
+      `,
+	attributeValue: __emotion_css.css`
+        font-size: 0.75rem;
+        color: ${theme.vars.colors.text.primary};
+        word-break: break-word;
+        flex: 1;
+      `,
+	attributesList: __emotion_css.css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${theme.vars.spacing.unit} / 4);
+      `,
+	card: __emotion_css.css`
+        background: ${theme.vars.colors.background.surface};
+        border-radius: ${theme.vars.borderRadius.large};
+      `,
+	editButton: __emotion_css.css`
+        min-width: auto;
+        padding: calc(${theme.vars.spacing.unit} / 2);
+        min-height: auto;
+      `,
+	field: __emotion_css.css`
+        display: flex;
+        align-items: flex-start;
+        padding: calc(${theme.vars.spacing.unit} / 2) 0;
+        border-bottom: 1px solid ${theme.vars.colors.border};
+        min-height: 28px;
+        gap: ${theme.vars.spacing.unit};
+      `,
+	fieldActions: __emotion_css.css`
+        display: flex;
+        align-items: center;
+        gap: calc(${theme.vars.spacing.unit} / 2);
+      `,
+	fieldContent: __emotion_css.css`
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: ${theme.vars.spacing.unit};
+      `,
+	fieldInput: __emotion_css.css`
+        margin-bottom: 0;
+      `,
+	fieldLast: __emotion_css.css`
+        border-bottom: none;
+      `,
+	handle: __emotion_css.css`
+        font-size: 1rem;
+        color: ${theme.vars.colors.text.secondary};
+        margin: 0;
+        font-family: monospace;
+      `,
+	header: __emotion_css.css`
+        display: flex;
+        align-items: center;
+        gap: calc(${theme.vars.spacing.unit} * 2);
+        margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+        padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      `,
+	infoContainer: __emotion_css.css`
+        display: flex;
+        flex-direction: column;
+        gap: ${theme.vars.spacing.unit};
+      `,
+	label: __emotion_css.css`
+        font-size: 0.875rem;
+        font-weight: 500;
+        color: ${theme.vars.colors.text.secondary};
+        width: 120px;
+        flex-shrink: 0;
+        line-height: 28px;
+      `,
+	name: __emotion_css.css`
+        font-size: 1.5rem;
+        font-weight: 600;
+        margin: 0 0 8px 0;
+        color: ${theme.vars.colors.text.primary};
+      `,
+	orgInfo: __emotion_css.css`
+        flex: 1;
+      `,
+	permissionBadge: __emotion_css.css`
+        padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};
+        border-radius: ${theme.vars.borderRadius.small};
+        font-size: 0.75rem;
+        background-color: ${theme.vars.colors.primary.main};
+        color: ${theme.vars.colors.primary.contrastText};
+        border: 1px solid ${theme.vars.colors.border};
+      `,
+	permissionsList: __emotion_css.css`
+        display: flex;
+        flex-wrap: wrap;
+        gap: calc(${theme.vars.spacing.unit} / 2);
+      `,
+	placeholderButton: __emotion_css.css`
+        font-style: italic;
+        text-decoration: underline;
+        opacity: 0.7;
+        padding: 0;
+        min-height: auto;
+      `,
+	popup: __emotion_css.css`
+        padding: calc(${theme.vars.spacing.unit} * 2);
+      `,
+	root: __emotion_css.css`
+        padding: calc(${theme.vars.spacing.unit} * 4);
+        min-width: 600px;
+        margin: 0 auto;
+        font-family: ${theme.vars.typography.fontFamily};
+      `,
+	statusBadge: __emotion_css.css`
+        padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};
+        border-radius: ${theme.vars.borderRadius.small};
+        font-size: 0.75rem;
+        font-weight: 500;
+        color: white;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      `,
+	value: __emotion_css.css`
+        color: ${theme.vars.colors.text.primary};
+        flex: 1;
+        display: flex;
+        align-items: center;
+        gap: ${theme.vars.spacing.unit};
+        overflow: hidden;
+        min-height: 28px;
+        line-height: 28px;
+        word-break: break-word;
+      `,
+	valueEmpty: __emotion_css.css`
+        font-style: italic;
+        opacity: 0.7;
+      `
+}), [theme, colorScheme]);
+var BaseOrganizationProfile_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseOrganizationProfile_styles_default;
+//# sourceMappingURL=BaseOrganizationProfile.styles.cjs.map

package/dist/cjs/components/presentation/OrganizationProfile/BaseOrganizationProfile.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationProfile.styles.cjs","names":[],"sources":["../../../../../src/components/presentation/OrganizationProfile/BaseOrganizationProfile.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 BaseOrganizationProfile 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    () => ({\n      attributeItem: css`\n        display: flex;\n        gap: ${theme.vars.spacing.unit};\n        padding: calc(${theme.vars.spacing.unit} / 4) 0;\n        align-items: center;\n      `,\n      attributeKey: css`\n        font-size: 0.75rem;\n        font-weight: 500;\n        color: ${theme.vars.colors.text.secondary};\n        min-width: 80px;\n        flex-shrink: 0;\n      `,\n      attributeValue: css`\n        font-size: 0.75rem;\n        color: ${theme.vars.colors.text.primary};\n        word-break: break-word;\n        flex: 1;\n      `,\n      attributesList: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${theme.vars.spacing.unit} / 4);\n      `,\n      card: css`\n        background: ${theme.vars.colors.background.surface};\n        border-radius: ${theme.vars.borderRadius.large};\n      `,\n      editButton: css`\n        min-width: auto;\n        padding: calc(${theme.vars.spacing.unit} / 2);\n        min-height: auto;\n      `,\n      field: css`\n        display: flex;\n        align-items: flex-start;\n        padding: calc(${theme.vars.spacing.unit} / 2) 0;\n        border-bottom: 1px solid ${theme.vars.colors.border};\n        min-height: 28px;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      fieldActions: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} / 2);\n      `,\n      fieldContent: css`\n        flex: 1;\n        display: flex;\n        align-items: center;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      fieldInput: css`\n        margin-bottom: 0;\n      `,\n      fieldLast: css`\n        border-bottom: none;\n      `,\n      handle: css`\n        font-size: 1rem;\n        color: ${theme.vars.colors.text.secondary};\n        margin: 0;\n        font-family: monospace;\n      `,\n      header: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${theme.vars.spacing.unit} * 2);\n        margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n        padding-bottom: calc(${theme.vars.spacing.unit} * 2);\n      `,\n      infoContainer: css`\n        display: flex;\n        flex-direction: column;\n        gap: ${theme.vars.spacing.unit};\n      `,\n      label: css`\n        font-size: 0.875rem;\n        font-weight: 500;\n        color: ${theme.vars.colors.text.secondary};\n        width: 120px;\n        flex-shrink: 0;\n        line-height: 28px;\n      `,\n      name: css`\n        font-size: 1.5rem;\n        font-weight: 600;\n        margin: 0 0 8px 0;\n        color: ${theme.vars.colors.text.primary};\n      `,\n      orgInfo: css`\n        flex: 1;\n      `,\n      permissionBadge: css`\n        padding: calc(${theme.vars.spacing.unit} / 4) ${theme.vars.spacing.unit};\n        border-radius: ${theme.vars.borderRadius.small};\n        font-size: 0.75rem;\n        background-color: ${theme.vars.colors.primary.main};\n        color: ${theme.vars.colors.primary.contrastText};\n        border: 1px solid ${theme.vars.colors.border};\n      `,\n      permissionsList: css`\n        display: flex;\n        flex-wrap: wrap;\n        gap: calc(${theme.vars.spacing.unit} / 2);\n      `,\n      placeholderButton: css`\n        font-style: italic;\n        text-decoration: underline;\n        opacity: 0.7;\n        padding: 0;\n        min-height: auto;\n      `,\n      popup: css`\n        padding: calc(${theme.vars.spacing.unit} * 2);\n      `,\n      root: 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      statusBadge: css`\n        padding: calc(${theme.vars.spacing.unit} / 2) ${theme.vars.spacing.unit};\n        border-radius: ${theme.vars.borderRadius.small};\n        font-size: 0.75rem;\n        font-weight: 500;\n        color: white;\n        text-transform: uppercase;\n        letter-spacing: 0.5px;\n      `,\n      value: 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: 28px;\n        line-height: 28px;\n        word-break: break-word;\n      `,\n      valueEmpty: css`\n        font-style: italic;\n        opacity: 0.7;\n      `,\n    }),\n    [theme, colorScheme],\n  );\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,0CAEtB;CACL,eAAe,iBAAG;;eAET,MAAM,KAAK,QAAQ,KAAK;wBACf,MAAM,KAAK,QAAQ,KAAK;;;CAG1C,cAAc,iBAAG;;;iBAGN,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,gBAAgB,iBAAG;;iBAER,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;CAI1C,gBAAgB,iBAAG;;;oBAGL,MAAM,KAAK,QAAQ,KAAK;;CAEtC,MAAM,iBAAG;sBACO,MAAM,KAAK,OAAO,WAAW,QAAQ;yBAClC,MAAM,KAAK,aAAa,MAAM;;CAEjD,YAAY,iBAAG;;wBAEG,MAAM,KAAK,QAAQ,KAAK;;;CAG1C,OAAO,iBAAG;;;wBAGQ,MAAM,KAAK,QAAQ,KAAK;mCACb,MAAM,KAAK,OAAO,OAAO;;eAE7C,MAAM,KAAK,QAAQ,KAAK;;CAEjC,cAAc,iBAAG;;;oBAGH,MAAM,KAAK,QAAQ,KAAK;;CAEtC,cAAc,iBAAG;;;;eAIR,MAAM,KAAK,QAAQ,KAAK;;CAEjC,YAAY,iBAAG;;;CAGf,WAAW,iBAAG;;;CAGd,QAAQ,iBAAG;;iBAEA,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAI5C,QAAQ,iBAAG;;;oBAGG,MAAM,KAAK,QAAQ,KAAK;8BACd,MAAM,KAAK,QAAQ,KAAK;+BACvB,MAAM,KAAK,QAAQ,KAAK;;CAEjD,eAAe,iBAAG;;;eAGT,MAAM,KAAK,QAAQ,KAAK;;CAEjC,OAAO,iBAAG;;;iBAGC,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;CAK5C,MAAM,iBAAG;;;;iBAIE,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAE1C,SAAS,iBAAG;;;CAGZ,iBAAiB,iBAAG;wBACF,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;yBACvD,MAAM,KAAK,aAAa,MAAM;;4BAE3B,MAAM,KAAK,OAAO,QAAQ,KAAK;iBAC1C,MAAM,KAAK,OAAO,QAAQ,aAAa;4BAC5B,MAAM,KAAK,OAAO,OAAO;;CAE/C,iBAAiB,iBAAG;;;oBAGN,MAAM,KAAK,QAAQ,KAAK;;CAEtC,mBAAmB,iBAAG;;;;;;;CAOtB,OAAO,iBAAG;wBACQ,MAAM,KAAK,QAAQ,KAAK;;CAE1C,MAAM,iBAAG;wBACS,MAAM,KAAK,QAAQ,KAAK;;;uBAGzB,MAAM,KAAK,WAAW,WAAW;;CAElD,aAAa,iBAAG;wBACE,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;yBACvD,MAAM,KAAK,aAAa,MAAM;;;;;;;CAOjD,OAAO,iBAAG;iBACC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;;eAIjC,MAAM,KAAK,QAAQ,KAAK;;;;;;CAMjC,YAAY,iBAAG;;;;CAIhB,GACD,CAAC,OAAO,YAAY,CACrB;AAEH,6CAAe"}