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

package/dist/next/components/Stepper/createAsyncValidators.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createAsyncValidators.esm.js","sources":["../../../../src/next/components/Stepper/createAsyncValidators.ts"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { FieldValidation } from '@rjsf/utils';\nimport type { JsonObject, JsonValue } from '@backstage/types';\nimport { ApiHolder } from '@backstage/core-plugin-api';\nimport {\n  Draft07 as JSONSchema,\n  JsonError,\n  JsonSchema,\n} from 'json-schema-library';\nimport { createFieldValidation, extractSchemaFromStep } from '../../lib';\nimport {\n  CustomFieldValidator,\n  FieldExtensionUiSchema,\n} from '@backstage/plugin-scaffolder-react';\nimport { isObject } from './utils';\n\n/** @alpha */\nexport type FormValidation = {\n  [name: string]: FieldValidation | FormValidation;\n};\n\nconst isJsonError = (\n  value: JsonError | JsonSchema,\n): value is { type: 'error'; message: string } =>\n  'type' in value && value.type === 'error';\n\n/** @alpha */\nexport const createAsyncValidators = (\n  rootSchema: JsonObject,\n  validators: Record<\n    string,\n    undefined | CustomFieldValidator<unknown, unknown>\n  >,\n  context: {\n    apiHolder: ApiHolder;\n  },\n) => {\n  async function validate(\n    formData: JsonObject,\n    pathPrefix: string = '#',\n    current: JsonObject = formData,\n  ): Promise<FormValidation> {\n    const parsedSchema = new JSONSchema(rootSchema);\n    const formValidation: FormValidation = {};\n\n    const validateForm = async (\n      validatorName: string,\n      key: string,\n      value: JsonValue | undefined,\n      schema: JsonObject,\n      uiSchema: FieldExtensionUiSchema<unknown, unknown>,\n    ) => {\n      const validator = validators[validatorName];\n      if (validator) {\n        const fieldValidation = createFieldValidation();\n        try {\n          await validator(value, fieldValidation, {\n            ...context,\n            formData,\n            schema,\n            uiSchema,\n          });\n        } catch (ex) {\n          fieldValidation.addError(ex.message);\n        }\n        formValidation[key] = fieldValidation;\n      }\n    };\n\n    for (const [key, value] of Object.entries(current)) {\n      const pointer = `${pathPrefix}/${key}`;\n      const definitionInSchema = parsedSchema.getSchema({\n        pointer,\n        data: formData,\n      });\n\n      if (!definitionInSchema) {\n        continue;\n      }\n\n      if (isJsonError(definitionInSchema)) {\n        throw new Error(definitionInSchema.message);\n      }\n\n      const { schema, uiSchema } = extractSchemaFromStep(\n        definitionInSchema as JsonObject,\n      );\n\n      const hasItems = definitionInSchema && definitionInSchema.items;\n\n      const doValidateItem = async (\n        propValue: JsonObject,\n        itemSchema: JsonObject,\n        itemUiSchema: FieldExtensionUiSchema<unknown, unknown>,\n      ) => {\n        await validateForm(\n          propValue['ui:field'] as string,\n          key,\n          value,\n          itemSchema,\n          itemUiSchema,\n        );\n      };\n\n      const doValidate = async (propValue: JsonObject) => {\n        if ('ui:field' in propValue) {\n          const { schema: itemsSchema, uiSchema: itemsUiSchema } =\n            extractSchemaFromStep(definitionInSchema.items);\n          await doValidateItem(propValue, itemsSchema, itemsUiSchema);\n        }\n      };\n\n      if ('ui:field' in definitionInSchema) {\n        await doValidateItem(definitionInSchema, schema, uiSchema);\n      } else if (hasItems && 'ui:field' in definitionInSchema.items) {\n        await doValidate(definitionInSchema.items);\n      } else if (hasItems && definitionInSchema.items.type === 'object') {\n        const properties = (definitionInSchema.items?.properties ??\n          []) as JsonObject[];\n        for (const [, propValue] of Object.entries(properties)) {\n          await doValidate(propValue);\n        }\n      } else if (isObject(value)) {\n        formValidation[key] = await validate(formData, pointer, value);\n      }\n    }\n\n    return formValidation;\n  }\n\n  return async (formData: JsonObject) => {\n    return await validate(formData);\n  };\n};\n"],"names":["JSONSchema"],"mappings":"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"}

package/dist/next/components/Stepper/utils.esm.js

@@ -0,0 +1,27 @@
+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);
+}
+
+export { hasErrors, isObject };
+//# sourceMappingURL=utils.esm.js.map

package/dist/next/components/Stepper/utils.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.esm.js","sources":["../../../../src/next/components/Stepper/utils.ts"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport type { JsonObject, JsonValue } from '@backstage/types';\nimport type { FieldValidation } from '@rjsf/utils';\nimport { FormValidation } from './createAsyncValidators';\n\nfunction isFieldValidation(error: any): error is FieldValidation {\n  return !!error && '__errors' in error;\n}\n\nexport function hasErrors(errors?: FormValidation): boolean {\n  if (!errors) {\n    return false;\n  }\n\n  for (const error of Object.values(errors)) {\n    if (isFieldValidation(error)) {\n      if ((error.__errors ?? []).length > 0) {\n        return true;\n      }\n\n      continue;\n    }\n\n    if (hasErrors(error)) {\n      return true;\n    }\n  }\n\n  return false;\n}\n\nexport function isObject(value: JsonValue | undefined): value is JsonObject {\n  return typeof value === 'object' && value !== null && !Array.isArray(value);\n}\n"],"names":[],"mappings":"AAmBA,SAAS,kBAAkB,KAAsC,EAAA;AAC/D,EAAO,OAAA,CAAC,CAAC,KAAA,IAAS,UAAc,IAAA,KAAA,CAAA;AAClC,CAAA;AAEO,SAAS,UAAU,MAAkC,EAAA;AAvB5D,EAAA,IAAA,EAAA,CAAA;AAwBE,EAAA,IAAI,CAAC,MAAQ,EAAA;AACX,IAAO,OAAA,KAAA,CAAA;AAAA,GACT;AAEA,EAAA,KAAA,MAAW,KAAS,IAAA,MAAA,CAAO,MAAO,CAAA,MAAM,CAAG,EAAA;AACzC,IAAI,IAAA,iBAAA,CAAkB,KAAK,CAAG,EAAA;AAC5B,MAAA,IAAA,CAAA,CAAK,WAAM,QAAN,KAAA,IAAA,GAAA,EAAA,GAAkB,EAAC,EAAG,SAAS,CAAG,EAAA;AACrC,QAAO,OAAA,IAAA,CAAA;AAAA,OACT;AAEA,MAAA,SAAA;AAAA,KACF;AAEA,IAAI,IAAA,SAAA,CAAU,KAAK,CAAG,EAAA;AACpB,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACF;AAEA,EAAO,OAAA,KAAA,CAAA;AACT,CAAA;AAEO,SAAS,SAAS,KAAmD,EAAA;AAC1E,EAAO,OAAA,OAAO,UAAU,QAAY,IAAA,KAAA,KAAU,QAAQ,CAAC,KAAA,CAAM,QAAQ,KAAK,CAAA,CAAA;AAC5E;;;;"}

package/dist/next/components/TaskLogStream/TaskLogStream.esm.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { LogViewer } from '@backstage/core-components';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  root: {
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  }
+});
+const TaskLogStream = (props) => {
+  const styles = useStyles();
+  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")
+    }
+  ));
+};
+
+export { TaskLogStream };
+//# sourceMappingURL=TaskLogStream.esm.js.map

package/dist/next/components/TaskLogStream/TaskLogStream.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskLogStream.esm.js","sources":["../../../../src/next/components/TaskLogStream/TaskLogStream.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { LogViewer } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n    position: 'relative',\n  },\n});\n\n/**\n * The text of the event stream\n *\n * @alpha\n */\nexport const TaskLogStream = (props: { logs: { [k: string]: string[] } }) => {\n  const styles = useStyles();\n  return (\n    <div className={styles.root}>\n      <LogViewer\n        text={Object.values(props.logs)\n          .map(l => l.join('\\n'))\n          .filter(Boolean)\n          .join('\\n')}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAmBA,MAAM,YAAY,UAAW,CAAA;AAAA,EAC3B,IAAM,EAAA;AAAA,IACJ,KAAO,EAAA,MAAA;AAAA,IACP,MAAQ,EAAA,MAAA;AAAA,IACR,QAAU,EAAA,UAAA;AAAA,GACZ;AACF,CAAC,CAAA,CAAA;AAOY,MAAA,aAAA,GAAgB,CAAC,KAA+C,KAAA;AAC3E,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AACzB,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,IACrB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,MAAM,MAAO,CAAA,MAAA,CAAO,KAAM,CAAA,IAAI,EAC3B,GAAI,CAAA,CAAA,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,IAAI,CAAC,CAAA,CACrB,OAAO,OAAO,CAAA,CACd,KAAK,IAAI,CAAA;AAAA,KAAA;AAAA,GAEhB,CAAA,CAAA;AAEJ;;;;"}

package/dist/next/components/TaskSteps/StepIcon.esm.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core/styles';
+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';
+
+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()
+  );
+};
+
+export { StepIcon };
+//# sourceMappingURL=StepIcon.esm.js.map

package/dist/next/components/TaskSteps/StepIcon.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepIcon.esm.js","sources":["../../../../src/next/components/TaskSteps/StepIcon.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport { makeStyles } from '@material-ui/core/styles';\nimport RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline';\nimport PanoramaFishEyeIcon from '@material-ui/icons/PanoramaFishEye';\nimport classNames from 'classnames';\nimport CheckCircleOutline from '@material-ui/icons/CheckCircleOutline';\nimport ErrorOutline from '@material-ui/icons/ErrorOutline';\n\nconst useStepIconStyles = makeStyles(theme => ({\n  root: {\n    color: theme.palette.text.disabled,\n  },\n  completed: {\n    color: theme.palette.status.ok,\n  },\n  error: {\n    color: theme.palette.status.error,\n  },\n}));\n\nexport const StepIcon = (props: StepIconProps & { skipped: boolean }) => {\n  const classes = useStepIconStyles();\n  const { active, completed, error, skipped } = props;\n\n  const getMiddle = () => {\n    if (active) {\n      return <CircularProgress size=\"20px\" />;\n    }\n    if (completed) {\n      return <CheckCircleOutline />;\n    }\n\n    if (error) {\n      return <ErrorOutline />;\n    }\n\n    if (skipped) {\n      return <RemoveCircleOutline />;\n    }\n\n    return <PanoramaFishEyeIcon />;\n  };\n\n  return (\n    <div\n      className={classNames(classes.root, {\n        [classes.completed]: completed,\n        [classes.error]: error,\n      })}\n    >\n      {getMiddle()}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AA0BA,MAAM,iBAAA,GAAoB,WAAW,CAAU,KAAA,MAAA;AAAA,EAC7C,IAAM,EAAA;AAAA,IACJ,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,IAAK,CAAA,QAAA;AAAA,GAC5B;AAAA,EACA,SAAW,EAAA;AAAA,IACT,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,EAAA;AAAA,GAC9B;AAAA,EACA,KAAO,EAAA;AAAA,IACL,KAAA,EAAO,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,KAAA;AAAA,GAC9B;AACF,CAAE,CAAA,CAAA,CAAA;AAEW,MAAA,QAAA,GAAW,CAAC,KAAgD,KAAA;AACvE,EAAA,MAAM,UAAU,iBAAkB,EAAA,CAAA;AAClC,EAAA,MAAM,EAAE,MAAA,EAAQ,SAAW,EAAA,KAAA,EAAO,SAAY,GAAA,KAAA,CAAA;AAE9C,EAAA,MAAM,YAAY,MAAM;AACtB,IAAA,IAAI,MAAQ,EAAA;AACV,MAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,gBAAiB,EAAA,EAAA,IAAA,EAAK,MAAO,EAAA,CAAA,CAAA;AAAA,KACvC;AACA,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,2CAAQ,kBAAmB,EAAA,IAAA,CAAA,CAAA;AAAA,KAC7B;AAEA,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,2CAAQ,YAAa,EAAA,IAAA,CAAA,CAAA;AAAA,KACvB;AAEA,IAAA,IAAI,OAAS,EAAA;AACX,MAAA,2CAAQ,mBAAoB,EAAA,IAAA,CAAA,CAAA;AAAA,KAC9B;AAEA,IAAA,2CAAQ,mBAAoB,EAAA,IAAA,CAAA,CAAA;AAAA,GAC9B,CAAA;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAW,CAAA,OAAA,CAAQ,IAAM,EAAA;AAAA,QAClC,CAAC,OAAQ,CAAA,SAAS,GAAG,SAAA;AAAA,QACrB,CAAC,OAAQ,CAAA,KAAK,GAAG,KAAA;AAAA,OAClB,CAAA;AAAA,KAAA;AAAA,IAEA,SAAU,EAAA;AAAA,GACb,CAAA;AAEJ;;;;"}

package/dist/next/components/TaskSteps/StepTime.esm.js

@@ -0,0 +1,36 @@
+import React, { useState, useCallback } from 'react';
+import useInterval from 'react-use/esm/useInterval';
+import { DateTime, Interval } from 'luxon';
+import humanizeDuration from 'humanize-duration';
+import Typography from '@material-ui/core/Typography';
+import { useMountEffect } from '@react-hookz/web';
+
+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);
+};
+
+export { StepTime };
+//# sourceMappingURL=StepTime.esm.js.map

package/dist/next/components/TaskSteps/StepTime.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTime.esm.js","sources":["../../../../src/next/components/TaskSteps/StepTime.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React, { useCallback, useState } from 'react';\nimport useInterval from 'react-use/esm/useInterval';\nimport { DateTime, Interval } from 'luxon';\nimport humanizeDuration from 'humanize-duration';\nimport Typography from '@material-ui/core/Typography';\nimport { useMountEffect } from '@react-hookz/web';\n\nexport const StepTime = (props: {\n  step: {\n    id: string;\n    name: string;\n    startedAt?: string;\n    endedAt?: string;\n  };\n}) => {\n  const [time, setTime] = useState('');\n  const { step } = props;\n\n  const getDelay = () => {\n    if (step.startedAt && step.endedAt && time) {\n      return null;\n    }\n    if (step.startedAt && step.endedAt) {\n      return 1;\n    }\n    return 1000;\n  };\n\n  const calculate = useCallback(() => {\n    if (!step.startedAt) {\n      setTime('');\n      return;\n    }\n\n    const end = step.endedAt\n      ? DateTime.fromISO(step.endedAt)\n      : DateTime.local();\n\n    const startedAt = DateTime.fromISO(step.startedAt);\n    const formatted = Interval.fromDateTimes(startedAt, end)\n      .toDuration()\n      .valueOf();\n\n    setTime(humanizeDuration(formatted, { round: true }));\n  }, [step.endedAt, step.startedAt]);\n\n  useMountEffect(calculate);\n  useInterval(calculate, getDelay());\n\n  return <Typography variant=\"caption\">{time}</Typography>;\n};\n"],"names":[],"mappings":";;;;;;;AAsBa,MAAA,QAAA,GAAW,CAAC,KAOnB,KAAA;AACJ,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AACnC,EAAM,MAAA,EAAE,MAAS,GAAA,KAAA,CAAA;AAEjB,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,IAAI,IAAK,CAAA,SAAA,IAAa,IAAK,CAAA,OAAA,IAAW,IAAM,EAAA;AAC1C,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AACA,IAAI,IAAA,IAAA,CAAK,SAAa,IAAA,IAAA,CAAK,OAAS,EAAA;AAClC,MAAO,OAAA,CAAA,CAAA;AAAA,KACT;AACA,IAAO,OAAA,GAAA,CAAA;AAAA,GACT,CAAA;AAEA,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAI,IAAA,CAAC,KAAK,SAAW,EAAA;AACnB,MAAA,OAAA,CAAQ,EAAE,CAAA,CAAA;AACV,MAAA,OAAA;AAAA,KACF;AAEA,IAAM,MAAA,GAAA,GAAM,KAAK,OACb,GAAA,QAAA,CAAS,QAAQ,IAAK,CAAA,OAAO,CAC7B,GAAA,QAAA,CAAS,KAAM,EAAA,CAAA;AAEnB,IAAA,MAAM,SAAY,GAAA,QAAA,CAAS,OAAQ,CAAA,IAAA,CAAK,SAAS,CAAA,CAAA;AACjD,IAAM,MAAA,SAAA,GAAY,SAAS,aAAc,CAAA,SAAA,EAAW,GAAG,CACpD,CAAA,UAAA,GACA,OAAQ,EAAA,CAAA;AAEX,IAAA,OAAA,CAAQ,iBAAiB,SAAW,EAAA,EAAE,KAAO,EAAA,IAAA,EAAM,CAAC,CAAA,CAAA;AAAA,KACnD,CAAC,IAAA,CAAK,OAAS,EAAA,IAAA,CAAK,SAAS,CAAC,CAAA,CAAA;AAEjC,EAAA,cAAA,CAAe,SAAS,CAAA,CAAA;AACxB,EAAY,WAAA,CAAA,SAAA,EAAW,UAAU,CAAA,CAAA;AAEjC,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,UAAA,EAAA,EAAW,OAAQ,EAAA,SAAA,EAAA,EAAW,IAAK,CAAA,CAAA;AAC7C;;;;"}

package/dist/next/components/TaskSteps/TaskBorder.esm.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import LinearProgress from '@material-ui/core/LinearProgress';
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  failed: {
+    backgroundColor: theme.palette.error.main
+  },
+  success: {
+    backgroundColor: theme.palette.success.main
+  }
+}));
+const TaskBorder = (props) => {
+  const styles = useStyles();
+  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
+    }
+  );
+};
+
+export { TaskBorder };
+//# sourceMappingURL=TaskBorder.esm.js.map

package/dist/next/components/TaskSteps/TaskBorder.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskBorder.esm.js","sources":["../../../../src/next/components/TaskSteps/TaskBorder.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport LinearProgress from '@material-ui/core/LinearProgress';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles(theme => ({\n  failed: {\n    backgroundColor: theme.palette.error.main,\n  },\n  success: {\n    backgroundColor: theme.palette.success.main,\n  },\n}));\n\n/**\n * The visual progress of the task event stream\n */\nexport const TaskBorder = (props: {\n  isComplete: boolean;\n  isError: boolean;\n}) => {\n  const styles = useStyles();\n\n  if (!props.isComplete) {\n    return <LinearProgress variant=\"indeterminate\" />;\n  }\n\n  return (\n    <LinearProgress\n      variant=\"determinate\"\n      classes={{ bar: props.isError ? styles.failed : styles.success }}\n      value={100}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAoBA,MAAM,SAAA,GAAY,WAAW,CAAU,KAAA,MAAA;AAAA,EACrC,MAAQ,EAAA;AAAA,IACN,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,KAAM,CAAA,IAAA;AAAA,GACvC;AAAA,EACA,OAAS,EAAA;AAAA,IACP,eAAA,EAAiB,KAAM,CAAA,OAAA,CAAQ,OAAQ,CAAA,IAAA;AAAA,GACzC;AACF,CAAE,CAAA,CAAA,CAAA;AAKW,MAAA,UAAA,GAAa,CAAC,KAGrB,KAAA;AACJ,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,EAAI,IAAA,CAAC,MAAM,UAAY,EAAA;AACrB,IAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,cAAe,EAAA,EAAA,OAAA,EAAQ,eAAgB,EAAA,CAAA,CAAA;AAAA,GACjD;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,aAAA;AAAA,MACR,OAAA,EAAS,EAAE,GAAK,EAAA,KAAA,CAAM,UAAU,MAAO,CAAA,MAAA,GAAS,OAAO,OAAQ,EAAA;AAAA,MAC/D,KAAO,EAAA,GAAA;AAAA,KAAA;AAAA,GACT,CAAA;AAEJ;;;;"}

package/dist/next/components/TaskSteps/TaskSteps.esm.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import MuiStepper from '@material-ui/core/Stepper';
+import MuiStep from '@material-ui/core/Step';
+import MuiStepButton from '@material-ui/core/StepButton';
+import MuiStepLabel from '@material-ui/core/StepLabel';
+import Box from '@material-ui/core/Box';
+import Paper from '@material-ui/core/Paper';
+import { StepIcon } from './StepIcon.esm.js';
+import { StepTime } from './StepTime.esm.js';
+import { TaskBorder } from './TaskBorder.esm.js';
+
+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 })
+      )));
+    })
+  )));
+};
+
+export { TaskSteps };
+//# sourceMappingURL=TaskSteps.esm.js.map

package/dist/next/components/TaskSteps/TaskSteps.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TaskSteps.esm.js","sources":["../../../../src/next/components/TaskSteps/TaskSteps.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport MuiStepper from '@material-ui/core/Stepper';\nimport MuiStep from '@material-ui/core/Step';\nimport MuiStepButton from '@material-ui/core/StepButton';\nimport MuiStepLabel from '@material-ui/core/StepLabel';\nimport { StepIconProps } from '@material-ui/core/StepIcon';\nimport Box from '@material-ui/core/Box';\nimport Paper from '@material-ui/core/Paper';\nimport { TaskStep } from '@backstage/plugin-scaffolder-common';\nimport { StepIcon } from './StepIcon';\nimport { StepTime } from './StepTime';\nimport { TaskBorder } from './TaskBorder';\nimport { ScaffolderStep } from '@backstage/plugin-scaffolder-react';\n\n/**\n * Props for the TaskSteps component\n *\n * @alpha\n */\nexport interface TaskStepsProps {\n  steps: (TaskStep & ScaffolderStep)[];\n  activeStep?: number;\n  isComplete?: boolean;\n  isError?: boolean;\n}\n\n/**\n * The visual stepper of the task event stream\n *\n * @alpha\n */\nexport const TaskSteps = (props: TaskStepsProps) => {\n  return (\n    <Paper style={{ position: 'relative', overflow: 'hidden' }}>\n      <TaskBorder\n        isComplete={props.isComplete ?? false}\n        isError={props.isError ?? false}\n      />\n      <Box padding={2}>\n        <MuiStepper\n          activeStep={props.activeStep}\n          alternativeLabel\n          variant=\"elevation\"\n          style={{ overflowX: 'auto' }}\n        >\n          {props.steps.map(step => {\n            const isCompleted = step.status === 'completed';\n            const isFailed = step.status === 'failed';\n            const isActive = step.status === 'processing';\n            const isSkipped = step.status === 'skipped';\n            const stepIconProps: Partial<StepIconProps & { skipped: boolean }> =\n              {\n                completed: isCompleted,\n                error: isFailed,\n                active: isActive,\n                skipped: isSkipped,\n              };\n\n            return (\n              <MuiStep key={step.id}>\n                <MuiStepButton>\n                  <MuiStepLabel\n                    StepIconProps={stepIconProps}\n                    StepIconComponent={StepIcon}\n                    data-testid=\"step-label\"\n                  >\n                    <Box>{step.name}</Box>\n                    {!isSkipped && <StepTime step={step} />}\n                  </MuiStepLabel>\n                </MuiStepButton>\n              </MuiStep>\n            );\n          })}\n        </MuiStepper>\n      </Box>\n    </Paper>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA8Ca,MAAA,SAAA,GAAY,CAAC,KAA0B,KAAA;AA9CpD,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA+CE,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAM,KAAO,EAAA,EAAE,UAAU,UAAY,EAAA,QAAA,EAAU,UAC9C,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAA,CAAY,EAAM,GAAA,KAAA,CAAA,UAAA,KAAN,IAAoB,GAAA,EAAA,GAAA,KAAA;AAAA,MAChC,OAAA,EAAA,CAAS,EAAM,GAAA,KAAA,CAAA,OAAA,KAAN,IAAiB,GAAA,EAAA,GAAA,KAAA;AAAA,KAAA;AAAA,GAE5B,kBAAA,KAAA,CAAA,aAAA,CAAC,GAAI,EAAA,EAAA,OAAA,EAAS,CACZ,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAY,KAAM,CAAA,UAAA;AAAA,MAClB,gBAAgB,EAAA,IAAA;AAAA,MAChB,OAAQ,EAAA,WAAA;AAAA,MACR,KAAA,EAAO,EAAE,SAAA,EAAW,MAAO,EAAA;AAAA,KAAA;AAAA,IAE1B,KAAA,CAAM,KAAM,CAAA,GAAA,CAAI,CAAQ,IAAA,KAAA;AACvB,MAAM,MAAA,WAAA,GAAc,KAAK,MAAW,KAAA,WAAA,CAAA;AACpC,MAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,QAAA,CAAA;AACjC,MAAM,MAAA,QAAA,GAAW,KAAK,MAAW,KAAA,YAAA,CAAA;AACjC,MAAM,MAAA,SAAA,GAAY,KAAK,MAAW,KAAA,SAAA,CAAA;AAClC,MAAA,MAAM,aACJ,GAAA;AAAA,QACE,SAAW,EAAA,WAAA;AAAA,QACX,KAAO,EAAA,QAAA;AAAA,QACP,MAAQ,EAAA,QAAA;AAAA,QACR,OAAS,EAAA,SAAA;AAAA,OACX,CAAA;AAEF,MAAA,2CACG,OAAQ,EAAA,EAAA,GAAA,EAAK,IAAK,CAAA,EAAA,EAAA,sCAChB,aACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,aAAe,EAAA,aAAA;AAAA,UACf,iBAAmB,EAAA,QAAA;AAAA,UACnB,aAAY,EAAA,YAAA;AAAA,SAAA;AAAA,wBAEZ,KAAA,CAAA,aAAA,CAAC,GAAK,EAAA,IAAA,EAAA,IAAA,CAAK,IAAK,CAAA;AAAA,QACf,CAAC,SAAA,oBAAc,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EAAS,IAAY,EAAA,CAAA;AAAA,OAEzC,CACF,CAAA,CAAA;AAAA,KAEH,CAAA;AAAA,GAEL,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/next/components/TemplateCard/CardHeader.esm.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { ItemCardHeader } from '@backstage/core-components';
+import { FavoriteEntity } from '@backstage/plugin-catalog-react';
+
+const useStyles = 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({
+    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 }
+    }
+  );
+};
+
+export { CardHeader };
+//# sourceMappingURL=CardHeader.esm.js.map

package/dist/next/components/TemplateCard/CardHeader.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.esm.js","sources":["../../../../src/next/components/TemplateCard/CardHeader.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport { Theme, makeStyles, useTheme } from '@material-ui/core/styles';\nimport { ItemCardHeader } from '@backstage/core-components';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport { FavoriteEntity } from '@backstage/plugin-catalog-react';\n\nconst useStyles = makeStyles<\n  Theme,\n  {\n    cardFontColor: string;\n    cardBackgroundImage: string;\n  }\n>(() => ({\n  header: {\n    backgroundImage: ({ cardBackgroundImage }) => cardBackgroundImage,\n    color: ({ cardFontColor }) => cardFontColor,\n  },\n  subtitleWrapper: {\n    display: 'flex',\n    justifyContent: 'space-between',\n  },\n}));\n\n/**\n * Props for the CardHeader component\n */\nexport interface CardHeaderProps {\n  template: TemplateEntityV1beta3;\n}\n\n/**\n * The Card Header with the background for the TemplateCard.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const {\n    template: {\n      metadata: { title, name },\n      spec: { type },\n    },\n  } = props;\n  const { getPageTheme } = useTheme();\n  const themeForType = getPageTheme({ themeId: type });\n\n  const styles = useStyles({\n    cardFontColor: themeForType.fontColor,\n    cardBackgroundImage: themeForType.backgroundImage,\n  });\n\n  const SubtitleComponent = (\n    <div className={styles.subtitleWrapper}>\n      <div>{type}</div>\n      <div>\n        <FavoriteEntity entity={props.template} style={{ padding: 0 }} />\n      </div>\n    </div>\n  );\n\n  return (\n    <ItemCardHeader\n      title={title ?? name}\n      subtitle={SubtitleComponent}\n      classes={{ root: styles.header }}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AAsBA,MAAM,SAAA,GAAY,WAMhB,OAAO;AAAA,EACP,MAAQ,EAAA;AAAA,IACN,eAAiB,EAAA,CAAC,EAAE,mBAAA,EAA0B,KAAA,mBAAA;AAAA,IAC9C,KAAO,EAAA,CAAC,EAAE,aAAA,EAAoB,KAAA,aAAA;AAAA,GAChC;AAAA,EACA,eAAiB,EAAA;AAAA,IACf,OAAS,EAAA,MAAA;AAAA,IACT,cAAgB,EAAA,eAAA;AAAA,GAClB;AACF,CAAE,CAAA,CAAA,CAAA;AAYW,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AACpD,EAAM,MAAA;AAAA,IACJ,QAAU,EAAA;AAAA,MACR,QAAA,EAAU,EAAE,KAAA,EAAO,IAAK,EAAA;AAAA,MACxB,IAAA,EAAM,EAAE,IAAK,EAAA;AAAA,KACf;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,EAAE,YAAa,EAAA,GAAI,QAAS,EAAA,CAAA;AAClC,EAAA,MAAM,YAAe,GAAA,YAAA,CAAa,EAAE,OAAA,EAAS,MAAM,CAAA,CAAA;AAEnD,EAAA,MAAM,SAAS,SAAU,CAAA;AAAA,IACvB,eAAe,YAAa,CAAA,SAAA;AAAA,IAC5B,qBAAqB,YAAa,CAAA,eAAA;AAAA,GACnC,CAAA,CAAA;AAED,EAAM,MAAA,iBAAA,uCACH,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,eACrB,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA,EAAA,IAAK,CACX,kBAAA,KAAA,CAAA,aAAA,CAAC,6BACE,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,EAAe,MAAQ,EAAA,KAAA,CAAM,QAAU,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,CAAA,EAAK,EAAA,CACjE,CACF,CAAA,CAAA;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAO,KAAS,IAAA,IAAA,GAAA,KAAA,GAAA,IAAA;AAAA,MAChB,QAAU,EAAA,iBAAA;AAAA,MACV,OAAS,EAAA,EAAE,IAAM,EAAA,MAAA,CAAO,MAAO,EAAA;AAAA,KAAA;AAAA,GACjC,CAAA;AAEJ;;;;"}

package/dist/next/components/TemplateCard/CardLink.esm.js

@@ -0,0 +1,17 @@
+import { Link } from '@backstage/core-components';
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+const useStyles = makeStyles(() => ({
+  linkText: {
+    display: "inline-flex",
+    alignItems: "center"
+  }
+}));
+const CardLink = ({ icon: Icon, text, url }) => {
+  const styles = useStyles();
+  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));
+};
+
+export { CardLink };
+//# sourceMappingURL=CardLink.esm.js.map

package/dist/next/components/TemplateCard/CardLink.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLink.esm.js","sources":["../../../../src/next/components/TemplateCard/CardLink.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { IconComponent } from '@backstage/core-plugin-api';\nimport { Link } from '@backstage/core-components';\nimport { makeStyles } from '@material-ui/core/styles';\nimport React from 'react';\n\ninterface CardLinkProps {\n  icon: IconComponent;\n  text: string;\n  url: string;\n}\n\nconst useStyles = makeStyles(() => ({\n  linkText: {\n    display: 'inline-flex',\n    alignItems: 'center',\n  },\n}));\n\nexport const CardLink = ({ icon: Icon, text, url }: CardLinkProps) => {\n  const styles = useStyles();\n\n  return (\n    <div className={styles.linkText}>\n      <Icon fontSize=\"small\" />\n      <Link style={{ marginLeft: '8px' }} to={url}>\n        {text || url}\n      </Link>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AA2BA,MAAM,SAAA,GAAY,WAAW,OAAO;AAAA,EAClC,QAAU,EAAA;AAAA,IACR,OAAS,EAAA,aAAA;AAAA,IACT,UAAY,EAAA,QAAA;AAAA,GACd;AACF,CAAE,CAAA,CAAA,CAAA;AAEK,MAAM,WAAW,CAAC,EAAE,MAAM,IAAM,EAAA,IAAA,EAAM,KAAyB,KAAA;AACpE,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,4BACpB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,EAAK,UAAS,OAAQ,EAAA,CAAA,sCACtB,IAAK,EAAA,EAAA,KAAA,EAAO,EAAE,UAAY,EAAA,KAAA,IAAS,EAAI,EAAA,GAAA,EAAA,EACrC,IAAQ,IAAA,GACX,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/next/components/TemplateCard/TemplateCard.esm.js

@@ -0,0 +1,114 @@
+import { RELATION_OWNED_BY } from '@backstage/catalog-model';
+import { MarkdownContent, UserIcon } from '@backstage/core-components';
+import { useApp } from '@backstage/core-plugin-api';
+import { getEntityRelations, EntityRefLinks } 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 Button from '@material-ui/core/Button';
+import Grid from '@material-ui/core/Grid';
+import { makeStyles } from '@material-ui/core/styles';
+import LanguageIcon from '@material-ui/icons/Language';
+import React from 'react';
+import { CardHeader } from './CardHeader.esm.js';
+import { CardLink } from './CardLink.esm.js';
+
+const useStyles = 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();
+  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"
+  ))));
+};
+
+export { TemplateCard };
+//# sourceMappingURL=TemplateCard.esm.js.map

package/dist/next/components/TemplateCard/TemplateCard.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateCard.esm.js","sources":["../../../../src/next/components/TemplateCard/TemplateCard.tsx"],"sourcesContent":["/*\n * Copyright 2022 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { RELATION_OWNED_BY } from '@backstage/catalog-model';\nimport { MarkdownContent, UserIcon } from '@backstage/core-components';\nimport { IconComponent, useApp } from '@backstage/core-plugin-api';\nimport {\n  EntityRefLinks,\n  getEntityRelations,\n} from '@backstage/plugin-catalog-react';\nimport { TemplateEntityV1beta3 } from '@backstage/plugin-scaffolder-common';\nimport Box from '@material-ui/core/Box';\nimport Card from '@material-ui/core/Card';\nimport CardActions from '@material-ui/core/CardActions';\nimport CardContent from '@material-ui/core/CardContent';\nimport Chip from '@material-ui/core/Chip';\nimport Divider from '@material-ui/core/Divider';\nimport Button from '@material-ui/core/Button';\nimport Grid from '@material-ui/core/Grid';\nimport { makeStyles, Theme } from '@material-ui/core/styles';\nimport LanguageIcon from '@material-ui/icons/Language';\nimport React from 'react';\nimport { CardHeader } from './CardHeader';\nimport { CardLink } from './CardLink';\n\nconst useStyles = makeStyles<Theme>(theme => ({\n  box: {\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    display: '-webkit-box',\n    '-webkit-line-clamp': 10,\n    '-webkit-box-orient': 'vertical',\n  },\n  markdown: {\n    /** to make the styles for React Markdown not leak into the description */\n    '& :first-child': {\n      margin: 0,\n    },\n  },\n  label: {\n    color: theme.palette.text.secondary,\n    textTransform: 'uppercase',\n    fontWeight: 'bold',\n    letterSpacing: 0.5,\n    lineHeight: 1,\n    fontSize: '0.75rem',\n  },\n  footer: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    flex: 1,\n    alignItems: 'center',\n  },\n  ownedBy: {\n    display: 'flex',\n    alignItems: 'center',\n    flex: 1,\n    color: theme.palette.link,\n  },\n}));\n\n/**\n * The Props for the {@link TemplateCard} component\n * @alpha\n */\nexport interface TemplateCardProps {\n  template: TemplateEntityV1beta3;\n  additionalLinks?: {\n    icon: IconComponent;\n    text: string;\n    url: string;\n  }[];\n\n  onSelected?: (template: TemplateEntityV1beta3) => void;\n}\n\n/**\n * The `TemplateCard` component that is rendered in a list for each template\n * @alpha\n */\nexport const TemplateCard = (props: TemplateCardProps) => {\n  const { template } = props;\n  const styles = useStyles();\n  const ownedByRelations = getEntityRelations(template, RELATION_OWNED_BY);\n  const app = useApp();\n  const iconResolver = (key?: string): IconComponent =>\n    key ? app.getSystemIcon(key) ?? LanguageIcon : LanguageIcon;\n  const hasTags = !!template.metadata.tags?.length;\n  const hasLinks =\n    !!props.additionalLinks?.length || !!template.metadata.links?.length;\n  const displayDefaultDivider = !hasTags && !hasLinks;\n\n  return (\n    <Card>\n      <CardHeader template={template} />\n      <CardContent>\n        <Grid container spacing={2}>\n          <Grid item xs={12}>\n            <Box className={styles.box}>\n              <MarkdownContent\n                className={styles.markdown}\n                content={template.metadata.description ?? 'No description'}\n              />\n            </Box>\n          </Grid>\n          {displayDefaultDivider && (\n            <Grid item xs={12}>\n              <Divider data-testid=\"template-card-separator\" />\n            </Grid>\n          )}\n          {hasTags && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--tags\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {template.metadata.tags?.map(tag => (\n                    <Grid key={`grid-${tag}`} item>\n                      <Chip\n                        style={{ margin: 0 }}\n                        size=\"small\"\n                        label={tag}\n                        key={tag}\n                      />\n                    </Grid>\n                  ))}\n                </Grid>\n              </Grid>\n            </>\n          )}\n          {hasLinks && (\n            <>\n              <Grid item xs={12}>\n                <Divider data-testid=\"template-card-separator--links\" />\n              </Grid>\n              <Grid item xs={12}>\n                <Grid container spacing={2}>\n                  {props.additionalLinks?.map(({ icon, text, url }, index) => (\n                    <Grid className={styles.linkText} item xs={6} key={index}>\n                      <CardLink icon={icon} text={text} url={url} />\n                    </Grid>\n                  ))}\n                  {template.metadata.links?.map(\n                    ({ url, icon, title }, index) => (\n                      <Grid className={styles.linkText} item xs={6} key={index}>\n                        <CardLink\n                          icon={iconResolver(icon)}\n                          text={title || url}\n                          url={url}\n                        />\n                      </Grid>\n                    ),\n                  )}\n                </Grid>\n              </Grid>\n            </>\n          )}\n        </Grid>\n      </CardContent>\n      <CardActions style={{ padding: '16px', flex: 1, alignItems: 'flex-end' }}>\n        <div className={styles.footer}>\n          <div className={styles.ownedBy}>\n            {ownedByRelations.length > 0 && (\n              <>\n                <UserIcon fontSize=\"small\" />\n                <EntityRefLinks\n                  style={{ marginLeft: '8px' }}\n                  entityRefs={ownedByRelations}\n                  defaultKind=\"Group\"\n                  hideIcons\n                />\n              </>\n            )}\n          </div>\n          <Button\n            size=\"small\"\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => props.onSelected?.(template)}\n          >\n            Choose\n          </Button>\n        </div>\n      </CardActions>\n    </Card>\n  );\n};\n"],"names":["_a"],"mappings":"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"}

package/dist/next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import capitalize from 'lodash/capitalize';
+import { Progress } from '@backstage/core-components';
+import Box from '@material-ui/core/Box';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import TextField from '@material-ui/core/TextField';
+import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+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 { useEntityTypeFilter } from '@backstage/plugin-catalog-react';
+import { useApi, alertApiRef } from '@backstage/core-plugin-api';
+
+const icon = /* @__PURE__ */ React.createElement(CheckBoxOutlineBlankIcon, { fontSize: "small" });
+const checkedIcon = /* @__PURE__ */ React.createElement(CheckBoxIcon, { fontSize: "small" });
+const useStyles = makeStyles(
+  {
+    root: {},
+    label: {}
+  },
+  { name: "ScaffolderReactTemplateCategoryPicker" }
+);
+const TemplateCategoryPicker = () => {
+  const classes = useStyles();
+  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" })
+    }
+  ));
+};
+
+export { TemplateCategoryPicker };
+//# sourceMappingURL=TemplateCategoryPicker.esm.js.map

package/dist/next/components/TemplateCategoryPicker/TemplateCategoryPicker.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateCategoryPicker.esm.js","sources":["../../../../src/next/components/TemplateCategoryPicker/TemplateCategoryPicker.tsx"],"sourcesContent":["/*\n * Copyright 2021 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport capitalize from 'lodash/capitalize';\nimport { Progress } from '@backstage/core-components';\nimport Box from '@material-ui/core/Box';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport FormControlLabel from '@material-ui/core/FormControlLabel';\nimport TextField from '@material-ui/core/TextField';\nimport Typography from '@material-ui/core/Typography';\nimport { makeStyles } from '@material-ui/core/styles';\nimport CheckBoxIcon from '@material-ui/icons/CheckBox';\nimport CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';\nimport ExpandMoreIcon from '@material-ui/icons/ExpandMore';\nimport Autocomplete from '@material-ui/lab/Autocomplete';\nimport { useEntityTypeFilter } from '@backstage/plugin-catalog-react';\nimport { alertApiRef, useApi } from '@backstage/core-plugin-api';\n\nconst icon = <CheckBoxOutlineBlankIcon fontSize=\"small\" />;\nconst checkedIcon = <CheckBoxIcon fontSize=\"small\" />;\n\n/** @alpha */\nexport type ScaffolderReactTemplateCategoryPickerClassKey = 'root' | 'label';\n\nconst useStyles = makeStyles(\n  {\n    root: {},\n    label: {},\n  },\n  { name: 'ScaffolderReactTemplateCategoryPicker' },\n);\n\n/**\n * The Category Picker that is rendered on the left side for picking\n * categories and filtering the template list.\n * @alpha\n */\nexport const TemplateCategoryPicker = () => {\n  const classes = useStyles();\n  const alertApi = useApi(alertApiRef);\n  const { error, loading, availableTypes, selectedTypes, setSelectedTypes } =\n    useEntityTypeFilter();\n\n  if (loading) return <Progress />;\n\n  if (error) {\n    alertApi.post({\n      message: `Failed to load entity types with error: ${error}`,\n      severity: 'error',\n    });\n    return null;\n  }\n\n  if (!availableTypes) return null;\n\n  return (\n    <Box className={classes.root} pb={1} pt={1}>\n      <Typography\n        className={classes.label}\n        variant=\"button\"\n        component=\"label\"\n        htmlFor=\"categories-picker\"\n      >\n        Categories\n      </Typography>\n      <Autocomplete<string, true>\n        multiple\n        id=\"categories-picker\"\n        options={availableTypes}\n        value={selectedTypes}\n        onChange={(_: object, value: string[]) => setSelectedTypes(value)}\n        renderOption={(option, { selected }) => (\n          <FormControlLabel\n            control={\n              <Checkbox\n                icon={icon}\n                checkedIcon={checkedIcon}\n                checked={selected}\n              />\n            }\n            label={capitalize(option)}\n          />\n        )}\n        size=\"small\"\n        popupIcon={<ExpandMoreIcon />}\n        renderInput={params => <TextField {...params} variant=\"outlined\" />}\n      />\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgCA,MAAM,IAAO,mBAAA,KAAA,CAAA,aAAA,CAAC,wBAAyB,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA,CAAA;AACxD,MAAM,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,YAAa,EAAA,EAAA,QAAA,EAAS,OAAQ,EAAA,CAAA,CAAA;AAKnD,MAAM,SAAY,GAAA,UAAA;AAAA,EAChB;AAAA,IACE,MAAM,EAAC;AAAA,IACP,OAAO,EAAC;AAAA,GACV;AAAA,EACA,EAAE,MAAM,uCAAwC,EAAA;AAClD,CAAA,CAAA;AAOO,MAAM,yBAAyB,MAAM;AAC1C,EAAA,MAAM,UAAU,SAAU,EAAA,CAAA;AAC1B,EAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA,CAAA;AACnC,EAAA,MAAM,EAAE,KAAO,EAAA,OAAA,EAAS,gBAAgB,aAAe,EAAA,gBAAA,KACrD,mBAAoB,EAAA,CAAA;AAEtB,EAAI,IAAA,OAAA;AAAS,IAAA,2CAAQ,QAAS,EAAA,IAAA,CAAA,CAAA;AAE9B,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,QAAA,CAAS,IAAK,CAAA;AAAA,MACZ,OAAA,EAAS,2CAA2C,KAAK,CAAA,CAAA;AAAA,MACzD,QAAU,EAAA,OAAA;AAAA,KACX,CAAA,CAAA;AACD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,IAAI,CAAC,cAAA;AAAgB,IAAO,OAAA,IAAA,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,OAAI,SAAW,EAAA,OAAA,CAAQ,MAAM,EAAI,EAAA,CAAA,EAAG,IAAI,CACvC,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,WAAW,OAAQ,CAAA,KAAA;AAAA,MACnB,OAAQ,EAAA,QAAA;AAAA,MACR,SAAU,EAAA,OAAA;AAAA,MACV,OAAQ,EAAA,mBAAA;AAAA,KAAA;AAAA,IACT,YAAA;AAAA,GAGD,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,YAAA;AAAA,IAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,EAAG,EAAA,mBAAA;AAAA,MACH,OAAS,EAAA,cAAA;AAAA,MACT,KAAO,EAAA,aAAA;AAAA,MACP,QAAU,EAAA,CAAC,CAAW,EAAA,KAAA,KAAoB,iBAAiB,KAAK,CAAA;AAAA,MAChE,YAAc,EAAA,CAAC,MAAQ,EAAA,EAAE,UACvB,qBAAA,KAAA,CAAA,aAAA;AAAA,QAAC,gBAAA;AAAA,QAAA;AAAA,UACC,OACE,kBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA;AAAA,cACA,WAAA;AAAA,cACA,OAAS,EAAA,QAAA;AAAA,aAAA;AAAA,WACX;AAAA,UAEF,KAAA,EAAO,WAAW,MAAM,CAAA;AAAA,SAAA;AAAA,OAC1B;AAAA,MAEF,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,cAAe,EAAA,IAAA,CAAA;AAAA,MAC3B,aAAa,CAAU,MAAA,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAW,GAAG,MAAA,EAAQ,SAAQ,UAAW,EAAA,CAAA;AAAA,KAAA;AAAA,GAErE,CAAA,CAAA;AAEJ;;;;"}