@thunderid/react 1.16.0 → 1.17.0

package/dist/components/management/FlowVariables/BaseFlowVariables.js

@@ -0,0 +1,206 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
+import AdminSection_default from "../shared/AdminSection.js";
+import FlowVariables_styles_default from "./FlowVariables.styles.js";
+import FlowVariableField_default from "./FlowVariableField.js";
+import { getFlowVariableOptions, resolveFlowVariableRule, validateFlowVariableValue } from "@thunderid/browser";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/management/FlowVariables/BaseFlowVariables.tsx
+const startingValuesOf = (variables, overlay, initialValues) => variables.reduce((values, definition) => {
+	const { defaultValue, editable } = resolveFlowVariableRule(definition, overlay);
+	const chosen = editable ? initialValues?.[definition.identifier] ?? defaultValue : defaultValue;
+	if (chosen !== void 0 && chosen !== null) values[definition.identifier] = chosen;
+	return values;
+}, {});
+/**
+* A form for the variables a flow declares, each in a card with its label, its description, whether it is
+* customized or follows the default, and the input its type calls for. It is what a delegated admin sees when
+* overriding a flow, and what the flow editor previews. Holds no data of its own: pass the variables and handle
+* the submission.
+*
+* @example
+* ```tsx
+* <BaseFlowVariables variables={variables} connections={connections} overlay={overlay} onSubmit={save} />
+* ```
+*/
+const BaseFlowVariables = ({ children, className, connections = [], description, error = null, initialValues, isSubmitting = false, onCancel, onChange, onCreateConnection, onSubmit, ouName, overlay, ownerName, preferences, readOnly = false, renderField, renderFieldAction, showScopeNotice = false, title, variables }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = FlowVariables_styles_default(theme, colorScheme);
+	const { t } = useTranslation_default(preferences?.i18n);
+	const startingValues = useMemo(() => startingValuesOf(variables, overlay, initialValues), [
+		JSON.stringify(variables),
+		JSON.stringify(overlay),
+		JSON.stringify(initialValues)
+	]);
+	const [values, setValues] = useState(startingValues);
+	const [touched, setTouched] = useState({});
+	const [submitted, setSubmitted] = useState(false);
+	const appliedValues = useRef(startingValues);
+	useEffect(() => {
+		if (appliedValues.current !== startingValues) {
+			appliedValues.current = startingValues;
+			setValues(startingValues);
+			setTouched({});
+			setSubmitted(false);
+		}
+	}, [startingValues]);
+	const getRule = (definition) => resolveFlowVariableRule(definition, overlay);
+	const getOptions = (definition) => {
+		const { allowedValues, editable, excludedValues } = getRule(definition);
+		return getFlowVariableOptions(definition, connections, editable ? {
+			allowedValues,
+			excludedValues
+		} : {});
+	};
+	const errors = {};
+	let isValid = true;
+	variables.forEach((definition) => {
+		if (!getRule(definition).editable) return;
+		const problem = validateFlowVariableValue(definition, values[definition.identifier]);
+		if (problem) {
+			isValid = false;
+			if (submitted || touched[definition.identifier]) errors[definition.identifier] = problem.message ?? t(`admin.flowVariables.errors.${problem.code}`);
+		}
+	});
+	const handleChange = (identifier, value) => {
+		const next = {
+			...values,
+			[identifier]: value
+		};
+		setValues(next);
+		setTouched((previous) => ({
+			...previous,
+			[identifier]: true
+		}));
+		onChange?.(next);
+	};
+	const resetToDefaults = () => {
+		const next = variables.reduce((accumulated, definition) => {
+			const { defaultValue } = getRule(definition);
+			if (defaultValue !== void 0) accumulated[definition.identifier] = defaultValue;
+			return accumulated;
+		}, {});
+		setValues(next);
+		setTouched({});
+		setSubmitted(false);
+		onChange?.(next);
+	};
+	const submit = () => {
+		setSubmitted(true);
+		if (!isValid) return;
+		const overrides = variables.reduce((accumulated, definition) => {
+			const { defaultValue, editable } = getRule(definition);
+			const value = values[definition.identifier];
+			if (editable && value !== void 0 && value !== defaultValue) accumulated[definition.identifier] = value;
+			return accumulated;
+		}, {});
+		onSubmit?.(values, overrides);
+	};
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		submit();
+	};
+	if (children) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: children({
+			error,
+			errors,
+			getOptions,
+			getRule,
+			handleChange,
+			handleSubmit: submit,
+			isSubmitting,
+			isValid,
+			onCancel,
+			resetToDefaults,
+			values,
+			variables
+		})
+	});
+	const ou = ouName ?? t("admin.flowVariables.ou_fallback");
+	return /* @__PURE__ */ jsx(AdminSection_default, {
+		block: "flow-variables",
+		className,
+		title,
+		description,
+		preferences,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: styles["form"],
+			onSubmit: handleSubmit,
+			noValidate: true,
+			children: [
+				showScopeNotice && /* @__PURE__ */ jsxs(Alert_default, {
+					variant: "info",
+					children: [/* @__PURE__ */ jsx(Alert_default.Title, { children: t("admin.flowVariables.notice_title", { ou }) }), /* @__PURE__ */ jsx(Alert_default.Description, { children: t("admin.flowVariables.notice_body", { ou }) })]
+				}),
+				error && /* @__PURE__ */ jsx(Alert_default, {
+					variant: "error",
+					role: "alert",
+					children: error
+				}),
+				variables.length === 0 && /* @__PURE__ */ jsx("p", {
+					className: styles["empty"],
+					children: t("admin.flowVariables.empty")
+				}),
+				variables.map((definition, index) => {
+					const rule = getRule(definition);
+					const key = `${index}-${definition.identifier}`;
+					const field = /* @__PURE__ */ jsx(FlowVariableField_default, {
+						action: renderFieldAction?.(definition, index),
+						definition,
+						defaultValue: rule.defaultValue,
+						disabled: readOnly || isSubmitting,
+						editable: rule.editable,
+						error: errors[definition.identifier],
+						hint: definition.type === "CONNECTION_SELECT" && rule.editable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: t("admin.flowVariables.connections_hint", { ou }) }), onCreateConnection && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: styles["link"],
+							onClick: onCreateConnection,
+							children: t("admin.flowVariables.create_connection")
+						})] }) : void 0,
+						options: getOptions(definition),
+						ownerName,
+						value: values[definition.identifier],
+						onChange: (value) => handleChange(definition.identifier, value)
+					});
+					return /* @__PURE__ */ jsx(Fragment, { children: renderField ? renderField(field, definition, index) : field }, key);
+				}),
+				onSubmit && !readOnly && variables.length > 0 && /* @__PURE__ */ jsxs("div", {
+					className: styles["actions"],
+					children: [
+						/* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							variant: "text",
+							onClick: resetToDefaults,
+							disabled: isSubmitting,
+							children: t("admin.flowVariables.reset_defaults")
+						}),
+						/* @__PURE__ */ jsx("div", { className: styles["actionsSpacer"] }),
+						onCancel && /* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							variant: "text",
+							onClick: onCancel,
+							disabled: isSubmitting,
+							children: t("admin.common.actions.cancel")
+						}),
+						/* @__PURE__ */ jsx(Button_default, {
+							type: "submit",
+							loading: isSubmitting,
+							disabled: isSubmitting,
+							children: t("admin.flowVariables.submit")
+						})
+					]
+				})
+			]
+		})
+	});
+};
+var BaseFlowVariables_default = BaseFlowVariables;
+
+//#endregion
+export { BaseFlowVariables_default as default };
+//# sourceMappingURL=BaseFlowVariables.js.map

package/dist/components/management/FlowVariables/BaseFlowVariables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseFlowVariables.js","names":["chosen: FlowVariableValue | undefined","BaseFlowVariables: FC<BaseFlowVariablesProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","startingValues: FlowVariableValues","appliedValues: {current: FlowVariableValues}","errors: Record<string, string>","problem: FlowVariableValidationError | undefined","next: FlowVariableValues","overrides: FlowVariableValues","value: FlowVariableValue | undefined","ou: string","AdminSection","Alert","rule: ResolvedFlowVariableRule","field: ReactElement","FlowVariableField","Button"],"sources":["../../../../src/components/management/FlowVariables/BaseFlowVariables.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  ConnectionInstance,\n  FlowVariableDefinition,\n  FlowVariableOption,\n  FlowVariableValidationError,\n  FlowVariableValue,\n  FlowVariableValues,\n  Preferences,\n  ResolvedFlowVariableRule,\n  ResolvedOverlay,\n  getFlowVariableOptions,\n  resolveFlowVariableRule,\n  validateFlowVariableValue,\n} from '@thunderid/browser';\nimport {FC, Fragment, FormEvent, ReactElement, ReactNode, useEffect, useMemo, useRef, useState} from 'react';\nimport FlowVariableField from './FlowVariableField';\nimport useStyles from './FlowVariables.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Alert from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport AdminSection from '../shared/AdminSection';\n\n/**\n * What {@link BaseFlowVariables} hands its `children` render function, so the form can be built with any UI.\n */\nexport interface BaseFlowVariablesRenderProps {\n  error: string | null;\n  /**\n   * The message to show under each variable that is not valid, keyed by identifier.\n   */\n  errors: Record<string, string>;\n  /**\n   * The choices of a select variable, narrowed to what the unit may pick.\n   */\n  getOptions: (definition: FlowVariableDefinition) => FlowVariableOption[];\n  /**\n   * What the unit may do with a variable: whether it can set its own value, and the default it starts from.\n   */\n  getRule: (definition: FlowVariableDefinition) => ResolvedFlowVariableRule;\n  /**\n   * Sets the value of one variable.\n   */\n  handleChange: (identifier: string, value: FlowVariableValue) => void;\n  /**\n   * Submits the current values. Does nothing while they are not valid.\n   */\n  handleSubmit: () => void;\n  isSubmitting: boolean;\n  /**\n   * Whether the values can be submitted.\n   */\n  isValid: boolean;\n  onCancel?: () => void;\n  /**\n   * Returns every variable the unit may set to its default.\n   */\n  resetToDefaults: () => void;\n  values: FlowVariableValues;\n  variables: FlowVariableDefinition[];\n}\n\nexport interface BaseFlowVariablesProps {\n  /**\n   * Renders custom UI in place of the default form. Receives the variables, their values and setters, and the\n   * submit handler.\n   */\n  children?: (props: BaseFlowVariablesRenderProps) => ReactNode;\n  className?: string;\n  /**\n   * The connections a `CONNECTION_SELECT` variable can take.\n   */\n  connections?: Pick<ConnectionInstance, 'categories' | 'id' | 'name' | 'type'>[];\n  description?: string;\n  error?: string | null;\n  /**\n   * The values the form starts with, over each variable's default. A variable left out starts at its default.\n   */\n  initialValues?: FlowVariableValues;\n  isSubmitting?: boolean;\n  onCancel?: () => void;\n  /**\n   * Called when the user asks to create a connection, from the hint under a connection variable. Without it, the\n   * hint does not offer one.\n   */\n  onCreateConnection?: () => void;\n  /**\n   * Called with every value after one changes.\n   */\n  onChange?: (values: FlowVariableValues) => void;\n  /**\n   * Called when the form is submitted and valid, with every value and the overrides: the values of the variables\n   * the unit may set that differ from their default. Without it the form has no save button, which suits a preview.\n   */\n  onSubmit?: (values: FlowVariableValues, overrides: FlowVariableValues) => void;\n  /**\n   * What the unit may do with each variable, as `getFlowOverlayRules` returns it. Without it every variable is\n   * editable, which suits a preview.\n   */\n  overlay?: ResolvedOverlay;\n  /**\n   * The name of the organization unit the variables are set for, used in the notice and the connection hint.\n   */\n  ouName?: string;\n  /**\n   * The name of whoever owns the flow, shown on a variable the unit may not set.\n   */\n  ownerName?: string;\n  preferences?: Preferences;\n  /**\n   * Shows the variables without letting them be changed.\n   */\n  readOnly?: boolean;\n  /**\n   * Wraps the card of each variable, so a host can add its own controls around it, such as selecting or removing the\n   * variable while it is being designed. Receives the card, the variable and its position.\n   */\n  renderField?: (field: ReactElement, definition: FlowVariableDefinition, index: number) => ReactNode;\n  /**\n   * Content at the end of the label row of each variable, for a control a host adds while designing the variables.\n   */\n  renderFieldAction?: (definition: FlowVariableDefinition, index: number) => ReactNode;\n  /**\n   * Shows a notice that the settings apply to the organization unit only. Needs `ouName` to be useful.\n   */\n  showScopeNotice?: boolean;\n  title?: string;\n  /**\n   * The variables to render, as the flow declares them.\n   */\n  variables: FlowVariableDefinition[];\n}\n\nconst startingValuesOf = (\n  variables: FlowVariableDefinition[],\n  overlay: ResolvedOverlay | undefined,\n  initialValues: FlowVariableValues | undefined,\n): FlowVariableValues =>\n  variables.reduce((values: FlowVariableValues, definition: FlowVariableDefinition) => {\n    const {defaultValue, editable}: ResolvedFlowVariableRule = resolveFlowVariableRule(definition, overlay);\n    const chosen: FlowVariableValue | undefined = editable\n      ? (initialValues?.[definition.identifier] ?? defaultValue)\n      : defaultValue;\n\n    if (chosen !== undefined && chosen !== null) {\n      values[definition.identifier] = chosen;\n    }\n\n    return values;\n  }, {});\n\n/**\n * A form for the variables a flow declares, each in a card with its label, its description, whether it is\n * customized or follows the default, and the input its type calls for. It is what a delegated admin sees when\n * overriding a flow, and what the flow editor previews. Holds no data of its own: pass the variables and handle\n * the submission.\n *\n * @example\n * ```tsx\n * <BaseFlowVariables variables={variables} connections={connections} overlay={overlay} onSubmit={save} />\n * ```\n */\nconst BaseFlowVariables: FC<BaseFlowVariablesProps> = ({\n  children,\n  className,\n  connections = [],\n  description,\n  error = null,\n  initialValues,\n  isSubmitting = false,\n  onCancel,\n  onChange,\n  onCreateConnection,\n  onSubmit,\n  ouName,\n  overlay,\n  ownerName,\n  preferences,\n  readOnly = false,\n  renderField,\n  renderFieldAction,\n  showScopeNotice = false,\n  title,\n  variables,\n}: BaseFlowVariablesProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n\n  const startingValues: FlowVariableValues = useMemo(\n    () => startingValuesOf(variables, overlay, initialValues),\n    // The identity of the inputs can change on every render while their content does not.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [JSON.stringify(variables), JSON.stringify(overlay), JSON.stringify(initialValues)],\n  );\n  const [values, setValues] = useState<FlowVariableValues>(startingValues);\n  const [touched, setTouched] = useState<Record<string, boolean>>({});\n  const [submitted, setSubmitted] = useState<boolean>(false);\n  const appliedValues: {current: FlowVariableValues} = useRef(startingValues);\n\n  // The form already holds the starting values on mount; only a change to them replaces what was typed.\n  useEffect(() => {\n    if (appliedValues.current !== startingValues) {\n      appliedValues.current = startingValues;\n      setValues(startingValues);\n      setTouched({});\n      setSubmitted(false);\n    }\n  }, [startingValues]);\n\n  const getRule = (definition: FlowVariableDefinition): ResolvedFlowVariableRule =>\n    resolveFlowVariableRule(definition, overlay);\n\n  const getOptions = (definition: FlowVariableDefinition): FlowVariableOption[] => {\n    const {allowedValues, editable, excludedValues}: ResolvedFlowVariableRule = getRule(definition);\n\n    // A variable the unit cannot set shows its pinned value, which a restriction might hide from the choices.\n    return getFlowVariableOptions(definition, connections, editable ? {allowedValues, excludedValues} : {});\n  };\n\n  const errors: Record<string, string> = {};\n  let isValid = true;\n\n  variables.forEach((definition: FlowVariableDefinition) => {\n    if (!getRule(definition).editable) {\n      return;\n    }\n\n    const problem: FlowVariableValidationError | undefined = validateFlowVariableValue(\n      definition,\n      values[definition.identifier],\n    );\n\n    if (problem) {\n      isValid = false;\n\n      if (submitted || touched[definition.identifier]) {\n        errors[definition.identifier] = problem.message ?? t(`admin.flowVariables.errors.${problem.code}`);\n      }\n    }\n  });\n\n  const handleChange = (identifier: string, value: FlowVariableValue): void => {\n    const next: FlowVariableValues = {...values, [identifier]: value};\n\n    setValues(next);\n    setTouched((previous: Record<string, boolean>) => ({...previous, [identifier]: true}));\n    onChange?.(next);\n  };\n\n  const resetToDefaults = (): void => {\n    const next: FlowVariableValues = variables.reduce(\n      (accumulated: FlowVariableValues, definition: FlowVariableDefinition) => {\n        const {defaultValue}: ResolvedFlowVariableRule = getRule(definition);\n\n        if (defaultValue !== undefined) {\n          accumulated[definition.identifier] = defaultValue;\n        }\n\n        return accumulated;\n      },\n      {},\n    );\n\n    setValues(next);\n    setTouched({});\n    setSubmitted(false);\n    onChange?.(next);\n  };\n\n  const submit = (): void => {\n    setSubmitted(true);\n\n    if (!isValid) {\n      return;\n    }\n\n    const overrides: FlowVariableValues = variables.reduce(\n      (accumulated: FlowVariableValues, definition: FlowVariableDefinition) => {\n        const {defaultValue, editable}: ResolvedFlowVariableRule = getRule(definition);\n        const value: FlowVariableValue | undefined = values[definition.identifier];\n\n        if (editable && value !== undefined && value !== defaultValue) {\n          accumulated[definition.identifier] = value;\n        }\n\n        return accumulated;\n      },\n      {},\n    );\n\n    onSubmit?.(values, overrides);\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {\n    event.preventDefault();\n    submit();\n  };\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({\n          error,\n          errors,\n          getOptions,\n          getRule,\n          handleChange,\n          handleSubmit: submit,\n          isSubmitting,\n          isValid,\n          onCancel,\n          resetToDefaults,\n          values,\n          variables,\n        })}\n      </div>\n    );\n  }\n\n  const ou: string = ouName ?? t('admin.flowVariables.ou_fallback');\n\n  return (\n    <AdminSection\n      block=\"flow-variables\"\n      className={className}\n      title={title}\n      description={description}\n      preferences={preferences}\n    >\n      <form className={styles['form']} onSubmit={handleSubmit} noValidate>\n        {showScopeNotice && (\n          <Alert variant=\"info\">\n            <Alert.Title>{t('admin.flowVariables.notice_title', {ou})}</Alert.Title>\n            <Alert.Description>{t('admin.flowVariables.notice_body', {ou})}</Alert.Description>\n          </Alert>\n        )}\n        {error && (\n          <Alert variant=\"error\" role=\"alert\">\n            {error}\n          </Alert>\n        )}\n        {variables.length === 0 && <p className={styles['empty']}>{t('admin.flowVariables.empty')}</p>}\n        {variables.map((definition: FlowVariableDefinition, index: number) => {\n          const rule: ResolvedFlowVariableRule = getRule(definition);\n          // An identifier can be repeated while a flow's variables are being edited, so it cannot be the key alone.\n          const key = `${index}-${definition.identifier}`;\n\n          const field: ReactElement = (\n            <FlowVariableField\n              action={renderFieldAction?.(definition, index)}\n              definition={definition}\n              defaultValue={rule.defaultValue}\n              disabled={readOnly || isSubmitting}\n              editable={rule.editable}\n              error={errors[definition.identifier]}\n              hint={\n                definition.type === 'CONNECTION_SELECT' && rule.editable ? (\n                  <>\n                    <span>{t('admin.flowVariables.connections_hint', {ou})}</span>\n                    {onCreateConnection && (\n                      <button type=\"button\" className={styles['link']} onClick={onCreateConnection}>\n                        {t('admin.flowVariables.create_connection')}\n                      </button>\n                    )}\n                  </>\n                ) : undefined\n              }\n              options={getOptions(definition)}\n              ownerName={ownerName}\n              value={values[definition.identifier]}\n              onChange={(value: FlowVariableValue): void => handleChange(definition.identifier, value)}\n            />\n          );\n\n          return <Fragment key={key}>{renderField ? renderField(field, definition, index) : field}</Fragment>;\n        })}\n        {onSubmit && !readOnly && variables.length > 0 && (\n          <div className={styles['actions']}>\n            <Button type=\"button\" variant=\"text\" onClick={resetToDefaults} disabled={isSubmitting}>\n              {t('admin.flowVariables.reset_defaults')}\n            </Button>\n            <div className={styles['actionsSpacer']} />\n            {onCancel && (\n              <Button type=\"button\" variant=\"text\" onClick={onCancel} disabled={isSubmitting}>\n                {t('admin.common.actions.cancel')}\n              </Button>\n            )}\n            <Button type=\"submit\" loading={isSubmitting} disabled={isSubmitting}>\n              {t('admin.flowVariables.submit')}\n            </Button>\n          </div>\n        )}\n      </form>\n    </AdminSection>\n  );\n};\n\nexport default BaseFlowVariables;\n"],"mappings":"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"}

package/dist/components/management/FlowVariables/FlowVariableField.d.ts

@@ -0,0 +1,46 @@
+import { FlowVariableDefinition, FlowVariableValue, SelectOption } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+export interface FlowVariableFieldProps {
+    /**
+     * Extra content at the end of the label row, such as a control a host adds while the variable is being designed.
+     */
+    action?: ReactNode;
+    className?: string;
+    /**
+     * The value the variable has until the unit sets its own, which a sharing policy may have set.
+     */
+    defaultValue?: FlowVariableValue;
+    definition: FlowVariableDefinition;
+    disabled?: boolean;
+    /**
+     * Whether the unit may set its own value. A variable it may not set is shown as set by its owner.
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * The error to show under the field.
+     */
+    error?: string;
+    /**
+     * Extra text under the input, such as where the choices come from.
+     */
+    hint?: ReactNode;
+    onChange: (value: FlowVariableValue) => void;
+    /**
+     * The choices of a `SELECT` or `CONNECTION_SELECT`, as {@link getFlowVariableOptions} returns them.
+     */
+    options?: SelectOption[];
+    /**
+     * Who set the variable, shown while it is not editable.
+     */
+    ownerName?: string;
+    value: FlowVariableValue | undefined;
+}
+/**
+ * One variable as the delegated admin sees it, in a card: its label and description, whether it is customized
+ * or follows the default, the input its type calls for, and what the default is. A variable the unit may not set
+ * is shown as set by its owner.
+ */
+declare const FlowVariableField: FC<FlowVariableFieldProps>;
+export default FlowVariableField;
+//# sourceMappingURL=FlowVariableField.d.ts.map

package/dist/components/management/FlowVariables/FlowVariableField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowVariableField.d.ts","sourceRoot":"","sources":["../../../../src/components/management/FlowVariables/FlowVariableField.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EAGb,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAc,EAAE,EAAgB,SAAS,EAAQ,MAAM,OAAO,CAAC;AAStE,MAAM,WAAW,sBAAsB;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,YAAY,CAAC,EAAE,iBAAiB,CAAC;IACjC,UAAU,EAAE,sBAAsB,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAAC;CACtC;AAUD;;;;GAIG;AACH,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CA+KjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/management/FlowVariables/FlowVariableField.js

@@ -0,0 +1,158 @@
+import { cx } from "../../../styles/emotion.js";
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Toggle_default from "../../primitives/Toggle/Toggle.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import Select_default from "../../primitives/Select/Select.js";
+import FlowVariables_styles_default from "./FlowVariables.styles.js";
+import { bem, withVendorCSSClassPrefix } from "@thunderid/browser";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/management/FlowVariables/FlowVariableField.tsx
+const INPUT_TYPES = {
+	DATE_INPUT: "date",
+	EMAIL_INPUT: "email",
+	NUMBER_INPUT: "number",
+	PHONE_INPUT: "tel",
+	TEXT_INPUT: "text"
+};
+/**
+* One variable as the delegated admin sees it, in a card: its label and description, whether it is customized
+* or follows the default, the input its type calls for, and what the default is. A variable the unit may not set
+* is shown as set by its owner.
+*/
+const FlowVariableField = ({ action, className, defaultValue, definition, disabled, editable = true, error, hint, onChange, options = [], ownerName, value }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = FlowVariables_styles_default(theme, colorScheme);
+	const { t } = useTranslation_default();
+	const id = useId();
+	const descriptionId = definition.description ? `${id}-description` : void 0;
+	const label = definition.label ?? definition.identifier;
+	const isSelect = definition.type === "SELECT" || definition.type === "CONNECTION_SELECT";
+	const isDefault = value === defaultValue;
+	const display = (shown) => {
+		if (shown === void 0) return "";
+		if (typeof shown === "boolean") return t(shown ? "admin.flowVariables.on" : "admin.flowVariables.off");
+		return isSelect ? options.find((option) => String(option.value) === String(shown))?.label ?? String(shown) : String(shown);
+	};
+	const renderControl = () => {
+		switch (definition.type) {
+			case "BOOLEAN_INPUT": return /* @__PURE__ */ jsx(Toggle_default, {
+				id,
+				"aria-label": label,
+				"aria-describedby": descriptionId,
+				checked: value === true,
+				disabled: disabled === true || !editable,
+				error,
+				onChange: (event) => onChange(event.target.checked)
+			});
+			case "SELECT":
+			case "CONNECTION_SELECT": {
+				const handleSelect = (event) => {
+					const chosen = (definition.options ?? []).find((option) => String(option) === event.target.value);
+					onChange(event.target.value === "" && defaultValue !== void 0 ? defaultValue : chosen ?? event.target.value);
+				};
+				return /* @__PURE__ */ jsx(Select_default, {
+					id,
+					"aria-label": label,
+					"aria-describedby": descriptionId,
+					disabled,
+					emptyText: t("admin.flowVariables.no_options"),
+					error,
+					options,
+					placeholder: defaultValue === void 0 || defaultValue === "" ? t("admin.flowVariables.select_placeholder") : t("admin.flowVariables.use_default", { default: display(defaultValue) }),
+					value: isDefault || value === void 0 ? "" : String(value),
+					onChange: handleSelect
+				});
+			}
+			default: return /* @__PURE__ */ jsx(TextField_default, {
+				id,
+				"aria-label": label,
+				"aria-describedby": descriptionId,
+				disabled,
+				error,
+				max: definition.max,
+				min: definition.min,
+				placeholder: defaultValue === void 0 || defaultValue === "" ? t("admin.flowVariables.enter_value") : display(defaultValue),
+				type: INPUT_TYPES[definition.type] ?? "text",
+				value: value === void 0 ? "" : String(value),
+				onChange: (event) => {
+					const raw = event.target.value;
+					onChange(definition.type === "NUMBER_INPUT" && raw !== "" && !Number.isNaN(Number(raw)) ? Number(raw) : raw);
+				}
+			});
+		}
+	};
+	return /* @__PURE__ */ jsxs("section", {
+		className: cx(withVendorCSSClassPrefix(bem("flow-variables", "field")), withVendorCSSClassPrefix(bem("flow-variables", "field", definition.type.toLowerCase())), styles["card"], !editable && styles["cardLocked"], className),
+		"data-variable": definition.identifier,
+		"data-editable": editable,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: styles["header"],
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: styles["headerText"],
+					children: [/* @__PURE__ */ jsx("label", {
+						htmlFor: id,
+						className: styles["label"],
+						children: label
+					}), definition.description && /* @__PURE__ */ jsx("p", {
+						id: descriptionId,
+						className: styles["description"],
+						children: definition.description
+					})]
+				}),
+				editable && !isDefault && /* @__PURE__ */ jsx("span", {
+					className: styles["chipCustomized"],
+					"data-testid": "flow-variable-status",
+					children: t("admin.flowVariables.status.customized")
+				}),
+				action
+			]
+		}), editable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			renderControl(),
+			hint && /* @__PURE__ */ jsx("p", {
+				className: styles["hint"],
+				children: hint
+			}),
+			!isDefault && defaultValue !== void 0 && /* @__PURE__ */ jsx("p", {
+				className: styles["hint"],
+				children: t("admin.flowVariables.default_hint", { default: display(defaultValue) })
+			})
+		] }) : /* @__PURE__ */ jsxs("div", {
+			className: styles["lockedLine"],
+			children: [
+				/* @__PURE__ */ jsxs("svg", {
+					width: "16",
+					height: "16",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "1.7",
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ jsx("rect", {
+						x: "5",
+						y: "11",
+						width: "14",
+						height: "9",
+						rx: "2"
+					}), /* @__PURE__ */ jsx("path", { d: "M8 11V8a4 4 0 018 0v3" })]
+				}),
+				/* @__PURE__ */ jsxs("span", { children: [
+					t("admin.flowVariables.locked", { owner: ownerName ?? t("admin.flowVariables.owner_fallback") }),
+					" · ",
+					display(value)
+				] }),
+				definition.type === "BOOLEAN_INPUT" && renderControl()
+			]
+		})]
+	});
+};
+var FlowVariableField_default = FlowVariableField;
+
+//#endregion
+export { FlowVariableField_default as default };
+//# sourceMappingURL=FlowVariableField.js.map

package/dist/components/management/FlowVariables/FlowVariableField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowVariableField.js","names":["INPUT_TYPES: Partial<Record<FlowVariableDefinition['type'], string>>","FlowVariableField: FC<FlowVariableFieldProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","id: string","descriptionId: string | undefined","label: string","isSelect: boolean","isDefault: boolean","Toggle","chosen: FlowVariableValue | undefined","Select","TextField","raw: string"],"sources":["../../../../src/components/management/FlowVariables/FlowVariableField.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  FlowVariableDefinition,\n  FlowVariableValue,\n  SelectOption,\n  bem,\n  withVendorCSSClassPrefix,\n} from '@thunderid/browser';\nimport {ChangeEvent, FC, ReactElement, ReactNode, useId} from 'react';\nimport useStyles from './FlowVariables.styles';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport {cx} from '../../../styles/emotion';\nimport Select from '../../primitives/Select/Select';\nimport TextField from '../../primitives/TextField/TextField';\nimport Toggle from '../../primitives/Toggle/Toggle';\n\nexport interface FlowVariableFieldProps {\n  /**\n   * Extra content at the end of the label row, such as a control a host adds while the variable is being designed.\n   */\n  action?: ReactNode;\n  className?: string;\n  /**\n   * The value the variable has until the unit sets its own, which a sharing policy may have set.\n   */\n  defaultValue?: FlowVariableValue;\n  definition: FlowVariableDefinition;\n  disabled?: boolean;\n  /**\n   * Whether the unit may set its own value. A variable it may not set is shown as set by its owner.\n   * @default true\n   */\n  editable?: boolean;\n  /**\n   * The error to show under the field.\n   */\n  error?: string;\n  /**\n   * Extra text under the input, such as where the choices come from.\n   */\n  hint?: ReactNode;\n  onChange: (value: FlowVariableValue) => void;\n  /**\n   * The choices of a `SELECT` or `CONNECTION_SELECT`, as {@link getFlowVariableOptions} returns them.\n   */\n  options?: SelectOption[];\n  /**\n   * Who set the variable, shown while it is not editable.\n   */\n  ownerName?: string;\n  value: FlowVariableValue | undefined;\n}\n\nconst INPUT_TYPES: Partial<Record<FlowVariableDefinition['type'], string>> = {\n  DATE_INPUT: 'date',\n  EMAIL_INPUT: 'email',\n  NUMBER_INPUT: 'number',\n  PHONE_INPUT: 'tel',\n  TEXT_INPUT: 'text',\n};\n\n/**\n * One variable as the delegated admin sees it, in a card: its label and description, whether it is customized\n * or follows the default, the input its type calls for, and what the default is. A variable the unit may not set\n * is shown as set by its owner.\n */\nconst FlowVariableField: FC<FlowVariableFieldProps> = ({\n  action,\n  className,\n  defaultValue,\n  definition,\n  disabled,\n  editable = true,\n  error,\n  hint,\n  onChange,\n  options = [],\n  ownerName,\n  value,\n}: FlowVariableFieldProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const {t} = useTranslation();\n  const id: string = useId();\n  const descriptionId: string | undefined = definition.description ? `${id}-description` : undefined;\n  const label: string = definition.label ?? definition.identifier;\n  const isSelect: boolean = definition.type === 'SELECT' || definition.type === 'CONNECTION_SELECT';\n  const isDefault: boolean = value === defaultValue;\n\n  const display = (shown: FlowVariableValue | undefined): string => {\n    if (shown === undefined) {\n      return '';\n    }\n    if (typeof shown === 'boolean') {\n      return t(shown ? 'admin.flowVariables.on' : 'admin.flowVariables.off');\n    }\n\n    return isSelect\n      ? (options.find((option: SelectOption) => String(option.value) === String(shown))?.label ?? String(shown))\n      : String(shown);\n  };\n\n  const renderControl = (): ReactElement => {\n    switch (definition.type) {\n      case 'BOOLEAN_INPUT':\n        return (\n          <Toggle\n            id={id}\n            aria-label={label}\n            aria-describedby={descriptionId}\n            checked={value === true}\n            disabled={disabled === true || !editable}\n            error={error}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => onChange(event.target.checked)}\n          />\n        );\n      case 'SELECT':\n      case 'CONNECTION_SELECT': {\n        const handleSelect = (event: ChangeEvent<HTMLSelectElement>): void => {\n          const chosen: FlowVariableValue | undefined = (definition.options ?? []).find(\n            (option: FlowVariableValue) => String(option) === event.target.value,\n          );\n\n          // The first entry, the default, clears the choice.\n          onChange(\n            event.target.value === '' && defaultValue !== undefined ? defaultValue : (chosen ?? event.target.value),\n          );\n        };\n\n        return (\n          <Select\n            id={id}\n            aria-label={label}\n            aria-describedby={descriptionId}\n            disabled={disabled}\n            emptyText={t('admin.flowVariables.no_options')}\n            error={error}\n            options={options}\n            placeholder={\n              defaultValue === undefined || defaultValue === ''\n                ? t('admin.flowVariables.select_placeholder')\n                : t('admin.flowVariables.use_default', {default: display(defaultValue)})\n            }\n            value={isDefault || value === undefined ? '' : String(value)}\n            onChange={handleSelect}\n          />\n        );\n      }\n      default:\n        return (\n          <TextField\n            id={id}\n            aria-label={label}\n            aria-describedby={descriptionId}\n            disabled={disabled}\n            error={error}\n            max={definition.max}\n            min={definition.min}\n            placeholder={\n              defaultValue === undefined || defaultValue === ''\n                ? t('admin.flowVariables.enter_value')\n                : display(defaultValue)\n            }\n            type={INPUT_TYPES[definition.type] ?? 'text'}\n            value={value === undefined ? '' : String(value)}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => {\n              const raw: string = event.target.value;\n\n              onChange(\n                definition.type === 'NUMBER_INPUT' && raw !== '' && !Number.isNaN(Number(raw)) ? Number(raw) : raw,\n              );\n            }}\n          />\n        );\n    }\n  };\n\n  return (\n    <section\n      className={cx(\n        withVendorCSSClassPrefix(bem('flow-variables', 'field')),\n        withVendorCSSClassPrefix(bem('flow-variables', 'field', definition.type.toLowerCase())),\n        styles['card'],\n        !editable && styles['cardLocked'],\n        className,\n      )}\n      data-variable={definition.identifier}\n      data-editable={editable}\n    >\n      <div className={styles['header']}>\n        <div className={styles['headerText']}>\n          <label htmlFor={id} className={styles['label']}>\n            {label}\n          </label>\n          {definition.description && (\n            <p id={descriptionId} className={styles['description']}>\n              {definition.description}\n            </p>\n          )}\n        </div>\n        {editable && !isDefault && (\n          <span className={styles['chipCustomized']} data-testid=\"flow-variable-status\">\n            {t('admin.flowVariables.status.customized')}\n          </span>\n        )}\n        {action}\n      </div>\n      {editable ? (\n        <>\n          {renderControl()}\n          {hint && <p className={styles['hint']}>{hint}</p>}\n          {!isDefault && defaultValue !== undefined && (\n            <p className={styles['hint']}>{t('admin.flowVariables.default_hint', {default: display(defaultValue)})}</p>\n          )}\n        </>\n      ) : (\n        <div className={styles['lockedLine']}>\n          <svg\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"1.7\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n            aria-hidden=\"true\"\n          >\n            <rect x=\"5\" y=\"11\" width=\"14\" height=\"9\" rx=\"2\" />\n            <path d=\"M8 11V8a4 4 0 018 0v3\" />\n          </svg>\n          <span>\n            {t('admin.flowVariables.locked', {owner: ownerName ?? t('admin.flowVariables.owner_fallback')})}\n            {' · '}\n            {display(value)}\n          </span>\n          {definition.type === 'BOOLEAN_INPUT' && renderControl()}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default FlowVariableField;\n"],"mappings":"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"}

package/dist/components/management/FlowVariables/FlowVariables.styles.d.ts

@@ -0,0 +1,11 @@
+import { Theme } from '@thunderid/browser';
+/**
+ * Creates the styles of the flow variables form.
+ *
+ * @param theme - The theme object containing design tokens.
+ * @param colorScheme - The current color scheme, used for memoization.
+ * @returns The CSS class names for each part.
+ */
+declare const useStyles: (theme: Theme, colorScheme: string) => Record<string, string>;
+export default useStyles;
+//# sourceMappingURL=FlowVariables.styles.d.ts.map

package/dist/components/management/FlowVariables/FlowVariables.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowVariables.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/management/FlowVariables/FlowVariables.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAC,KAAK,EAAC,MAAM,oBAAoB,CAAC;AAIzC;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,GAAI,OAAO,KAAK,EAAE,aAAa,MAAM,KAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CA0GlD,CAAC;AAE3B,eAAe,SAAS,CAAC"}

package/dist/components/management/FlowVariables/FlowVariables.styles.js

@@ -0,0 +1,121 @@
+import { css } from "../../../styles/emotion.js";
+import { useMemo } from "react";
+
+//#region src/components/management/FlowVariables/FlowVariables.styles.ts
+/**
+* Creates the styles of the flow variables form.
+*
+* @param theme - The theme object containing design tokens.
+* @param colorScheme - The current color scheme, used for memoization.
+* @returns The CSS class names for each part.
+*/
+const useStyles = (theme, colorScheme) => useMemo(() => {
+	const unit = theme.vars.spacing.unit;
+	const chip = css`
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      padding: 2px calc(${unit} * 1.25);
+      border-radius: 999px;
+      border: 1px solid ${theme.vars.colors.border};
+      font-size: ${theme.vars.typography.fontSizes.xs};
+      font-weight: ${theme.vars.typography.fontWeights.medium};
+      color: ${theme.vars.colors.text.secondary};
+      white-space: nowrap;
+    `;
+	return {
+		actions: css`
+        display: flex;
+        align-items: center;
+        gap: ${unit};
+      `,
+		actionsSpacer: css`
+        flex-grow: 1;
+      `,
+		card: css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${unit} * 2);
+        padding: calc(${unit} * 2.5) calc(${unit} * 3);
+        background: ${theme.vars.colors.background.surface};
+        border: 1px solid ${theme.vars.colors.border};
+        border-radius: ${theme.vars.borderRadius.large};
+      `,
+		cardLocked: css`
+        background: ${theme.vars.colors.background.disabled};
+      `,
+		chip,
+		chipCustomized: css`
+        ${chip}
+        border-color: ${theme.vars.colors.success.main};
+        color: ${theme.vars.colors.success.main};
+      `,
+		description: css`
+        margin: calc(${unit} / 4) 0 0;
+        color: ${theme.vars.colors.text.secondary};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		empty: css`
+        margin: 0;
+        color: ${theme.vars.colors.text.secondary};
+      `,
+		form: css`
+        display: flex;
+        flex-direction: column;
+        gap: calc(${unit} * 2.5);
+        max-width: 880px;
+      `,
+		header: css`
+        display: flex;
+        align-items: flex-start;
+        gap: calc(${unit} * 1.5);
+      `,
+		headerText: css`
+        flex-grow: 1;
+        min-width: 0;
+      `,
+		hint: css`
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: calc(${unit} * 1.25);
+        margin: 0;
+        color: ${theme.vars.colors.text.secondary};
+        font-size: ${theme.vars.typography.fontSizes.xs};
+      `,
+		label: css`
+        font-size: ${theme.vars.typography.fontSizes.md};
+        font-weight: ${theme.vars.typography.fontWeights.medium};
+        color: ${theme.vars.colors.text.primary};
+      `,
+		link: css`
+        padding: 0;
+        border: 0;
+        background: none;
+        font: inherit;
+        font-weight: ${theme.vars.typography.fontWeights.medium};
+        color: ${theme.vars.colors.primary.main};
+        cursor: pointer;
+        &:hover {
+          text-decoration: underline;
+        }
+      `,
+		lockedLine: css`
+        display: flex;
+        align-items: center;
+        gap: calc(${unit} * 1.25);
+        color: ${theme.vars.colors.text.secondary};
+        font-size: ${theme.vars.typography.fontSizes.sm};
+      `,
+		scope: css`
+        display: flex;
+        align-items: center;
+        gap: calc(${unit} * 1.5);
+      `
+	};
+}, [theme, colorScheme]);
+var FlowVariables_styles_default = useStyles;
+
+//#endregion
+export { FlowVariables_styles_default as default };
+//# sourceMappingURL=FlowVariables.styles.js.map

package/dist/components/management/FlowVariables/FlowVariables.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FlowVariables.styles.js","names":["unit: string","chip: string"],"sources":["../../../../src/components/management/FlowVariables/FlowVariables.styles.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\nimport {css} from '../../../styles/emotion';\n\n/**\n * Creates the styles of the flow variables form.\n *\n * @param theme - The theme object containing design tokens.\n * @param colorScheme - The current color scheme, used for memoization.\n * @returns The CSS class names for each part.\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const unit: string = theme.vars.spacing.unit;\n    const chip: string = css`\n      display: inline-flex;\n      align-items: center;\n      flex-shrink: 0;\n      padding: 2px calc(${unit} * 1.25);\n      border-radius: 999px;\n      border: 1px solid ${theme.vars.colors.border};\n      font-size: ${theme.vars.typography.fontSizes.xs};\n      font-weight: ${theme.vars.typography.fontWeights.medium};\n      color: ${theme.vars.colors.text.secondary};\n      white-space: nowrap;\n    `;\n\n    return {\n      actions: css`\n        display: flex;\n        align-items: center;\n        gap: ${unit};\n      `,\n      actionsSpacer: css`\n        flex-grow: 1;\n      `,\n      card: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${unit} * 2);\n        padding: calc(${unit} * 2.5) calc(${unit} * 3);\n        background: ${theme.vars.colors.background.surface};\n        border: 1px solid ${theme.vars.colors.border};\n        border-radius: ${theme.vars.borderRadius.large};\n      `,\n      cardLocked: css`\n        background: ${theme.vars.colors.background.disabled};\n      `,\n      chip,\n      chipCustomized: css`\n        ${chip}\n        border-color: ${theme.vars.colors.success.main};\n        color: ${theme.vars.colors.success.main};\n      `,\n      description: css`\n        margin: calc(${unit} / 4) 0 0;\n        color: ${theme.vars.colors.text.secondary};\n        font-size: ${theme.vars.typography.fontSizes.sm};\n      `,\n      empty: css`\n        margin: 0;\n        color: ${theme.vars.colors.text.secondary};\n      `,\n      form: css`\n        display: flex;\n        flex-direction: column;\n        gap: calc(${unit} * 2.5);\n        max-width: 880px;\n      `,\n      header: css`\n        display: flex;\n        align-items: flex-start;\n        gap: calc(${unit} * 1.5);\n      `,\n      headerText: css`\n        flex-grow: 1;\n        min-width: 0;\n      `,\n      hint: css`\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: calc(${unit} * 1.25);\n        margin: 0;\n        color: ${theme.vars.colors.text.secondary};\n        font-size: ${theme.vars.typography.fontSizes.xs};\n      `,\n      label: css`\n        font-size: ${theme.vars.typography.fontSizes.md};\n        font-weight: ${theme.vars.typography.fontWeights.medium};\n        color: ${theme.vars.colors.text.primary};\n      `,\n      link: css`\n        padding: 0;\n        border: 0;\n        background: none;\n        font: inherit;\n        font-weight: ${theme.vars.typography.fontWeights.medium};\n        color: ${theme.vars.colors.primary.main};\n        cursor: pointer;\n        &:hover {\n          text-decoration: underline;\n        }\n      `,\n      lockedLine: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${unit} * 1.25);\n        color: ${theme.vars.colors.text.secondary};\n        font-size: ${theme.vars.typography.fontSizes.sm};\n      `,\n      scope: css`\n        display: flex;\n        align-items: center;\n        gap: calc(${unit} * 1.5);\n      `,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;AAcA,MAAM,aAAa,OAAc,gBAC/B,cAAc;CACZ,MAAMA,OAAe,MAAM,KAAK,QAAQ;CACxC,MAAMC,OAAe,GAAG;;;;0BAIF,KAAK;;0BAEL,MAAM,KAAK,OAAO,OAAO;mBAChC,MAAM,KAAK,WAAW,UAAU,GAAG;qBACjC,MAAM,KAAK,WAAW,YAAY,OAAO;eAC/C,MAAM,KAAK,OAAO,KAAK,UAAU;;;AAI5C,QAAO;EACL,SAAS,GAAG;;;eAGH,KAAK;;EAEd,eAAe,GAAG;;;EAGlB,MAAM,GAAG;;;oBAGK,KAAK;wBACD,KAAK,eAAe,KAAK;sBAC3B,MAAM,KAAK,OAAO,WAAW,QAAQ;4BAC/B,MAAM,KAAK,OAAO,OAAO;yBAC5B,MAAM,KAAK,aAAa,MAAM;;EAEjD,YAAY,GAAG;sBACC,MAAM,KAAK,OAAO,WAAW,SAAS;;EAEtD;EACA,gBAAgB,GAAG;UACf,KAAK;wBACS,MAAM,KAAK,OAAO,QAAQ,KAAK;iBACtC,MAAM,KAAK,OAAO,QAAQ,KAAK;;EAE1C,aAAa,GAAG;uBACC,KAAK;iBACX,MAAM,KAAK,OAAO,KAAK,UAAU;qBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,OAAO,GAAG;;iBAEC,MAAM,KAAK,OAAO,KAAK,UAAU;;EAE5C,MAAM,GAAG;;;oBAGK,KAAK;;;EAGnB,QAAQ,GAAG;;;oBAGG,KAAK;;EAEnB,YAAY,GAAG;;;;EAIf,MAAM,GAAG;;;;oBAIK,KAAK;;iBAER,MAAM,KAAK,OAAO,KAAK,UAAU;qBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,OAAO,GAAG;qBACK,MAAM,KAAK,WAAW,UAAU,GAAG;uBACjC,MAAM,KAAK,WAAW,YAAY,OAAO;iBAC/C,MAAM,KAAK,OAAO,KAAK,QAAQ;;EAE1C,MAAM,GAAG;;;;;uBAKQ,MAAM,KAAK,WAAW,YAAY,OAAO;iBAC/C,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;;;EAM1C,YAAY,GAAG;;;oBAGD,KAAK;iBACR,MAAM,KAAK,OAAO,KAAK,UAAU;qBAC7B,MAAM,KAAK,WAAW,UAAU,GAAG;;EAElD,OAAO,GAAG;;;oBAGI,KAAK;;EAEpB;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,mCAAe"}