@backstage/plugin-scaffolder-react 1.8.4 → 1.8.5-next.0

package/dist/alpha.esm.js

@@ -1,1473 +1,20 @@
-import { useApi, featureFlagsApiRef, useAnalytics, useApiHolder, useApp, errorApiRef, useRouteRef, alertApiRef } from '@backstage/core-plugin-api';
-import MuiStepper from '@material-ui/core/Stepper';
-import MuiStep from '@material-ui/core/Step';
-import MuiStepLabel from '@material-ui/core/StepLabel';
-import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import { makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import { Draft07 } from 'json-schema-library';
-import { parse, stringify } from 'flatted';
-import { StructuredMetadataTable, MarkdownContent, ItemCardHeader, Link, UserIcon, Content, ItemCardGrid, ContentHeader, Progress, InfoCard, LogViewer } from '@backstage/core-components';
-import validator from '@rjsf/validator-ajv8';
-import qs from 'qs';
-import useAsync from 'react-use/esm/useAsync';
-import { s as scaffolderApiRef, S as SecretsContextProvider } from './esm/ref-NRtFlQHB.esm.js';
-import cloneDeep from 'lodash/cloneDeep';
-import { withTheme } from '@rjsf/core';
-import { getUiOptions, getTemplate } from '@rjsf/utils';
-import FormControl from '@material-ui/core/FormControl';
-import Typography from '@material-ui/core/Typography';
-import { Theme } from '@rjsf/material-ui';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import Paper from '@material-ui/core/Paper';
-import ErrorIcon from '@material-ui/icons/Error';
-import { RELATION_OWNED_BY, stringifyEntityRef, parseEntityRef } from '@backstage/catalog-model';
-import { FavoriteEntity, getEntityRelations, EntityRefLinks, useEntityList, catalogApiRef, entityRouteRef, useEntityTypeFilter } from '@backstage/plugin-catalog-react';
-import Box from '@material-ui/core/Box';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import Chip from '@material-ui/core/Chip';
-import Divider from '@material-ui/core/Divider';
-import Grid from '@material-ui/core/Grid';
-import LanguageIcon from '@material-ui/icons/Language';
-import { isTemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';
-import { Duration, DateTime, Interval } from 'luxon';
-import useAsync$1 from 'react-use/lib/useAsync';
-import LinkIcon from '@material-ui/icons/Link';
-import DescriptionIcon from '@material-ui/icons/Description';
-import MuiStepButton from '@material-ui/core/StepButton';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';
-import PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';
-import classNames from 'classnames';
-import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';
-import ErrorOutline from '@material-ui/icons/ErrorOutline';
-import useInterval from 'react-use/esm/useInterval';
-import humanizeDuration from 'humanize-duration';
-import { useMountEffect } from '@react-hookz/web';
-import capitalize from 'lodash/capitalize';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import TextField from '@material-ui/core/TextField';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
-import Popover from '@material-ui/core/Popover';
-import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
-import Edit from '@material-ui/icons/Edit';
-import List$1 from '@material-ui/icons/List';
-import MoreVert from '@material-ui/icons/MoreVert';
-import '@backstage/version-bridge';
-
-function isObject$1(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-function extractUiSchema(schema, uiSchema) {
-  if (!isObject$1(schema)) {
-    return;
-  }
-  const {
-    properties,
-    items,
-    anyOf,
-    oneOf,
-    allOf,
-    dependencies,
-    then,
-    else: _else
-  } = schema;
-  for (const propName in schema) {
-    if (!schema.hasOwnProperty(propName)) {
-      continue;
-    }
-    if (propName.startsWith("ui:")) {
-      uiSchema[propName] = schema[propName];
-      delete schema[propName];
-    }
-  }
-  if (isObject$1(properties)) {
-    for (const propName in properties) {
-      if (!properties.hasOwnProperty(propName)) {
-        continue;
-      }
-      const schemaNode = properties[propName];
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      if (!isObject$1(uiSchema[propName])) {
-        const innerUiSchema = {};
-        uiSchema[propName] = innerUiSchema;
-      }
-      extractUiSchema(schemaNode, uiSchema[propName]);
-    }
-  }
-  if (isObject$1(items)) {
-    const innerUiSchema = {};
-    uiSchema.items = innerUiSchema;
-    extractUiSchema(items, innerUiSchema);
-  }
-  if (Array.isArray(anyOf)) {
-    for (const schemaNode of anyOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (Array.isArray(oneOf)) {
-    for (const schemaNode of oneOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (Array.isArray(allOf)) {
-    for (const schemaNode of allOf) {
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (isObject$1(dependencies)) {
-    for (const depName of Object.keys(dependencies)) {
-      const schemaNode = dependencies[depName];
-      if (!isObject$1(schemaNode)) {
-        continue;
-      }
-      extractUiSchema(schemaNode, uiSchema);
-    }
-  }
-  if (isObject$1(then)) {
-    extractUiSchema(then, uiSchema);
-  }
-  if (isObject$1(_else)) {
-    extractUiSchema(_else, uiSchema);
-  }
-}
-const extractSchemaFromStep = (inputStep) => {
-  const uiSchema = {};
-  const returnSchema = parse(stringify(inputStep));
-  extractUiSchema(returnSchema, uiSchema);
-  return { uiSchema, schema: returnSchema };
-};
-const createFieldValidation = () => {
-  const fieldValidation = {
-    __errors: [],
-    addError: (message) => {
-      var _a;
-      (_a = fieldValidation.__errors) == null ? void 0 : _a.push(message);
-    }
-  };
-  return fieldValidation;
-};
-
-function isFieldValidation(error) {
-  return !!error && "__errors" in error;
-}
-function hasErrors(errors) {
-  var _a;
-  if (!errors) {
-    return false;
-  }
-  for (const error of Object.values(errors)) {
-    if (isFieldValidation(error)) {
-      if (((_a = error.__errors) != null ? _a : []).length > 0) {
-        return true;
-      }
-      continue;
-    }
-    if (hasErrors(error)) {
-      return true;
-    }
-  }
-  return false;
-}
-function isObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
-}
-
-const isJsonError = (value) => "type" in value && value.type === "error";
-const createAsyncValidators = (rootSchema, validators, context) => {
-  async function validate(formData, pathPrefix = "#", current = formData) {
-    var _a, _b;
-    const parsedSchema = new Draft07(rootSchema);
-    const formValidation = {};
-    const validateForm = async (validatorName, key, value, schema, uiSchema) => {
-      const validator = validators[validatorName];
-      if (validator) {
-        const fieldValidation = createFieldValidation();
-        try {
-          await validator(value, fieldValidation, {
-            ...context,
-            formData,
-            schema,
-            uiSchema
-          });
-        } catch (ex) {
-          fieldValidation.addError(ex.message);
-        }
-        formValidation[key] = fieldValidation;
-      }
-    };
-    for (const [key, value] of Object.entries(current)) {
-      const pointer = `${pathPrefix}/${key}`;
-      const definitionInSchema = parsedSchema.getSchema({
-        pointer,
-        data: formData
-      });
-      if (!definitionInSchema) {
-        continue;
-      }
-      if (isJsonError(definitionInSchema)) {
-        throw new Error(definitionInSchema.message);
-      }
-      const { schema, uiSchema } = extractSchemaFromStep(
-        definitionInSchema
-      );
-      const hasItems = definitionInSchema && definitionInSchema.items;
-      const doValidateItem = async (propValue, itemSchema, itemUiSchema) => {
-        await validateForm(
-          propValue["ui:field"],
-          key,
-          value,
-          itemSchema,
-          itemUiSchema
-        );
-      };
-      const doValidate = async (propValue) => {
-        if ("ui:field" in propValue) {
-          const { schema: itemsSchema, uiSchema: itemsUiSchema } = extractSchemaFromStep(definitionInSchema.items);
-          await doValidateItem(propValue, itemsSchema, itemsUiSchema);
-        }
-      };
-      if ("ui:field" in definitionInSchema) {
-        await doValidateItem(definitionInSchema, schema, uiSchema);
-      } else if (hasItems && "ui:field" in definitionInSchema.items) {
-        await doValidate(definitionInSchema.items);
-      } else if (hasItems && definitionInSchema.items.type === "object") {
-        const properties = (_b = (_a = definitionInSchema.items) == null ? void 0 : _a.properties) != null ? _b : [];
-        for (const [, propValue] of Object.entries(properties)) {
-          await doValidate(propValue);
-        }
-      } else if (isObject(value)) {
-        formValidation[key] = await validate(formData, pointer, value);
-      }
-    }
-    return formValidation;
-  }
-  return async (formData) => {
-    return await validate(formData);
-  };
-};
-
-const ReviewState = (props) => {
-  const reviewData = Object.fromEntries(
-    Object.entries(props.formState).map(([key, value]) => {
-      var _a;
-      for (const step of props.schemas) {
-        const parsedSchema = new Draft07(step.mergedSchema);
-        const definitionInSchema = parsedSchema.getSchema({
-          pointer: `#/${key}`,
-          data: props.formState
-        });
-        if (definitionInSchema) {
-          const backstageReviewOptions = (_a = definitionInSchema["ui:backstage"]) == null ? void 0 : _a.review;
-          if (backstageReviewOptions) {
-            if (backstageReviewOptions.mask) {
-              return [key, backstageReviewOptions.mask];
-            }
-            if (backstageReviewOptions.show === false) {
-              return [];
-            }
-          }
-          if (definitionInSchema["ui:widget"] === "password") {
-            return [key, "******"];
-          }
-          if (definitionInSchema.enum && definitionInSchema.enumNames) {
-            return [
-              key,
-              definitionInSchema.enumNames[definitionInSchema.enum.indexOf(value)] || value
-            ];
-          }
-        }
-      }
-      return [key, value];
-    }).filter((prop) => prop.length > 0)
-  );
-  return /* @__PURE__ */ React.createElement(StructuredMetadataTable, { metadata: reviewData });
-};
-
-const useTemplateSchema = (manifest) => {
-  const featureFlags = useApi(featureFlagsApiRef);
-  const steps = manifest.steps.map(({ title, description, schema }) => ({
-    title,
-    description,
-    mergedSchema: schema,
-    ...extractSchemaFromStep(schema)
-  }));
-  const returningSteps = steps.filter((step) => {
-    var _a;
-    const stepFeatureFlag = (_a = step.uiSchema["ui:backstage"]) == null ? void 0 : _a.featureFlag;
-    return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
-  }).map((step) => {
-    var _a, _b, _c, _d;
-    const strippedSchema = {
-      ...step,
-      schema: {
-        ...step.schema,
-        // Title is rendered at the top of the page, so let's ignore this from jsonschemaform
-        title: void 0
-      }
-    };
-    if (((_a = step.schema) == null ? void 0 : _a.properties) || !((_b = step.schema) == null ? void 0 : _b.dependencies)) {
-      strippedSchema.schema.properties = Object.fromEntries(
-        Object.entries((_d = (_c = step.schema) == null ? void 0 : _c.properties) != null ? _d : {}).filter(
-          ([key]) => {
-            var _a2, _b2;
-            const stepFeatureFlag = (_b2 = (_a2 = step.uiSchema[key]) == null ? void 0 : _a2["ui:backstage"]) == null ? void 0 : _b2.featureFlag;
-            return stepFeatureFlag ? featureFlags.isActive(stepFeatureFlag) : true;
-          }
-        )
-      );
-    }
-    return strippedSchema;
-  });
-  return {
-    presentation: manifest.presentation,
-    steps: returningSteps
-  };
-};
-
-const useFormDataFromQuery = (initialState) => {
-  return useState(() => {
-    if (initialState) {
-      return initialState;
-    }
-    const query = qs.parse(window.location.search, {
-      ignoreQueryPrefix: true
-    });
-    try {
-      return JSON.parse(query.formData);
-    } catch (e) {
-      return {};
-    }
-  });
-};
-
-const useTemplateParameterSchema = (templateRef) => {
-  const scaffolderApi = useApi(scaffolderApiRef);
-  const { value, loading, error } = useAsync(
-    () => scaffolderApi.getTemplateParameterSchema(templateRef),
-    [scaffolderApi, templateRef]
-  );
-  return {
-    manifest: value,
-    loading,
-    error
-  };
-};
-
-const useFilteredSchemaProperties = (manifest) => {
-  const featureFlagKey = "backstage:featureFlag";
-  const featureFlagApi = useApi(featureFlagsApiRef);
-  if (!manifest) {
-    return void 0;
-  }
-  const filteredSteps = manifest == null ? void 0 : manifest.steps.filter((step) => {
-    const featureFlag = step.schema[featureFlagKey];
-    return typeof featureFlag !== "string" || featureFlagApi.isActive(featureFlag);
-  }).map((step) => {
-    var _a;
-    const filteredStep = cloneDeep(step);
-    const removedPropertyKeys = [];
-    if (filteredStep.schema.properties) {
-      filteredStep.schema.properties = Object.fromEntries(
-        Object.entries(filteredStep.schema.properties).filter(
-          ([key, value]) => {
-            if (value[featureFlagKey]) {
-              if (featureFlagApi.isActive(value[featureFlagKey])) {
-                return true;
-              }
-              removedPropertyKeys.push(key);
-              return false;
-            }
-            return true;
-          }
-        )
-      );
-      filteredStep.schema.required = Array.isArray(
-        filteredStep.schema.required
-      ) ? (_a = filteredStep.schema.required) == null ? void 0 : _a.filter(
-        (r) => !removedPropertyKeys.includes(r)
-      ) : filteredStep.schema.required;
-    }
-    return filteredStep;
-  });
-  return { ...manifest, steps: filteredSteps };
-};
-
-const useTransformSchemaToProps = (step, options = {}) => {
-  var _a;
-  const { layouts = [] } = options;
-  const objectFieldTemplate = step == null ? void 0 : step.uiSchema["ui:ObjectFieldTemplate"];
-  if (typeof objectFieldTemplate !== "string") {
-    return step;
-  }
-  const Layout = (_a = layouts.find(
-    (layout) => layout.name === objectFieldTemplate
-  )) == null ? void 0 : _a.component;
-  if (!Layout) {
-    return step;
-  }
-  return {
-    ...step,
-    uiSchema: {
-      ...step.uiSchema,
-      ["ui:ObjectFieldTemplate"]: Layout
-    }
-  };
-};
-
-const DescriptionField = ({ description }) => description && /* @__PURE__ */ React.createElement(MarkdownContent, { content: description, linkTarget: "_blank" });
-
-var FieldOverrides = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  DescriptionField: DescriptionField
-});
-
-const useStyles$c = makeStyles((theme) => ({
-  markdownDescription: {
-    fontSize: theme.typography.caption.fontSize,
-    margin: 0,
-    color: theme.palette.text.secondary,
-    "& :first-child": {
-      margin: 0,
-      marginTop: "3px"
-      // to keep the standard browser padding
-    }
-  }
-}));
-const ScaffolderField = (props) => {
-  const {
-    children,
-    displayLabel = true,
-    rawErrors = [],
-    errors,
-    help,
-    rawDescription,
-    required,
-    disabled
-  } = props;
-  const classes = useStyles$c();
-  return /* @__PURE__ */ React.createElement(
-    FormControl,
-    {
-      fullWidth: true,
-      error: rawErrors.length ? true : false,
-      required,
-      disabled
-    },
-    children,
-    displayLabel && rawDescription ? /* @__PURE__ */ React.createElement(
-      MarkdownContent,
-      {
-        content: rawDescription,
-        className: classes.markdownDescription
-      }
-    ) : null,
-    errors,
-    help
-  );
-};
-
-const FieldTemplate = (props) => {
-  const {
-    id,
-    children,
-    classNames,
-    style,
-    disabled,
-    displayLabel,
-    hidden,
-    label,
-    onDropPropertyClick,
-    onKeyChange,
-    readonly,
-    required,
-    rawErrors = [],
-    errors,
-    help,
-    rawDescription,
-    schema,
-    uiSchema,
-    registry
-  } = props;
-  const uiOptions = getUiOptions(uiSchema);
-  const WrapIfAdditionalTemplate = getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
-  if (hidden) {
-    return /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, children);
-  }
-  return /* @__PURE__ */ React.createElement(
-    WrapIfAdditionalTemplate,
-    {
-      classNames,
-      style,
-      disabled,
-      id,
-      label,
-      onDropPropertyClick,
-      onKeyChange,
-      readonly,
-      required,
-      schema,
-      uiSchema,
-      registry
-    },
-    /* @__PURE__ */ React.createElement(
-      ScaffolderField,
-      {
-        displayLabel,
-        rawErrors,
-        help,
-        disabled,
-        rawDescription,
-        errors,
-        required
-      },
-      children
-    )
-  );
-};
-
-const useStyles$b = makeStyles((theme) => ({
-  markdownDescription: {
-    fontSize: theme.typography.caption.fontSize,
-    margin: 0,
-    color: theme.palette.text.secondary,
-    "& :first-child": {
-      margin: 0,
-      marginTop: "3px"
-      // to keep the standard browser padding
-    }
-  }
-}));
-const DescriptionFieldTemplate = (props) => {
-  const { id, description } = props;
-  const classes = useStyles$b();
-  if (description) {
-    if (typeof description === "string") {
-      return /* @__PURE__ */ React.createElement(
-        MarkdownContent,
-        {
-          content: description,
-          className: classes.markdownDescription
-        }
-      );
-    }
-    return /* @__PURE__ */ React.createElement(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" } }, description);
-  }
-  return null;
-};
-
-const WrappedForm = withTheme(Theme);
-const Form = (props) => {
-  const wrappedFields = React.useMemo(
-    () => {
-      var _a;
-      return Object.fromEntries(
-        Object.entries((_a = props.fields) != null ? _a : {}).map(([key, Component]) => [
-          key,
-          (wrapperProps) => {
-            var _a2, _b;
-            return /* @__PURE__ */ React.createElement(
-              Component,
-              {
-                ...wrapperProps,
-                uiSchema: (_a2 = wrapperProps.uiSchema) != null ? _a2 : {},
-                formData: wrapperProps.formData,
-                rawErrors: (_b = wrapperProps.rawErrors) != null ? _b : []
-              }
-            );
-          }
-        ])
-      );
-    },
-    [props.fields]
-  );
-  const templates = React.useMemo(
-    () => ({
-      FieldTemplate,
-      DescriptionFieldTemplate,
-      ...props.templates
-    }),
-    [props.templates]
-  );
-  return /* @__PURE__ */ React.createElement(WrappedForm, { ...props, templates, fields: wrappedFields });
-};
-
-const useStyles$a = makeStyles(
-  (_theme) => createStyles({
-    list: {
-      width: "100%"
-    },
-    text: {
-      textWrap: "wrap"
-    }
-  })
-);
-const ErrorListTemplate = ({ errors }) => {
-  const classes = useStyles$a();
-  return /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(List, { dense: true, className: classes.list }, errors.map((error, index) => /* @__PURE__ */ React.createElement(ListItem, { key: index }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(ErrorIcon, { color: "error" })), /* @__PURE__ */ React.createElement(
-    ListItemText,
-    {
-      classes: { primary: classes.text },
-      primary: error.stack
-    }
-  )))));
-};
-
-const useStyles$9 = makeStyles((theme) => ({
-  backButton: {
-    marginRight: theme.spacing(1)
-  },
-  footer: {
-    display: "flex",
-    flexDirection: "row",
-    justifyContent: "right",
-    marginTop: theme.spacing(2)
-  },
-  formWrapper: {
-    padding: theme.spacing(2)
-  }
-}));
-const Stepper = (stepperProps) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { layouts = [], components = {}, ...props } = stepperProps;
-  const {
-    ReviewStateComponent = ReviewState,
-    ReviewStepComponent,
-    backButtonText = "Back",
-    createButtonText = "Create",
-    reviewButtonText = "Review"
-  } = components;
-  const analytics = useAnalytics();
-  const { presentation, steps } = useTemplateSchema(props.manifest);
-  const apiHolder = useApiHolder();
-  const [activeStep, setActiveStep] = useState(0);
-  const [isValidating, setIsValidating] = useState(false);
-  const [formState, setFormState] = useFormDataFromQuery(props.initialState);
-  const [errors, setErrors] = useState();
-  const styles = useStyles$9();
-  const extensions = useMemo(() => {
-    return Object.fromEntries(
-      props.extensions.map(({ name, component }) => [name, component])
-    );
-  }, [props.extensions]);
-  const fields = useMemo(
-    () => ({ ...FieldOverrides, ...extensions }),
-    [extensions]
-  );
-  const validators = useMemo(() => {
-    return Object.fromEntries(
-      props.extensions.map(({ name, validation: validation2 }) => [name, validation2])
-    );
-  }, [props.extensions]);
-  const validation = useMemo(() => {
-    var _a2;
-    return createAsyncValidators((_a2 = steps[activeStep]) == null ? void 0 : _a2.mergedSchema, validators, {
-      apiHolder
-    });
-  }, [steps, activeStep, validators, apiHolder]);
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-  const handleChange = useCallback(
-    (e) => setFormState((current) => ({ ...current, ...e.formData })),
-    [setFormState]
-  );
-  const handleCreate = useCallback(() => {
-    props.onCreate(formState);
-  }, [props, formState]);
-  const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts });
-  const handleNext = async ({
-    formData = {}
-  }) => {
-    setErrors(void 0);
-    setIsValidating(true);
-    const returnedValidation = await validation(formData);
-    setIsValidating(false);
-    if (hasErrors(returnedValidation)) {
-      setErrors(returnedValidation);
-    } else {
-      setErrors(void 0);
-      setActiveStep((prevActiveStep) => {
-        const stepNum = prevActiveStep + 1;
-        analytics.captureEvent("click", `Next Step (${stepNum})`);
-        return stepNum;
-      });
-    }
-    setFormState((current) => ({ ...current, ...formData }));
-  };
-  const backLabel = (_b = (_a = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _a.backButtonText) != null ? _b : backButtonText;
-  const createLabel = (_d = (_c = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _c.createButtonText) != null ? _d : createButtonText;
-  const reviewLabel = (_f = (_e = presentation == null ? void 0 : presentation.buttonLabels) == null ? void 0 : _e.reviewButtonText) != null ? _f : reviewButtonText;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, isValidating && /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" }), /* @__PURE__ */ React.createElement(
-    MuiStepper,
-    {
-      activeStep,
-      alternativeLabel: true,
-      variant: "elevation",
-      style: { overflowX: "auto" }
-    },
-    steps.map((step, index) => {
-      const isAllowedLabelClick = activeStep > index;
-      return /* @__PURE__ */ React.createElement(MuiStep, { key: index }, /* @__PURE__ */ React.createElement(
-        MuiStepLabel,
-        {
-          "aria-label": `Step ${index + 1}`,
-          style: { cursor: isAllowedLabelClick ? "pointer" : "default" },
-          onClick: () => {
-            if (isAllowedLabelClick)
-              setActiveStep(index);
-          }
-        },
-        step.title
-      ));
-    }),
-    /* @__PURE__ */ React.createElement(MuiStep, null, /* @__PURE__ */ React.createElement(MuiStepLabel, null, "Review"))
-  ), /* @__PURE__ */ React.createElement("div", { className: styles.formWrapper }, activeStep < steps.length ? /* @__PURE__ */ React.createElement(
-    Form,
-    {
-      validator,
-      extraErrors: errors,
-      formData: formState,
-      formContext: { formData: formState },
-      schema: currentStep.schema,
-      uiSchema: currentStep.uiSchema,
-      onSubmit: handleNext,
-      fields,
-      showErrorList: "top",
-      templates: { ErrorListTemplate },
-      onChange: handleChange,
-      experimental_defaultFormStateBehavior: {
-        allOf: "populateDefaults"
-      },
-      ...(_g = props.formProps) != null ? _g : {}
-    },
-    /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        onClick: handleBack,
-        className: styles.backButton,
-        disabled: activeStep < 1 || isValidating
-      },
-      backLabel
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        type: "submit",
-        disabled: isValidating
-      },
-      activeStep === steps.length - 1 ? reviewLabel : "Next"
-    ))
-  ) : (
-    // TODO: potentially move away from this pattern, deprecate?
-    ReviewStepComponent ? /* @__PURE__ */ React.createElement(
-      ReviewStepComponent,
-      {
-        disableButtons: isValidating,
-        formData: formState,
-        handleBack,
-        handleReset: () => {
-        },
-        steps,
-        handleCreate
-      }
-    ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ReviewStateComponent, { formState, schemas: steps }), /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        onClick: handleBack,
-        className: styles.backButton,
-        disabled: activeStep < 1
-      },
-      "Back"
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        variant: "contained",
-        color: "primary",
-        onClick: handleCreate
-      },
-      createLabel
-    )))
-  )));
-};
-
-const useStyles$8 = makeStyles(() => ({
-  header: {
-    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,
-    color: ({ cardFontColor }) => cardFontColor
-  },
-  subtitleWrapper: {
-    display: "flex",
-    justifyContent: "space-between"
-  }
-}));
-const CardHeader = (props) => {
-  const {
-    template: {
-      metadata: { title, name },
-      spec: { type }
-    }
-  } = props;
-  const { getPageTheme } = useTheme();
-  const themeForType = getPageTheme({ themeId: type });
-  const styles = useStyles$8({
-    cardFontColor: themeForType.fontColor,
-    cardBackgroundImage: themeForType.backgroundImage
-  });
-  const SubtitleComponent = /* @__PURE__ */ React.createElement("div", { className: styles.subtitleWrapper }, /* @__PURE__ */ React.createElement("div", null, type), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(FavoriteEntity, { entity: props.template, style: { padding: 0 } })));
-  return /* @__PURE__ */ React.createElement(
-    ItemCardHeader,
-    {
-      title: title != null ? title : name,
-      subtitle: SubtitleComponent,
-      classes: { root: styles.header }
-    }
-  );
-};
-
-const useStyles$7 = makeStyles(() => ({
-  linkText: {
-    display: "inline-flex",
-    alignItems: "center"
-  }
-}));
-const CardLink = ({ icon: Icon, text, url }) => {
-  const styles = useStyles$7();
-  return /* @__PURE__ */ React.createElement("div", { className: styles.linkText }, /* @__PURE__ */ React.createElement(Icon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(Link, { style: { marginLeft: "8px" }, to: url }, text || url));
-};
-
-const useStyles$6 = makeStyles((theme) => ({
-  box: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    display: "-webkit-box",
-    "-webkit-line-clamp": 10,
-    "-webkit-box-orient": "vertical"
-  },
-  markdown: {
-    /** to make the styles for React Markdown not leak into the description */
-    "& :first-child": {
-      margin: 0
-    }
-  },
-  label: {
-    color: theme.palette.text.secondary,
-    textTransform: "uppercase",
-    fontWeight: "bold",
-    letterSpacing: 0.5,
-    lineHeight: 1,
-    fontSize: "0.75rem"
-  },
-  footer: {
-    display: "flex",
-    justifyContent: "space-between",
-    flex: 1,
-    alignItems: "center"
-  },
-  ownedBy: {
-    display: "flex",
-    alignItems: "center",
-    flex: 1,
-    color: theme.palette.link
-  }
-}));
-const TemplateCard = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const { template } = props;
-  const styles = useStyles$6();
-  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);
-  const app = useApp();
-  const iconResolver = (key) => {
-    var _a2;
-    return key ? (_a2 = app.getSystemIcon(key)) != null ? _a2 : LanguageIcon : LanguageIcon;
-  };
-  const hasTags = !!((_a = template.metadata.tags) == null ? void 0 : _a.length);
-  const hasLinks = !!((_b = props.additionalLinks) == null ? void 0 : _b.length) || !!((_c = template.metadata.links) == null ? void 0 : _c.length);
-  const displayDefaultDivider = !hasTags && !hasLinks;
-  return /* @__PURE__ */ React.createElement(Card, null, /* @__PURE__ */ React.createElement(CardHeader, { template }), /* @__PURE__ */ React.createElement(CardContent, null, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Box, { className: styles.box }, /* @__PURE__ */ React.createElement(
-    MarkdownContent,
-    {
-      className: styles.markdown,
-      content: (_d = template.metadata.description) != null ? _d : "No description"
-    }
-  ))), displayDefaultDivider && /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator" })), hasTags && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator--tags" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_e = template.metadata.tags) == null ? void 0 : _e.map((tag) => /* @__PURE__ */ React.createElement(Grid, { key: `grid-${tag}`, item: true }, /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      style: { margin: 0 },
-      size: "small",
-      label: tag,
-      key: tag
-    }
-  )))))), hasLinks && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Divider, { "data-testid": "template-card-separator--links" })), /* @__PURE__ */ React.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React.createElement(Grid, { container: true, spacing: 2 }, (_f = props.additionalLinks) == null ? void 0 : _f.map(({ icon, text, url }, index) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6, key: index }, /* @__PURE__ */ React.createElement(CardLink, { icon, text, url }))), (_g = template.metadata.links) == null ? void 0 : _g.map(
-    ({ url, icon, title }, index) => /* @__PURE__ */ React.createElement(Grid, { className: styles.linkText, item: true, xs: 6, key: index }, /* @__PURE__ */ React.createElement(
-      CardLink,
-      {
-        icon: iconResolver(icon),
-        text: title || url,
-        url
-      }
-    ))
-  )))))), /* @__PURE__ */ React.createElement(CardActions, { style: { padding: "16px", flex: 1, alignItems: "flex-end" } }, /* @__PURE__ */ React.createElement("div", { className: styles.footer }, /* @__PURE__ */ React.createElement("div", { className: styles.ownedBy }, ownedByRelations.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(UserIcon, { fontSize: "small" }), /* @__PURE__ */ React.createElement(
-    EntityRefLinks,
-    {
-      style: { marginLeft: "8px" },
-      entityRefs: ownedByRelations,
-      defaultKind: "Group",
-      hideIcons: true
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "small",
-      variant: "outlined",
-      color: "primary",
-      onClick: () => {
-        var _a2;
-        return (_a2 = props.onSelected) == null ? void 0 : _a2.call(props, template);
-      }
-    },
-    "Choose"
-  ))));
-};
-
-const TemplateGroup = (props) => {
-  const {
-    templates,
-    title,
-    components: { CardComponent } = {},
-    onSelected
-  } = props;
-  const titleComponent = typeof title === "string" ? /* @__PURE__ */ React.createElement(ContentHeader, { title }) : title;
-  if (templates.length === 0) {
-    return null;
-  }
-  const Card = CardComponent || TemplateCard;
-  return /* @__PURE__ */ React.createElement(Content, null, titleComponent, /* @__PURE__ */ React.createElement(ItemCardGrid, null, templates.map(({ template, additionalLinks }) => /* @__PURE__ */ React.createElement(
-    Card,
-    {
-      key: stringifyEntityRef(template),
-      additionalLinks,
-      template,
-      onSelected
-    }
-  ))));
-};
-
-const TemplateGroups = (props) => {
-  const { loading, error, entities } = useEntityList();
-  const { groups, templateFilter, TemplateCardComponent, onTemplateSelected } = props;
-  const errorApi = useApi(errorApiRef);
-  const onSelected = useCallback(
-    (template) => {
-      onTemplateSelected == null ? void 0 : onTemplateSelected(template);
-    },
-    [onTemplateSelected]
-  );
-  if (loading) {
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  }
-  if (error) {
-    errorApi.post(error);
-    return null;
-  }
-  if (!entities || !entities.length) {
-    return /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, "No templates found that match your filter. Learn more about", " ", /* @__PURE__ */ React.createElement(Link, { to: "https://backstage.io/docs/features/software-templates/adding-templates" }, "adding templates"), ".");
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, groups.map(({ title, filter }, index) => {
-    const templates = entities.filter(isTemplateEntityV1beta3).filter((e) => templateFilter ? templateFilter(e) : true).filter(filter).map((template) => {
-      var _a, _b;
-      const additionalLinks = (_b = (_a = props.additionalLinksForEntity) == null ? void 0 : _a.call(props, template)) != null ? _b : [];
-      return {
-        template,
-        additionalLinks
-      };
-    });
-    return /* @__PURE__ */ React.createElement(
-      TemplateGroup,
-      {
-        key: index,
-        templates,
-        title,
-        components: { CardComponent: TemplateCardComponent },
-        onSelected
-      }
-    );
-  }));
-};
-
-const useTemplateTimeSavedMinutes = (templateRef) => {
-  const catalogApi = useApi(catalogApiRef);
-  const { value: timeSavedMinutes } = useAsync$1(async () => {
-    var _a;
-    const entity = await catalogApi.getEntityByRef(templateRef);
-    const timeSaved = (_a = entity == null ? void 0 : entity.metadata.annotations) == null ? void 0 : _a["backstage.io/time-saved"];
-    if (!entity || !timeSaved) {
-      return void 0;
-    }
-    const durationMs = Duration.fromISO(timeSaved).as("minutes");
-    if (Number.isNaN(durationMs)) {
-      return void 0;
-    }
-    return durationMs;
-  }, [catalogApi, templateRef]);
-  return timeSavedMinutes;
-};
-
-const useStyles$5 = makeStyles({
-  markdown: {
-    /** to make the styles for React Markdown not leak into the description */
-    "& :first-child": {
-      marginTop: 0
-    },
-    "& :last-child": {
-      marginBottom: 0
-    }
-  }
-});
-const Workflow = (workflowProps) => {
-  var _a;
-  const { title, description, namespace, templateName, onCreate, ...props } = workflowProps;
-  const analytics = useAnalytics();
-  const styles = useStyles$5();
-  const templateRef = stringifyEntityRef({
-    kind: "Template",
-    namespace,
-    name: templateName
-  });
-  const errorApi = useApi(errorApiRef);
-  const { loading, manifest, error } = useTemplateParameterSchema(templateRef);
-  const sortedManifest = useFilteredSchemaProperties(manifest);
-  const minutesSaved = useTemplateTimeSavedMinutes(templateRef);
-  const workflowOnCreate = useCallback(
-    async (formState) => {
-      var _a2;
-      onCreate(formState);
-      const name = typeof formState.name === "string" ? formState.name : void 0;
-      analytics.captureEvent("create", (_a2 = name != null ? name : templateName) != null ? _a2 : "unknown", {
-        value: minutesSaved
-      });
-    },
-    [onCreate, analytics, templateName, minutesSaved]
-  );
-  useEffect(() => {
-    if (error) {
-      errorApi.post(new Error(`Failed to load template, ${error}`));
-    }
-  }, [error, errorApi]);
-  if (error) {
-    return props.onError(error);
-  }
-  return /* @__PURE__ */ React.createElement(Content, null, loading && /* @__PURE__ */ React.createElement(Progress, null), sortedManifest && /* @__PURE__ */ React.createElement(
-    InfoCard,
-    {
-      title: title != null ? title : sortedManifest.title,
-      subheader: /* @__PURE__ */ React.createElement(
-        MarkdownContent,
-        {
-          className: styles.markdown,
-          content: (_a = description != null ? description : sortedManifest.description) != null ? _a : "No description"
-        }
-      ),
-      noPadding: true,
-      titleTypographyProps: { component: "h2" }
-    },
-    /* @__PURE__ */ React.createElement(
-      Stepper,
-      {
-        manifest: sortedManifest,
-        onCreate: workflowOnCreate,
-        ...props
-      }
-    )
-  ));
-};
-const EmbeddableWorkflow = (props) => /* @__PURE__ */ React.createElement(SecretsContextProvider, null, /* @__PURE__ */ React.createElement(Workflow, { ...props }));
-
-const useStyles$4 = makeStyles({
-  root: {
-    "&:hover": {
-      textDecoration: "none"
-    }
-  }
-});
-const LinkOutputs = (props) => {
-  const { links = [] } = props.output;
-  const classes = useStyles$4();
-  const app = useApp();
-  const entityRoute = useRouteRef(entityRouteRef);
-  const iconResolver = (key) => {
-    var _a;
-    return (_a = app.getSystemIcon(key)) != null ? _a : LinkIcon;
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, links.filter(({ url, entityRef }) => url || entityRef).map(({ url, entityRef, title, icon }) => {
-    if (entityRef) {
-      const entityName = parseEntityRef(entityRef);
-      const target = entityRoute(entityName);
-      return { title, icon, url: target };
-    }
-    return { title, icon, url };
-  }).map(({ url, title, icon }, i) => {
-    const Icon = iconResolver(icon);
-    return /* @__PURE__ */ React.createElement(Link, { to: url, key: i, classes: { root: classes.root } }, /* @__PURE__ */ React.createElement(Button, { startIcon: /* @__PURE__ */ React.createElement(Icon, null), component: "div", color: "primary" }, title));
-  }));
-};
-
-const TextOutputs = (props) => {
-  const {
-    output: { text = [] },
-    index,
-    setIndex
-  } = props;
-  const app = useApp();
-  const iconResolver = (key) => {
-    var _a;
-    return (_a = app.getSystemIcon(key)) != null ? _a : DescriptionIcon;
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, text.filter(({ content }) => content !== void 0).map(({ title, icon }, i) => {
-    const Icon = iconResolver(icon);
-    return /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        key: i,
-        startIcon: /* @__PURE__ */ React.createElement(Icon, null),
-        component: "div",
-        color: "primary",
-        onClick: () => {
-          if (index !== i) {
-            setIndex == null ? void 0 : setIndex(i);
-          }
-        },
-        variant: index === i ? "outlined" : void 0
-      },
-      title
-    );
-  }));
-};
-
-const DefaultTemplateOutputs = (props) => {
-  var _a, _b;
-  const { output } = props;
-  const [textOutputIndex, setTextOutputIndex] = useState(
-    void 0
-  );
-  useEffect(() => {
-    if (textOutputIndex === void 0 && (output == null ? void 0 : output.text)) {
-      const defaultIndex = output.text.findIndex(
-        (t) => t.default
-      );
-      setTextOutputIndex(defaultIndex >= 0 ? defaultIndex : 0);
-    }
-  }, [textOutputIndex, output]);
-  const textOutput = useMemo(
-    () => {
-      var _a2;
-      return textOutputIndex !== void 0 ? (_a2 = output == null ? void 0 : output.text) == null ? void 0 : _a2[textOutputIndex] : null;
-    },
-    [output, textOutputIndex]
-  );
-  if (!output) {
-    return null;
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(Paper, null, /* @__PURE__ */ React.createElement(Box, { padding: 2, justifyContent: "center", display: "flex", gridGap: 16 }, /* @__PURE__ */ React.createElement(
-    TextOutputs,
-    {
-      output,
-      index: textOutputIndex,
-      setIndex: setTextOutputIndex
-    }
-  ), /* @__PURE__ */ React.createElement(LinkOutputs, { output })))), textOutput ? /* @__PURE__ */ React.createElement(Box, { paddingBottom: 2 }, /* @__PURE__ */ React.createElement(
-    InfoCard,
-    {
-      title: (_a = textOutput.title) != null ? _a : "Text Output",
-      noPadding: true,
-      titleTypographyProps: { component: "h2" }
-    },
-    /* @__PURE__ */ React.createElement(Box, { padding: 2, height: "100%" }, /* @__PURE__ */ React.createElement(MarkdownContent, { content: (_b = textOutput.content) != null ? _b : "" }))
-  )) : null);
-};
-
-const useStepIconStyles = makeStyles((theme) => ({
-  root: {
-    color: theme.palette.text.disabled
-  },
-  completed: {
-    color: theme.palette.status.ok
-  },
-  error: {
-    color: theme.palette.status.error
-  }
-}));
-const StepIcon = (props) => {
-  const classes = useStepIconStyles();
-  const { active, completed, error, skipped } = props;
-  const getMiddle = () => {
-    if (active) {
-      return /* @__PURE__ */ React.createElement(CircularProgress, { size: "20px" });
-    }
-    if (completed) {
-      return /* @__PURE__ */ React.createElement(CheckCircleOutline, null);
-    }
-    if (error) {
-      return /* @__PURE__ */ React.createElement(ErrorOutline, null);
-    }
-    if (skipped) {
-      return /* @__PURE__ */ React.createElement(RemoveCircleOutline, null);
-    }
-    return /* @__PURE__ */ React.createElement(PanoramaFishEyeIcon, null);
-  };
-  return /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: classNames(classes.root, {
-        [classes.completed]: completed,
-        [classes.error]: error
-      })
-    },
-    getMiddle()
-  );
-};
-
-const StepTime = (props) => {
-  const [time, setTime] = useState("");
-  const { step } = props;
-  const getDelay = () => {
-    if (step.startedAt && step.endedAt && time) {
-      return null;
-    }
-    if (step.startedAt && step.endedAt) {
-      return 1;
-    }
-    return 1e3;
-  };
-  const calculate = useCallback(() => {
-    if (!step.startedAt) {
-      setTime("");
-      return;
-    }
-    const end = step.endedAt ? DateTime.fromISO(step.endedAt) : DateTime.local();
-    const startedAt = DateTime.fromISO(step.startedAt);
-    const formatted = Interval.fromDateTimes(startedAt, end).toDuration().valueOf();
-    setTime(humanizeDuration(formatted, { round: true }));
-  }, [step.endedAt, step.startedAt]);
-  useMountEffect(calculate);
-  useInterval(calculate, getDelay());
-  return /* @__PURE__ */ React.createElement(Typography, { variant: "caption" }, time);
-};
-
-const useStyles$3 = makeStyles((theme) => ({
-  failed: {
-    backgroundColor: theme.palette.error.main
-  },
-  success: {
-    backgroundColor: theme.palette.success.main
-  }
-}));
-const TaskBorder = (props) => {
-  const styles = useStyles$3();
-  if (!props.isComplete) {
-    return /* @__PURE__ */ React.createElement(LinearProgress, { variant: "indeterminate" });
-  }
-  return /* @__PURE__ */ React.createElement(
-    LinearProgress,
-    {
-      variant: "determinate",
-      classes: { bar: props.isError ? styles.failed : styles.success },
-      value: 100
-    }
-  );
-};
-
-const TaskSteps = (props) => {
-  var _a, _b;
-  return /* @__PURE__ */ React.createElement(Paper, { style: { position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React.createElement(
-    TaskBorder,
-    {
-      isComplete: (_a = props.isComplete) != null ? _a : false,
-      isError: (_b = props.isError) != null ? _b : false
-    }
-  ), /* @__PURE__ */ React.createElement(Box, { padding: 2 }, /* @__PURE__ */ React.createElement(
-    MuiStepper,
-    {
-      activeStep: props.activeStep,
-      alternativeLabel: true,
-      variant: "elevation",
-      style: { overflowX: "auto" }
-    },
-    props.steps.map((step) => {
-      const isCompleted = step.status === "completed";
-      const isFailed = step.status === "failed";
-      const isActive = step.status === "processing";
-      const isSkipped = step.status === "skipped";
-      const stepIconProps = {
-        completed: isCompleted,
-        error: isFailed,
-        active: isActive,
-        skipped: isSkipped
-      };
-      return /* @__PURE__ */ React.createElement(MuiStep, { key: step.id }, /* @__PURE__ */ React.createElement(MuiStepButton, null, /* @__PURE__ */ React.createElement(
-        MuiStepLabel,
-        {
-          StepIconProps: stepIconProps,
-          StepIconComponent: StepIcon,
-          "data-testid": "step-label"
-        },
-        /* @__PURE__ */ React.createElement(Box, null, step.name),
-        !isSkipped && /* @__PURE__ */ React.createElement(StepTime, { step })
-      )));
-    })
-  )));
-};
-
-const useStyles$2 = makeStyles({
-  root: {
-    width: "100%",
-    height: "100%",
-    position: "relative"
-  }
-});
-const TaskLogStream = (props) => {
-  const styles = useStyles$2();
-  return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(
-    LogViewer,
-    {
-      text: Object.values(props.logs).map((l) => l.join("\n")).filter(Boolean).join("\n")
-    }
-  ));
-};
-
-const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
-const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
-const useStyles$1 = makeStyles(
-  {
-    root: {},
-    label: {}
-  },
-  { name: "ScaffolderReactTemplateCategoryPicker" }
-);
-const TemplateCategoryPicker = () => {
-  const classes = useStyles$1();
-  const alertApi = useApi(alertApiRef);
-  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } = useEntityTypeFilter();
-  if (loading)
-    return /* @__PURE__ */ React.createElement(Progress, null);
-  if (error) {
-    alertApi.post({
-      message: `Failed to load entity types with error: ${error}`,
-      severity: "error"
-    });
-    return null;
-  }
-  if (!availableTypes)
-    return null;
-  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(
-    Typography,
-    {
-      className: classes.label,
-      variant: "button",
-      component: "label",
-      htmlFor: "categories-picker"
-    },
-    "Categories"
-  ), /* @__PURE__ */ React.createElement(
-    Autocomplete,
-    {
-      multiple: true,
-      id: "categories-picker",
-      options: availableTypes,
-      value: selectedTypes,
-      onChange: (_, value) => setSelectedTypes(value),
-      renderOption: (option, { selected }) => /* @__PURE__ */ React.createElement(
-        FormControlLabel,
-        {
-          control: /* @__PURE__ */ React.createElement(
-            Checkbox,
-            {
-              icon,
-              checkedIcon,
-              checked: selected
-            }
-          ),
-          label: capitalize(option)
-        }
-      ),
-      size: "small",
-      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, null),
-      renderInput: (params) => /* @__PURE__ */ React.createElement(TextField, { ...params, variant: "outlined" })
-    }
-  ));
-};
-
-const useStyles = makeStyles((theme) => ({
-  button: {
-    color: theme.page.fontColor
-  }
-}));
-function ScaffolderPageContextMenu(props) {
-  const { onEditorClicked, onActionsClicked, onTasksClicked, onCreateClicked } = props;
-  const classes = useStyles();
-  const [anchorEl, setAnchorEl] = useState();
-  if (!onEditorClicked && !onActionsClicked) {
-    return null;
-  }
-  const onOpen = (event) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const onClose = () => {
-    setAnchorEl(void 0);
-  };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    IconButton,
-    {
-      id: "long-menu",
-      "aria-label": "more",
-      "aria-controls": "long-menu",
-      "aria-expanded": !!anchorEl,
-      "aria-haspopup": "true",
-      role: "button",
-      onClick: onOpen,
-      "data-testid": "menu-button",
-      color: "inherit",
-      className: classes.button
-    },
-    /* @__PURE__ */ React.createElement(MoreVert, null)
-  ), /* @__PURE__ */ React.createElement(
-    Popover,
-    {
-      "aria-labelledby": "long-menu",
-      open: Boolean(anchorEl),
-      onClose,
-      anchorEl,
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      transformOrigin: { vertical: "top", horizontal: "right" }
-    },
-    /* @__PURE__ */ React.createElement(MenuList, null, onCreateClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onCreateClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(CreateComponentIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Create" })), onEditorClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onEditorClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(Edit, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Template Editor" })), onActionsClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onActionsClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(DescriptionIcon, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Installed Actions" })), onTasksClicked && /* @__PURE__ */ React.createElement(MenuItem, { onClick: onTasksClicked }, /* @__PURE__ */ React.createElement(ListItemIcon, null, /* @__PURE__ */ React.createElement(List$1, { fontSize: "small" })), /* @__PURE__ */ React.createElement(ListItemText, { primary: "Task List" })))
-  ));
-}
-
-export { DefaultTemplateOutputs, EmbeddableWorkflow, Form, ReviewState, ScaffolderField, ScaffolderPageContextMenu, Stepper, TaskLogStream, TaskSteps, TemplateCard, TemplateCategoryPicker, TemplateGroup, TemplateGroups, Workflow, createAsyncValidators, createFieldValidation, extractSchemaFromStep, useFilteredSchemaProperties, useFormDataFromQuery, useTemplateParameterSchema, useTemplateSchema };
+export { Stepper } from './next/components/Stepper/Stepper.esm.js';
+export { createAsyncValidators } from './next/components/Stepper/createAsyncValidators.esm.js';
+export { TemplateCard } from './next/components/TemplateCard/TemplateCard.esm.js';
+export { ReviewState } from './next/components/ReviewState/ReviewState.esm.js';
+export { TemplateGroup } from './next/components/TemplateGroup/TemplateGroup.esm.js';
+export { TemplateGroups } from './next/components/TemplateGroups/TemplateGroups.esm.js';
+export { EmbeddableWorkflow, Workflow } from './next/components/Workflow/Workflow.esm.js';
+export { DefaultTemplateOutputs } from './next/components/TemplateOutputs/DefaultTemplateOutputs.esm.js';
+export { Form } from './next/components/Form/Form.esm.js';
+export { TaskSteps } from './next/components/TaskSteps/TaskSteps.esm.js';
+export { TaskLogStream } from './next/components/TaskLogStream/TaskLogStream.esm.js';
+export { TemplateCategoryPicker } from './next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js';
+export { ScaffolderPageContextMenu } from './next/components/ScaffolderPageContextMenu/ScaffolderPageContextMenu.esm.js';
+export { ScaffolderField } from './next/components/ScaffolderField/ScaffolderField.esm.js';
+export { createFieldValidation, extractSchemaFromStep } from './next/lib/schema.esm.js';
+export { useFormDataFromQuery } from './next/hooks/useFormDataFromQuery.esm.js';
+export { useTemplateSchema } from './next/hooks/useTemplateSchema.esm.js';
+export { useTemplateParameterSchema } from './next/hooks/useTemplateParameterSchema.esm.js';
+export { useFilteredSchemaProperties } from './next/hooks/useFilteredSchemaProperties.esm.js';
 //# sourceMappingURL=alpha.esm.js.map