@thunderid/react 1.15.1 → 1.17.0

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"}

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

@@ -0,0 +1,30 @@
+import { FlowVariableValues } from '@thunderid/browser';
+import { FC } from 'react';
+import { BaseFlowVariablesProps } from './BaseFlowVariables';
+export type FlowVariablesFormProps = Omit<BaseFlowVariablesProps, 'connections' | 'error' | 'initialValues' | 'isSubmitting' | 'onSubmit' | 'overlay' | 'variables'> & {
+    /**
+     * Identifier of the flow whose variables are configured.
+     */
+    flowId: string;
+    /**
+     * Called with the saved overrides.
+     */
+    onSaved?: (values: FlowVariableValues) => void;
+    /**
+     * The organization unit the overrides belong to.
+     */
+    ouId: string;
+};
+/**
+ * Lets a delegated admin override the variables a flow declares for their organization unit. It loads the
+ * variables the flow shares with the unit and the values the unit has set, shows them as a form, and saves
+ * the values that differ from their defaults.
+ *
+ * @example
+ * ```tsx
+ * <FlowVariablesForm flowId={flowId} ouId={ouId} onSaved={() => toast('Saved')} />
+ * ```
+ */
+declare const FlowVariablesForm: FC<FlowVariablesFormProps>;
+export default FlowVariablesForm;
+//# sourceMappingURL=FlowVariablesForm.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowVariablesForm.d.ts","sourceRoot":"","sources":["../../../../src/components/management/FlowVariables/FlowVariablesForm.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,kBAAkB,EAA2B,MAAM,oBAAoB,CAAC;AAChF,OAAO,EAAC,EAAE,EAAe,MAAM,OAAO,CAAC;AACvC,OAA0B,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAK9E,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,sBAAsB,EACtB,aAAa,GAAG,OAAO,GAAG,eAAe,GAAG,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,WAAW,CAClG,GAAG;IACF;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC/C;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAgDjD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

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

@@ -0,0 +1,47 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Spinner_default from "../../primitives/Spinner/Spinner.js";
+import BaseFlowVariables_default from "./BaseFlowVariables.js";
+import useFlowVariables_default from "../../../hooks/management/useFlowVariables.js";
+import { toManagementErrorMessage } from "@thunderid/browser";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/management/FlowVariables/FlowVariablesForm.tsx
+/**
+* Lets a delegated admin override the variables a flow declares for their organization unit. It loads the
+* variables the flow shares with the unit and the values the unit has set, shows them as a form, and saves
+* the values that differ from their defaults.
+*
+* @example
+* ```tsx
+* <FlowVariablesForm flowId={flowId} ouId={ouId} onSaved={() => toast('Saved')} />
+* ```
+*/
+const FlowVariablesForm = ({ flowId, onSaved, ouId, preferences, title,...rest }) => {
+	const { t } = useTranslation_default(preferences?.i18n);
+	const { connections, definitions, error, isLoaded, isSaving, overlay, overrides, save, saveError } = useFlowVariables_default({
+		flowId,
+		onSaved,
+		ouId
+	});
+	const handleSubmit = (_values, changed) => {
+		save(changed);
+	};
+	if (!isLoaded && !error) return /* @__PURE__ */ jsx(Spinner_default, {});
+	return /* @__PURE__ */ jsx(BaseFlowVariables_default, {
+		title: title ?? t("admin.flowVariables.title"),
+		variables: definitions,
+		connections,
+		initialValues: overrides,
+		overlay,
+		isSubmitting: isSaving,
+		error: error ? toManagementErrorMessage(t, error, "admin.flowVariables.load_error") : toManagementErrorMessage(t, saveError, "admin.flowVariables.error"),
+		onSubmit: handleSubmit,
+		preferences,
+		...rest
+	});
+};
+var FlowVariablesForm_default = FlowVariablesForm;
+
+//#endregion
+export { FlowVariablesForm_default as default };
+//# sourceMappingURL=FlowVariablesForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlowVariablesForm.js","names":["FlowVariablesForm: FC<FlowVariablesFormProps>","useTranslation","useFlowVariables","Spinner","BaseFlowVariables"],"sources":["../../../../src/components/management/FlowVariables/FlowVariablesForm.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {FlowVariableValues, toManagementErrorMessage} from '@thunderid/browser';\nimport {FC, ReactElement} from 'react';\nimport BaseFlowVariables, {BaseFlowVariablesProps} from './BaseFlowVariables';\nimport useFlowVariables, {UseFlowVariablesResult} from '../../../hooks/management/useFlowVariables';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Spinner from '../../primitives/Spinner/Spinner';\n\nexport type FlowVariablesFormProps = Omit<\n  BaseFlowVariablesProps,\n  'connections' | 'error' | 'initialValues' | 'isSubmitting' | 'onSubmit' | 'overlay' | 'variables'\n> & {\n  /**\n   * Identifier of the flow whose variables are configured.\n   */\n  flowId: string;\n  /**\n   * Called with the saved overrides.\n   */\n  onSaved?: (values: FlowVariableValues) => void;\n  /**\n   * The organization unit the overrides belong to.\n   */\n  ouId: string;\n};\n\n/**\n * Lets a delegated admin override the variables a flow declares for their organization unit. It loads the\n * variables the flow shares with the unit and the values the unit has set, shows them as a form, and saves\n * the values that differ from their defaults.\n *\n * @example\n * ```tsx\n * <FlowVariablesForm flowId={flowId} ouId={ouId} onSaved={() => toast('Saved')} />\n * ```\n */\nconst FlowVariablesForm: FC<FlowVariablesFormProps> = ({\n  flowId,\n  onSaved,\n  ouId,\n  preferences,\n  title,\n  ...rest\n}: FlowVariablesFormProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const {\n    connections,\n    definitions,\n    error,\n    isLoaded,\n    isSaving,\n    overlay,\n    overrides,\n    save,\n    saveError,\n  }: UseFlowVariablesResult = useFlowVariables({flowId, onSaved, ouId});\n\n  // Only what differs from the default is an override; the rest keeps following the default.\n  const handleSubmit = (_values: FlowVariableValues, changed: FlowVariableValues): void => {\n    void save(changed);\n  };\n\n  if (!isLoaded && !error) {\n    return <Spinner />;\n  }\n\n  return (\n    <BaseFlowVariables\n      title={title ?? t('admin.flowVariables.title')}\n      variables={definitions}\n      connections={connections}\n      initialValues={overrides}\n      overlay={overlay}\n      isSubmitting={isSaving}\n      error={\n        error\n          ? toManagementErrorMessage(t, error, 'admin.flowVariables.load_error')\n          : toManagementErrorMessage(t, saveError, 'admin.flowVariables.error')\n      }\n      onSubmit={handleSubmit}\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default FlowVariablesForm;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAsCA,MAAMA,qBAAiD,EACrD,QACA,SACA,MACA,aACA,MACA,GAAG,WACuC;CAC1C,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,EACJ,aACA,aACA,OACA,UACA,UACA,SACA,WACA,MACA,cAC0BC,yBAAiB;EAAC;EAAQ;EAAS;EAAK,CAAC;CAGrE,MAAM,gBAAgB,SAA6B,YAAsC;AACvF,EAAK,KAAK,QAAQ;;AAGpB,KAAI,CAAC,YAAY,CAAC,MAChB,QAAO,oBAACC,oBAAU;AAGpB,QACE,oBAACC;EACC,OAAO,SAAS,EAAE,4BAA4B;EAC9C,WAAW;EACE;EACb,eAAe;EACN;EACT,cAAc;EACd,OACE,QACI,yBAAyB,GAAG,OAAO,iCAAiC,GACpE,yBAAyB,GAAG,WAAW,4BAA4B;EAEzE,UAAU;EACG;EACb,GAAI;GACJ;;AAIN,gCAAe"}

package/dist/components/management/SharedFlowList/BaseSharedFlowList.d.ts

@@ -0,0 +1,53 @@
+import { ManagedFlow, Preferences } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+import { AdminListRenderProps } from '../shared/AdminListRenderProps';
+/**
+ * What {@link BaseSharedFlowList} hands its `children` render function. `flows` and `rows` are the same array.
+ */
+export type BaseSharedFlowListRenderProps = AdminListRenderProps<ManagedFlow> & {
+    flows: ManagedFlow[];
+};
+export interface BaseSharedFlowListProps {
+    /**
+     * Controls rendered next to the title.
+     */
+    actions?: ReactNode;
+    /**
+     * Renders custom UI in place of the default table. Receives the flows, the default columns, the loading and
+     * error state, and the pagination and selection handlers.
+     */
+    children?: (props: BaseSharedFlowListRenderProps) => ReactNode;
+    className?: string;
+    description?: string;
+    error?: string | null;
+    flows: ManagedFlow[];
+    isLoading?: boolean;
+    /**
+     * Page size.
+     * @default 20
+     */
+    limit?: number;
+    offset?: number;
+    /**
+     * Called with the offset of the page to show. Pagination is hidden when omitted.
+     */
+    onPageChange?: (offset: number) => void;
+    /**
+     * Called when a flow is chosen. Rows are selectable only when set.
+     */
+    onSelect?: (flow: ManagedFlow) => void;
+    preferences?: Preferences;
+    selectedFlowId?: string;
+    /**
+     * Heading of the list. Pass an empty string to hide it.
+     */
+    title?: string;
+    totalResults?: number;
+}
+/**
+ * Lists flows with their handle and type. Holds no data of its own: pass the page of flows and handle selection
+ * and pagination.
+ */
+declare const BaseSharedFlowList: FC<BaseSharedFlowListProps>;
+export default BaseSharedFlowList;
+//# sourceMappingURL=BaseSharedFlowList.d.ts.map

package/dist/components/management/SharedFlowList/BaseSharedFlowList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSharedFlowList.d.ts","sourceRoot":"","sources":["../../../../src/components/management/SharedFlowList/BaseSharedFlowList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAC,EAAE,EAAgB,SAAS,EAAC,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAC,oBAAoB,EAAC,MAAM,gCAAgC,CAAC;AAGpE;;GAEG;AACH,MAAM,MAAM,6BAA6B,GAAG,oBAAoB,CAAC,WAAW,CAAC,GAAG;IAC9E,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,6BAA6B,KAAK,SAAS,CAAC;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,KAAK,EAAE,WAAW,EAAE,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,QAAA,MAAM,kBAAkB,EAAE,EAAE,CAAC,uBAAuB,CAkFnD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/management/SharedFlowList/BaseSharedFlowList.js

@@ -0,0 +1,76 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import DataTable_default from "../../primitives/DataTable/DataTable.js";
+import AdminSection_default from "../shared/AdminSection.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/management/SharedFlowList/BaseSharedFlowList.tsx
+/**
+* Lists flows with their handle and type. Holds no data of its own: pass the page of flows and handle selection
+* and pagination.
+*/
+const BaseSharedFlowList = ({ actions, children, className, description, error = null, flows, isLoading = false, limit = 20, offset = 0, onPageChange, onSelect, preferences, selectedFlowId, title, totalResults }) => {
+	const { t } = useTranslation_default(preferences?.i18n);
+	const columns = [
+		{
+			header: t("admin.flows.list.columns.name"),
+			id: "name",
+			render: (flow) => flow.name
+		},
+		{
+			header: t("admin.flows.list.columns.handle"),
+			id: "handle",
+			render: (flow) => flow.handle ? /* @__PURE__ */ jsx("code", { children: flow.handle }) : null
+		},
+		{
+			header: t("admin.flows.list.columns.type"),
+			id: "type",
+			render: (flow) => flow.flowType
+		}
+	];
+	if (children) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: children({
+			columns,
+			error,
+			flows,
+			isLoading,
+			limit,
+			offset,
+			onPageChange,
+			onSelect,
+			rows: flows,
+			selectedRowId: selectedFlowId,
+			totalResults: totalResults ?? flows.length
+		})
+	});
+	return /* @__PURE__ */ jsx(AdminSection_default, {
+		block: "shared-flow-list",
+		className,
+		title: title ?? t("admin.flows.list.title"),
+		description,
+		actions,
+		preferences,
+		children: /* @__PURE__ */ jsx(DataTable_default, {
+			caption: title?.length ? title : t("admin.flows.list.title"),
+			columns,
+			rows: flows,
+			getRowId: (flow) => flow.id,
+			isLoading,
+			error,
+			emptyText: t("admin.flows.list.empty"),
+			onRowClick: onSelect,
+			selectedRowId: selectedFlowId,
+			pagination: onPageChange ? {
+				limit,
+				offset,
+				onChange: onPageChange,
+				total: totalResults ?? flows.length
+			} : void 0
+		})
+	});
+};
+var BaseSharedFlowList_default = BaseSharedFlowList;
+
+//#endregion
+export { BaseSharedFlowList_default as default };
+//# sourceMappingURL=BaseSharedFlowList.js.map

package/dist/components/management/SharedFlowList/BaseSharedFlowList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseSharedFlowList.js","names":["BaseSharedFlowList: FC<BaseSharedFlowListProps>","useTranslation","columns: DataTableColumn<ManagedFlow>[]","AdminSection","DataTable"],"sources":["../../../../src/components/management/SharedFlowList/BaseSharedFlowList.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {ManagedFlow, Preferences} from '@thunderid/browser';\nimport {FC, ReactElement, ReactNode} from 'react';\nimport useTranslation from '../../../hooks/useTranslation';\nimport DataTable, {DataTableColumn} from '../../primitives/DataTable/DataTable';\nimport {AdminListRenderProps} from '../shared/AdminListRenderProps';\nimport AdminSection from '../shared/AdminSection';\n\n/**\n * What {@link BaseSharedFlowList} hands its `children` render function. `flows` and `rows` are the same array.\n */\nexport type BaseSharedFlowListRenderProps = AdminListRenderProps<ManagedFlow> & {\n  flows: ManagedFlow[];\n};\n\nexport interface BaseSharedFlowListProps {\n  /**\n   * Controls rendered next to the title.\n   */\n  actions?: ReactNode;\n  /**\n   * Renders custom UI in place of the default table. Receives the flows, the default columns, the loading and\n   * error state, and the pagination and selection handlers.\n   */\n  children?: (props: BaseSharedFlowListRenderProps) => ReactNode;\n  className?: string;\n  description?: string;\n  error?: string | null;\n  flows: ManagedFlow[];\n  isLoading?: boolean;\n  /**\n   * Page size.\n   * @default 20\n   */\n  limit?: number;\n  offset?: number;\n  /**\n   * Called with the offset of the page to show. Pagination is hidden when omitted.\n   */\n  onPageChange?: (offset: number) => void;\n  /**\n   * Called when a flow is chosen. Rows are selectable only when set.\n   */\n  onSelect?: (flow: ManagedFlow) => void;\n  preferences?: Preferences;\n  selectedFlowId?: string;\n  /**\n   * Heading of the list. Pass an empty string to hide it.\n   */\n  title?: string;\n  totalResults?: number;\n}\n\n/**\n * Lists flows with their handle and type. Holds no data of its own: pass the page of flows and handle selection\n * and pagination.\n */\nconst BaseSharedFlowList: FC<BaseSharedFlowListProps> = ({\n  actions,\n  children,\n  className,\n  description,\n  error = null,\n  flows,\n  isLoading = false,\n  limit = 20,\n  offset = 0,\n  onPageChange,\n  onSelect,\n  preferences,\n  selectedFlowId,\n  title,\n  totalResults,\n}: BaseSharedFlowListProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n\n  const columns: DataTableColumn<ManagedFlow>[] = [\n    {\n      header: t('admin.flows.list.columns.name'),\n      id: 'name',\n      render: (flow: ManagedFlow): ReactNode => flow.name,\n    },\n    {\n      header: t('admin.flows.list.columns.handle'),\n      id: 'handle',\n      render: (flow: ManagedFlow): ReactNode => (flow.handle ? <code>{flow.handle}</code> : null),\n    },\n    {\n      header: t('admin.flows.list.columns.type'),\n      id: 'type',\n      render: (flow: ManagedFlow): ReactNode => flow.flowType,\n    },\n  ];\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({\n          columns,\n          error,\n          flows,\n          isLoading,\n          limit,\n          offset,\n          onPageChange,\n          onSelect,\n          rows: flows,\n          selectedRowId: selectedFlowId,\n          totalResults: totalResults ?? flows.length,\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <AdminSection\n      block=\"shared-flow-list\"\n      className={className}\n      title={title ?? t('admin.flows.list.title')}\n      description={description}\n      actions={actions}\n      preferences={preferences}\n    >\n      <DataTable\n        caption={title?.length ? title : t('admin.flows.list.title')}\n        columns={columns}\n        rows={flows}\n        getRowId={(flow: ManagedFlow): string => flow.id}\n        isLoading={isLoading}\n        error={error}\n        emptyText={t('admin.flows.list.empty')}\n        onRowClick={onSelect}\n        selectedRowId={selectedFlowId}\n        pagination={\n          onPageChange ? {limit, offset, onChange: onPageChange, total: totalResults ?? flows.length} : undefined\n        }\n      />\n    </AdminSection>\n  );\n};\n\nexport default BaseSharedFlowList;\n"],"mappings":";;;;;;;;;;AA2DA,MAAMA,sBAAmD,EACvD,SACA,UACA,WACA,aACA,QAAQ,MACR,OACA,YAAY,OACZ,QAAQ,IACR,SAAS,GACT,cACA,UACA,aACA,gBACA,OACA,mBAC2C;CAC3C,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAE7C,MAAMC,UAA0C;EAC9C;GACE,QAAQ,EAAE,gCAAgC;GAC1C,IAAI;GACJ,SAAS,SAAiC,KAAK;GAChD;EACD;GACE,QAAQ,EAAE,kCAAkC;GAC5C,IAAI;GACJ,SAAS,SAAkC,KAAK,SAAS,oBAAC,oBAAM,KAAK,SAAc,GAAG;GACvF;EACD;GACE,QAAQ,EAAE,gCAAgC;GAC1C,IAAI;GACJ,SAAS,SAAiC,KAAK;GAChD;EACF;AAED,KAAI,SACF,QACE,oBAAC;EAAe;YACb,SAAS;GACR;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,MAAM;GACN,eAAe;GACf,cAAc,gBAAgB,MAAM;GACrC,CAAC;GACE;AAIV,QACE,oBAACC;EACC,OAAM;EACK;EACX,OAAO,SAAS,EAAE,yBAAyB;EAC9B;EACJ;EACI;YAEb,oBAACC;GACC,SAAS,OAAO,SAAS,QAAQ,EAAE,yBAAyB;GACnD;GACT,MAAM;GACN,WAAW,SAA8B,KAAK;GACnC;GACJ;GACP,WAAW,EAAE,yBAAyB;GACtC,YAAY;GACZ,eAAe;GACf,YACE,eAAe;IAAC;IAAO;IAAQ,UAAU;IAAc,OAAO,gBAAgB,MAAM;IAAO,GAAG;IAEhG;GACW;;AAInB,iCAAe"}

package/dist/components/management/SharedFlowList/SharedFlowList.d.ts

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { BaseSharedFlowListProps } from './BaseSharedFlowList';
+export type SharedFlowListProps = Omit<BaseSharedFlowListProps, 'error' | 'flows' | 'isLoading' | 'offset' | 'onPageChange' | 'totalResults'> & {
+    /**
+     * Restricts the list to one flow type, for example `AUTHENTICATION`.
+     */
+    flowType?: string;
+    /**
+     * The organization unit to list the flows of: the ones it owns and the ones shared with it.
+     */
+    ouId: string;
+    /**
+     * Which of those flows to list: the ones shared with the unit, the ones it owns, or both. The server reports
+     * the ownership of each flow, and the list narrows to it, so a narrowed list reads the first page of at most
+     * 100 flows and pages through the matches.
+     * @default 'shared'
+     */
+    ownership?: 'all' | 'owned' | 'shared';
+};
+/**
+ * Lists the flows shared with an organization unit, or the ones it owns, or both, a page at a time. Choosing a flow reports it
+ * through `onSelect`, so the application decides what to open, for example `FlowVariablesForm` for that flow.
+ *
+ * @example
+ * ```tsx
+ * <SharedFlowList ouId={ouId} onSelect={(flow) => setSelectedFlowId(flow.id)} />
+ * {selectedFlowId && <FlowVariablesForm flowId={selectedFlowId} ouId={ouId} />}
+ * ```
+ */
+declare const SharedFlowList: FC<SharedFlowListProps>;
+export default SharedFlowList;
+//# sourceMappingURL=SharedFlowList.d.ts.map

package/dist/components/management/SharedFlowList/SharedFlowList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SharedFlowList.d.ts","sourceRoot":"","sources":["../../../../src/components/management/SharedFlowList/SharedFlowList.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAC,EAAE,EAAkC,MAAM,OAAO,CAAC;AAC1D,OAA2B,EAAC,uBAAuB,EAAC,MAAM,sBAAsB,CAAC;AAKjF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,uBAAuB,EACvB,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,QAAQ,GAAG,cAAc,GAAG,cAAc,CAC7E,GAAG;IACF;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;CACxC,CAAC;AAIF;;;;;;;;;GASG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA4C3C,CAAC;AAEF,eAAe,cAAc,CAAC"}