@kartverket/backstage-plugin-risk-scorecard 3.10.2 → 3.10.3

package/css/theme.css

@@ -55,6 +55,9 @@ Remember to prefix custom styles with 'ros-' to avoid conflicts with other plugi
   --ros-risc-status-not-published: var(--ros-orange-400);
   --ros-risc-status-error: var(--ros-red-700);
 
+  --ros-input-text-color: #757575;
+  --ros-input-disabledBackground: rgba(0, 0, 0, 0.12);
+
   /* -------Button styles------- */
   .ros-button-red {
     background-color: var(--ros-red-bright);
@@ -81,4 +84,7 @@ Remember to prefix custom styles with 'ros-' to avoid conflicts with other plugi
   --ros-risc-status-very-outdated: var(--ros-red-300);
   --ros-risc-status-not-published: var(--ros-orange-100);
   --ros-risc-status-error: var(--ros-red-700);
+
+  --ros-input-text-color: #ffffff80;
+  --ros-input-disabledBackground: rgba(255, 255, 255, 0.12);
 }

package/dist/components/common/Input.esm.js

@@ -24,7 +24,7 @@ const Input = forwardRef(
           InputProps: {
             sx: (theme) => ({
               "&.Mui-disabled": {
-                color: commonTextColor(theme, true)
+                color: commonTextColor(theme)
               }
             })
           },

package/dist/components/common/Input.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.esm.js","sources":["../../../src/components/common/Input.tsx"],"sourcesContent":["import FormControl from '@mui/material/FormControl';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport { forwardRef } from 'react';\nimport { formHelperText, formLabel } from './typography';\nimport { commonTextColor, formControlStyles } from '../../utils/style';\n\ntype Props = TextFieldProps & {\n  sublabel?: string;\n};\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  ({ label, sublabel, error, helperText, required, ...props }, ref) => {\n    return (\n      <FormControl sx={formControlStyles} error={error} required={required}>\n        {label && (\n          <FormLabel required={required} sx={formLabel}>\n            {label}\n          </FormLabel>\n        )}\n        {sublabel && (\n          <FormHelperText sx={formHelperText}>{sublabel}</FormHelperText>\n        )}\n        <TextField\n          id=\"filled-multiline-static\"\n          error={error}\n          multiline\n          fullWidth\n          variant=\"outlined\"\n          inputRef={ref}\n          InputProps={{\n            sx: theme => ({\n              '&.Mui-disabled': {\n                color: commonTextColor(theme, true),\n              },\n            }),\n          }}\n          {...props}\n        />\n        {helperText && <FormHelperText>{helperText}</FormHelperText>}\n      </FormControl>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CAAC,EAAE,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,YAAY,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnE,IAAA,uBACE,IAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAI,iBAAA,EAAmB,OAAc,QAAA,EAC/C,QAAA,EAAA;AAAA,MAAA,KAAA,oBACC,GAAA,CAAC,SAAA,EAAA,EAAU,QAAA,EAAoB,EAAA,EAAI,WAChC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAED,QAAA,oBACC,GAAA,CAAC,cAAA,EAAA,EAAe,EAAA,EAAI,gBAAiB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,sBAEhD,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,yBAAA;AAAA,UACH,KAAA;AAAA,UACA,SAAA,EAAS,IAAA;AAAA,UACT,SAAA,EAAS,IAAA;AAAA,UACT,OAAA,EAAQ,UAAA;AAAA,UACR,QAAA,EAAU,GAAA;AAAA,UACV,UAAA,EAAY;AAAA,YACV,IAAI,CAAA,KAAA,MAAU;AAAA,cACZ,gBAAA,EAAkB;AAAA,gBAChB,KAAA,EAAO,eAAA,CAAgB,KAAA,EAAO,IAAI;AAAA;AACpC,aACF;AAAA,WACF;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,UAAA,oBAAc,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,UAAA,EAAW;AAAA,KAAA,EAC7C,CAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Input.esm.js","sources":["../../../src/components/common/Input.tsx"],"sourcesContent":["import FormControl from '@mui/material/FormControl';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport TextField, { TextFieldProps } from '@mui/material/TextField';\nimport { forwardRef } from 'react';\nimport { formHelperText, formLabel } from './typography';\nimport { commonTextColor, formControlStyles } from '../../utils/style';\n\ntype Props = TextFieldProps & {\n  sublabel?: string;\n};\n\nexport const Input = forwardRef<HTMLInputElement, Props>(\n  ({ label, sublabel, error, helperText, required, ...props }, ref) => {\n    return (\n      <FormControl sx={formControlStyles} error={error} required={required}>\n        {label && (\n          <FormLabel required={required} sx={formLabel}>\n            {label}\n          </FormLabel>\n        )}\n        {sublabel && (\n          <FormHelperText sx={formHelperText}>{sublabel}</FormHelperText>\n        )}\n        <TextField\n          id=\"filled-multiline-static\"\n          error={error}\n          multiline\n          fullWidth\n          variant=\"outlined\"\n          inputRef={ref}\n          InputProps={{\n            sx: theme => ({\n              '&.Mui-disabled': {\n                color: commonTextColor(theme, true),\n              },\n            }),\n          }}\n          {...props}\n        />\n        {helperText && <FormHelperText>{helperText}</FormHelperText>}\n      </FormControl>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;AAYO,MAAM,KAAA,GAAQ,UAAA;AAAA,EACnB,CAAC,EAAE,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,YAAY,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACnE,IAAA,uBACE,IAAA,CAAC,WAAA,EAAA,EAAY,EAAA,EAAI,iBAAA,EAAmB,OAAc,QAAA,EAC/C,QAAA,EAAA;AAAA,MAAA,KAAA,oBACC,GAAA,CAAC,SAAA,EAAA,EAAU,QAAA,EAAoB,EAAA,EAAI,WAChC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MAED,QAAA,oBACC,GAAA,CAAC,cAAA,EAAA,EAAe,EAAA,EAAI,gBAAiB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,sBAEhD,GAAA;AAAA,QAAC,SAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAG,yBAAA;AAAA,UACH,KAAA;AAAA,UACA,SAAA,EAAS,IAAA;AAAA,UACT,SAAA,EAAS,IAAA;AAAA,UACT,OAAA,EAAQ,UAAA;AAAA,UACR,QAAA,EAAU,GAAA;AAAA,UACV,UAAA,EAAY;AAAA,YACV,IAAI,CAAA,KAAA,MAAU;AAAA,cACZ,gBAAA,EAAkB;AAAA,gBAChB,KAAA,EAAO,eAAA,CAAgB,KAAW;AAAA;AACpC,aACF;AAAA,WACF;AAAA,UACC,GAAG;AAAA;AAAA,OACN;AAAA,MACC,UAAA,oBAAc,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,UAAA,EAAW;AAAA,KAAA,EAC7C,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist/components/common/{MarkdownInput.esm.js → MarkdownInput/MarkdownInput.esm.js}

@@ -4,9 +4,10 @@ import FormControl from '@mui/material/FormControl';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormLabel from '@mui/material/FormLabel';
 import MDEditor from '@uiw/react-md-editor';
-import { formLabel, formHelperText } from './typography.esm.js';
-import { useTheme } from '@mui/material/styles';
-import { formControlStyles, commonBackgroundColor, commonTextColor } from '../../utils/style.esm.js';
+import { formLabel, formHelperText } from '../typography.esm.js';
+import classNames from 'classnames';
+import { getActiveTheme } from '../../../utils/utilityfunctions.esm.js';
+import styles from './MarkdownInput.module.css.esm.js';
 
 const MarkdownInput = forwardRef(
   ({
@@ -22,7 +23,6 @@ const MarkdownInput = forwardRef(
     const [markdownContent, setMarkdownContent] = useState(
       value
     );
-    const theme = useTheme();
     useEffect(() => {
       setMarkdownContent(value);
     }, [value]);
@@ -41,14 +41,18 @@ const MarkdownInput = forwardRef(
         }
       }
     };
-    return /* @__PURE__ */ jsxs(FormControl, { sx: formControlStyles, error, children: [
+    const editorClassName = classNames(styles.MarkDownInput, {
+      [styles["MarkDownInput--disabled"]]: disabled
+    });
+    return /* @__PURE__ */ jsxs(FormControl, { className: styles.MarkDownInputFormControl, error, children: [
       label && /* @__PURE__ */ jsx(FormLabel, { sx: formLabel, children: label }),
       sublabel && /* @__PURE__ */ jsx(FormHelperText, { sx: formHelperText, children: sublabel }),
       /* @__PURE__ */ jsx(
         "div",
         {
-          "data-color-mode": theme.palette.mode,
           onFocusCapture,
+          "data-color-mode": getActiveTheme(),
+          className: styles.MarkDownInputWrapper,
           children: /* @__PURE__ */ jsx(
             MDEditor,
             {
@@ -57,10 +61,7 @@ const MarkdownInput = forwardRef(
               onChange: handleMarkdownChange,
               preview: "edit",
               height: minRows ? minRows * 24 : 64,
-              style: {
-                color: commonTextColor(theme, disabled),
-                backgroundColor: commonBackgroundColor(theme, disabled)
-              }
+              className: editorClassName
             }
           )
         }

package/dist/components/common/MarkdownInput/MarkdownInput.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownInput.esm.js","sources":["../../../../src/components/common/MarkdownInput/MarkdownInput.tsx"],"sourcesContent":["import { forwardRef, useState, useEffect } from 'react';\nimport FormControl from '@mui/material/FormControl';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MDEditor from '@uiw/react-md-editor';\nimport { formHelperText, formLabel } from '../typography';\nimport { TextFieldProps } from '@material-ui/core';\nimport classNames from 'classnames';\nimport { getActiveTheme } from '../../../utils/utilityfunctions';\nimport styles from './MarkdownInput.module.css';\n\ntype Props = TextFieldProps & {\n  sublabel?: string;\n  value?: string;\n  onMarkdownChange?: (markdown: string) => void;\n  minRows?: number;\n};\n\nexport const MarkdownInput = forwardRef<HTMLDivElement, Props>(\n  (\n    {\n      label,\n      sublabel,\n      error,\n      helperText,\n      minRows,\n      value,\n      onMarkdownChange,\n      disabled = false,\n    },\n    ref,\n  ) => {\n    const [markdownContent, setMarkdownContent] = useState<string | undefined>(\n      value,\n    );\n\n    useEffect(() => {\n      setMarkdownContent(value);\n    }, [value]);\n\n    const handleMarkdownChange = (newValue: string | undefined) => {\n      setMarkdownContent(newValue || '');\n      onMarkdownChange?.(newValue || '');\n    };\n\n    const onFocusCapture = (event: React.FocusEvent<HTMLDivElement>) => {\n      if (event.relatedTarget) {\n        const root = event.currentTarget as HTMLDivElement;\n        const target = root.querySelector(\n          'textarea, [contenteditable=\"true\"]',\n        ) as HTMLElement | null;\n        if (target) {\n          setTimeout(() => target.focus());\n        }\n      }\n    };\n    const editorClassName = classNames(styles.MarkDownInput, {\n      [styles['MarkDownInput--disabled']]: disabled,\n    });\n\n    return (\n      <FormControl className={styles.MarkDownInputFormControl} error={error}>\n        {label && <FormLabel sx={formLabel}>{label}</FormLabel>}\n        {sublabel && (\n          <FormHelperText sx={formHelperText}>{sublabel}</FormHelperText>\n        )}\n        <div\n          onFocusCapture={onFocusCapture}\n          data-color-mode={getActiveTheme()}\n          className={styles.MarkDownInputWrapper}\n        >\n          <MDEditor\n            ref={ref}\n            value={markdownContent}\n            onChange={handleMarkdownChange}\n            preview=\"edit\"\n            height={minRows ? minRows * 24 : 64}\n            className={editorClassName}\n          />\n        </div>\n        {helperText && <FormHelperText>{helperText}</FormHelperText>}\n      </FormControl>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;;;;AAkBO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,CACE;AAAA,IACE,KAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,KAAA;AAAA,IACA,gBAAA;AAAA,IACA,QAAA,GAAW;AAAA,KAEb,GAAA,KACG;AACH,IAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,QAAA;AAAA,MAC5C;AAAA,KACF;AAEA,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,kBAAA,CAAmB,KAAK,CAAA;AAAA,IAC1B,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,IAAA,MAAM,oBAAA,GAAuB,CAAC,QAAA,KAAiC;AAC7D,MAAA,kBAAA,CAAmB,YAAY,EAAE,CAAA;AACjC,MAAA,gBAAA,GAAmB,YAAY,EAAE,CAAA;AAAA,IACnC,CAAA;AAEA,IAAA,MAAM,cAAA,GAAiB,CAAC,KAAA,KAA4C;AAClE,MAAA,IAAI,MAAM,aAAA,EAAe;AACvB,QAAA,MAAM,OAAO,KAAA,CAAM,aAAA;AACnB,QAAA,MAAM,SAAS,IAAA,CAAK,aAAA;AAAA,UAClB;AAAA,SACF;AACA,QAAA,IAAI,MAAA,EAAQ;AACV,UAAA,UAAA,CAAW,MAAM,MAAA,CAAO,KAAA,EAAO,CAAA;AAAA,QACjC;AAAA,MACF;AAAA,IACF,CAAA;AACA,IAAA,MAAM,eAAA,GAAkB,UAAA,CAAW,MAAA,CAAO,aAAA,EAAe;AAAA,MACvD,CAAC,MAAA,CAAO,yBAAyB,CAAC,GAAG;AAAA,KACtC,CAAA;AAED,IAAA,uBACE,IAAA,CAAC,WAAA,EAAA,EAAY,SAAA,EAAW,MAAA,CAAO,0BAA0B,KAAA,EACtD,QAAA,EAAA;AAAA,MAAA,KAAA,oBAAS,GAAA,CAAC,SAAA,EAAA,EAAU,EAAA,EAAI,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,MAC1C,QAAA,oBACC,GAAA,CAAC,cAAA,EAAA,EAAe,EAAA,EAAI,gBAAiB,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,sBAEhD,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,cAAA;AAAA,UACA,mBAAiB,cAAA,EAAe;AAAA,UAChC,WAAW,MAAA,CAAO,oBAAA;AAAA,UAElB,QAAA,kBAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,KAAA,EAAO,eAAA;AAAA,cACP,QAAA,EAAU,oBAAA;AAAA,cACV,OAAA,EAAQ,MAAA;AAAA,cACR,MAAA,EAAQ,OAAA,GAAU,OAAA,GAAU,EAAA,GAAK,EAAA;AAAA,cACjC,SAAA,EAAW;AAAA;AAAA;AACb;AAAA,OACF;AAAA,MACC,UAAA,oBAAc,GAAA,CAAC,cAAA,EAAA,EAAgB,QAAA,EAAA,UAAA,EAAW;AAAA,KAAA,EAC7C,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist/components/common/MarkdownInput/MarkdownInput.module.css.esm.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
+
+var css_248z = ".MarkdownInput-module_MarkDownInput__cJtct {\n  color: inherit;\n  background-color: inherit;\n  border: none;\n  box-shadow: none;\n}\n\n.MarkdownInput-module_MarkDownInputFormControl__C-zxH {\n  width: 100%;\n  gap: 4px;\n}\n\n.MarkdownInput-module_MarkDownInput--disabled__rDXm- {\n  color: var(--ros-input-text-color);\n  background-color: var(--ros-input-disabledBackground);\n}\n\n.MarkdownInput-module_MarkDownInputWrapper__CarVS {\n  border: 1px solid rgba(0, 0, 0, 0.23);\n  border-radius: 4px;\n}\n\n[data-theme-mode='dark'] {\n  .MarkdownInput-module_MarkDownInputWrapper__CarVS {\n    border: 1px solid rgba(255, 255, 255, 0.23);\n  }\n}\n";
+var styles = {"MarkDownInput":"MarkdownInput-module_MarkDownInput__cJtct","MarkDownInputFormControl":"MarkdownInput-module_MarkDownInputFormControl__C-zxH","MarkDownInput--disabled":"MarkdownInput-module_MarkDownInput--disabled__rDXm-","MarkDownInputWrapper":"MarkdownInput-module_MarkDownInputWrapper__CarVS"};
+styleInject(css_248z);
+
+export { styles as default };
+//# sourceMappingURL=MarkdownInput.module.css.esm.js.map

package/dist/components/common/MarkdownInput/MarkdownInput.module.css.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownInput.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/dist/components/riScDialog/ConfigRiscInfo.esm.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { MarkdownInput } from '../common/MarkdownInput.esm.js';
+import { MarkdownInput } from '../common/MarkdownInput/MarkdownInput.esm.js';
 import { Input } from '../common/Input.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { pluginRiScTranslationRef } from '../../utils/translations.esm.js';
@@ -8,7 +8,7 @@ import { Flex } from '@backstage/ui';
 function ConfigRiscInfo(props) {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
   const currentScope = props.watch("content.scope");
-  return /* @__PURE__ */ jsxs(Flex, { gap: "16px", direction: "column", children: [
+  return /* @__PURE__ */ jsxs(Flex, { gap: "16px", direction: "column", px: "1px", children: [
     /* @__PURE__ */ jsx(
       Input,
       {

package/dist/components/riScDialog/ConfigRiscInfo.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigRiscInfo.esm.js","sources":["../../../src/components/riScDialog/ConfigRiscInfo.tsx"],"sourcesContent":["import { MarkdownInput } from '../common/MarkdownInput';\nimport { Input } from '../common/Input';\nimport {\n  UseFormRegister,\n  UseFormSetValue,\n  UseFormWatch,\n} from 'react-hook-form/dist/types/form';\nimport { RiScWithMetadata } from '../../utils/types';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { pluginRiScTranslationRef } from '../../utils/translations';\nimport { FieldErrors } from 'react-hook-form/dist/types/errors';\nimport { Flex } from '@backstage/ui';\n\ninterface ConfigRiscInfoProps {\n  register: UseFormRegister<RiScWithMetadata>;\n  errors: FieldErrors<RiScWithMetadata>;\n  setValue: UseFormSetValue<RiScWithMetadata>;\n  watch: UseFormWatch<RiScWithMetadata>;\n}\n\nfunction ConfigRiscInfo(props: ConfigRiscInfoProps) {\n  const { t } = useTranslationRef(pluginRiScTranslationRef);\n  const currentScope = props.watch('content.scope');\n  return (\n    <Flex gap=\"16px\" direction=\"column\">\n      <Input\n        required\n        {...props.register('content.title', { required: true })}\n        error={props.errors?.content?.title !== undefined}\n        label={t('dictionary.title')}\n        helperText={props.errors?.content?.title && t('rosDialog.titleError')}\n      />\n      <MarkdownInput\n        {...props.register('content.scope')}\n        value={currentScope}\n        label={t('dictionary.scope')}\n        sublabel={t('rosDialog.scopeDescription')}\n        error={props.errors?.content?.scope !== undefined}\n        minRows={8}\n        onMarkdownChange={value => props.setValue('content.scope', value)}\n      />\n    </Flex>\n  );\n}\n\nexport default ConfigRiscInfo;\n"],"names":[],"mappings":";;;;;;;AAoBA,SAAS,eAAe,KAAA,EAA4B;AAClD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,YAAA,GAAe,KAAA,CAAM,KAAA,CAAM,eAAe,CAAA;AAChD,EAAA,uBACE,IAAA,CAAC,IAAA,EAAA,EAAK,GAAA,EAAI,MAAA,EAAO,WAAU,QAAA,EACzB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAQ,IAAA;AAAA,QACP,GAAG,KAAA,CAAM,QAAA,CAAS,iBAAiB,EAAE,QAAA,EAAU,MAAM,CAAA;AAAA,QACtD,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,KAAU,MAAA;AAAA,QACxC,KAAA,EAAO,EAAE,kBAAkB,CAAA;AAAA,QAC3B,YAAY,KAAA,CAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,IAAS,EAAE,sBAAsB;AAAA;AAAA,KACtE;AAAA,oBACA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA,CAAM,QAAA,CAAS,eAAe,CAAA;AAAA,QAClC,KAAA,EAAO,YAAA;AAAA,QACP,KAAA,EAAO,EAAE,kBAAkB,CAAA;AAAA,QAC3B,QAAA,EAAU,EAAE,4BAA4B,CAAA;AAAA,QACxC,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,KAAU,MAAA;AAAA,QACxC,OAAA,EAAS,CAAA;AAAA,QACT,gBAAA,EAAkB,CAAA,KAAA,KAAS,KAAA,CAAM,QAAA,CAAS,iBAAiB,KAAK;AAAA;AAAA;AAClE,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"ConfigRiscInfo.esm.js","sources":["../../../src/components/riScDialog/ConfigRiscInfo.tsx"],"sourcesContent":["import { MarkdownInput } from '../common/MarkdownInput';\nimport { Input } from '../common/Input';\nimport {\n  UseFormRegister,\n  UseFormSetValue,\n  UseFormWatch,\n} from 'react-hook-form/dist/types/form';\nimport { RiScWithMetadata } from '../../utils/types';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport { pluginRiScTranslationRef } from '../../utils/translations';\nimport { FieldErrors } from 'react-hook-form/dist/types/errors';\nimport { Flex } from '@backstage/ui';\n\ninterface ConfigRiscInfoProps {\n  register: UseFormRegister<RiScWithMetadata>;\n  errors: FieldErrors<RiScWithMetadata>;\n  setValue: UseFormSetValue<RiScWithMetadata>;\n  watch: UseFormWatch<RiScWithMetadata>;\n}\n\nfunction ConfigRiscInfo(props: ConfigRiscInfoProps) {\n  const { t } = useTranslationRef(pluginRiScTranslationRef);\n  const currentScope = props.watch('content.scope');\n  return (\n    <Flex gap=\"16px\" direction=\"column\" px=\"1px\">\n      <Input\n        required\n        {...props.register('content.title', { required: true })}\n        error={props.errors?.content?.title !== undefined}\n        label={t('dictionary.title')}\n        helperText={props.errors?.content?.title && t('rosDialog.titleError')}\n      />\n      <MarkdownInput\n        {...props.register('content.scope')}\n        value={currentScope}\n        label={t('dictionary.scope')}\n        sublabel={t('rosDialog.scopeDescription')}\n        error={props.errors?.content?.scope !== undefined}\n        minRows={8}\n        onMarkdownChange={value => props.setValue('content.scope', value)}\n      />\n    </Flex>\n  );\n}\n\nexport default ConfigRiscInfo;\n"],"names":[],"mappings":";;;;;;;AAoBA,SAAS,eAAe,KAAA,EAA4B;AAClD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AACxD,EAAA,MAAM,YAAA,GAAe,KAAA,CAAM,KAAA,CAAM,eAAe,CAAA;AAChD,EAAA,4BACG,IAAA,EAAA,EAAK,GAAA,EAAI,QAAO,SAAA,EAAU,QAAA,EAAS,IAAG,KAAA,EACrC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA,EAAQ,IAAA;AAAA,QACP,GAAG,KAAA,CAAM,QAAA,CAAS,iBAAiB,EAAE,QAAA,EAAU,MAAM,CAAA;AAAA,QACtD,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,KAAU,MAAA;AAAA,QACxC,KAAA,EAAO,EAAE,kBAAkB,CAAA;AAAA,QAC3B,YAAY,KAAA,CAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,IAAS,EAAE,sBAAsB;AAAA;AAAA,KACtE;AAAA,oBACA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA,CAAM,QAAA,CAAS,eAAe,CAAA;AAAA,QAClC,KAAA,EAAO,YAAA;AAAA,QACP,KAAA,EAAO,EAAE,kBAAkB,CAAA;AAAA,QAC3B,QAAA,EAAU,EAAE,4BAA4B,CAAA;AAAA,QACxC,KAAA,EAAO,KAAA,CAAM,MAAA,EAAQ,OAAA,EAAS,KAAA,KAAU,MAAA;AAAA,QACxC,OAAA,EAAS,CAAA;AAAA,QACT,gBAAA,EAAkB,CAAA,KAAA,KAAS,KAAA,CAAM,QAAA,CAAS,iBAAiB,KAAK;AAAA;AAAA;AAClE,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/riScDialog/MatrixDialog.esm.js

@@ -1,63 +1,36 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { ConsequenceTableInfoWithHeaders } from '../scenarioWizard/components/ConsequenceTable.esm.js';
-import CloseIcon from '@mui/icons-material/Close';
 import { ProbabilityTableInfoWithHeaders } from '../scenarioWizard/components/ProbabilityTable.esm.js';
 import { pluginRiScTranslationRef } from '../../utils/translations.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import Box from '@mui/material/Box';
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import IconButton from '@mui/material/IconButton';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import { Text, Button } from '@backstage/ui';
+import { DialogTrigger, Dialog, DialogHeader, Text, DialogBody, DialogFooter, Button } from '@backstage/ui';
+import styles from './RiScDialog.module.css.esm.js';
 
 function MatrixDialog({
   open,
   close
 }) {
   const { t } = useTranslationRef(pluginRiScTranslationRef);
-  return /* @__PURE__ */ jsxs(Dialog, { maxWidth: "lg", open, onClose: close, children: [
-    /* @__PURE__ */ jsx(DialogTitle, { children: t("scenarioDrawer.riskMatrixModal.title") }),
-    /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        "aria-label": "close",
-        onClick: close,
-        sx: {
-          position: "absolute",
-          right: 8,
-          top: 8,
-          color: (theme) => theme.palette.grey[500]
-        },
-        children: /* @__PURE__ */ jsx(CloseIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsxs(DialogContent, { children: [
-      /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-large", style: { paddingBottom: "32px" }, children: t("scenarioStepper.initialRiskStep.subtitle") }),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-        Text,
-        {
-          variant: "title-x-small",
-          weight: "bold",
-          style: { paddingBottom: "4px" },
-          children: t("dictionary.probability")
-        }
-      ) }),
-      /* @__PURE__ */ jsx(ProbabilityTableInfoWithHeaders, {}),
-      /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-        Text,
-        {
-          variant: "title-x-small",
-          weight: "bold",
-          style: { paddingTop: "32px", paddingBottom: "4px" },
-          children: t("dictionary.consequence")
-        }
-      ) }),
-      /* @__PURE__ */ jsx(ConsequenceTableInfoWithHeaders, {})
-    ] }),
-    /* @__PURE__ */ jsx(DialogActions, { children: /* @__PURE__ */ jsx(Button, { onClick: close, children: t("dictionary.close") }) })
-  ] });
+  return /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      isOpen: open,
+      onOpenChange: close,
+      className: styles.matrixDialog,
+      children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(Text, { variant: "title-x-small", weight: "bold", children: t("scenarioDrawer.riskMatrixModal.title") }) }),
+        /* @__PURE__ */ jsxs(DialogBody, { children: [
+          /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-large", className: styles.matrixDialogBody, children: t("scenarioStepper.initialRiskStep.subtitle") }),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { variant: "title-x-small", weight: "bold", children: t("dictionary.probability") }) }),
+          /* @__PURE__ */ jsx(ProbabilityTableInfoWithHeaders, {}),
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Text, { variant: "title-x-small", weight: "bold", children: t("dictionary.consequence") }) }),
+          /* @__PURE__ */ jsx(ConsequenceTableInfoWithHeaders, {})
+        ] }),
+        /* @__PURE__ */ jsx(DialogFooter, { className: styles.matrixDialogFooter, children: /* @__PURE__ */ jsx(Button, { onClick: close, children: t("dictionary.close") }) })
+      ]
+    }
+  ) });
 }
 
 export { MatrixDialog };

package/dist/components/riScDialog/MatrixDialog.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MatrixDialog.esm.js","sources":["../../../src/components/riScDialog/MatrixDialog.tsx"],"sourcesContent":["import { ConsequenceTableInfoWithHeaders } from '../scenarioWizard/components/ConsequenceTable';\nimport CloseIcon from '@mui/icons-material/Close';\nimport { ProbabilityTableInfoWithHeaders } from '../scenarioWizard/components/ProbabilityTable';\nimport { pluginRiScTranslationRef } from '../../utils/translations';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport Box from '@mui/material/Box';\nimport Dialog from '@mui/material/Dialog';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport IconButton from '@mui/material/IconButton';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogActions from '@mui/material/DialogActions';\nimport { Button, Text } from '@backstage/ui';\n\nexport function MatrixDialog({\n  open,\n  close,\n}: {\n  open: boolean;\n  close: () => void;\n}) {\n  const { t } = useTranslationRef(pluginRiScTranslationRef);\n\n  return (\n    <Dialog maxWidth=\"lg\" open={open} onClose={close}>\n      <DialogTitle>{t('scenarioDrawer.riskMatrixModal.title')}</DialogTitle>\n      <IconButton\n        aria-label=\"close\"\n        onClick={close}\n        sx={{\n          position: 'absolute',\n          right: 8,\n          top: 8,\n          color: theme => theme.palette.grey[500],\n        }}\n      >\n        <CloseIcon />\n      </IconButton>\n      <DialogContent>\n        <Text as=\"p\" variant=\"body-large\" style={{ paddingBottom: '32px' }}>\n          {t('scenarioStepper.initialRiskStep.subtitle')}\n        </Text>\n        <Box>\n          <Text\n            variant=\"title-x-small\"\n            weight=\"bold\"\n            style={{ paddingBottom: '4px' }}\n          >\n            {t('dictionary.probability')}\n          </Text>\n        </Box>\n        <ProbabilityTableInfoWithHeaders />\n        <Box>\n          <Text\n            variant=\"title-x-small\"\n            weight=\"bold\"\n            style={{ paddingTop: '32px', paddingBottom: '4px' }}\n          >\n            {t('dictionary.consequence')}\n          </Text>\n        </Box>\n        <ConsequenceTableInfoWithHeaders />\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={close}>{t('dictionary.close')}</Button>\n      </DialogActions>\n    </Dialog>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAaO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAA,4BACG,MAAA,EAAA,EAAO,QAAA,EAAS,IAAA,EAAK,IAAA,EAAY,SAAS,KAAA,EACzC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,WAAA,EAAA,EAAa,QAAA,EAAA,CAAA,CAAE,sCAAsC,CAAA,EAAE,CAAA;AAAA,oBACxD,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAW,OAAA;AAAA,QACX,OAAA,EAAS,KAAA;AAAA,QACT,EAAA,EAAI;AAAA,UACF,QAAA,EAAU,UAAA;AAAA,UACV,KAAA,EAAO,CAAA;AAAA,UACP,GAAA,EAAK,CAAA;AAAA,UACL,KAAA,EAAO,CAAA,KAAA,KAAS,KAAA,CAAM,OAAA,CAAQ,KAAK,GAAG;AAAA,SACxC;AAAA,QAEA,8BAAC,SAAA,EAAA,EAAU;AAAA;AAAA,KACb;AAAA,yBACC,aAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,YAAA,EAAa,KAAA,EAAO,EAAE,aAAA,EAAe,MAAA,EAAO,EAC9D,QAAA,EAAA,CAAA,CAAE,0CAA0C,CAAA,EAC/C,CAAA;AAAA,0BACC,GAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,eAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UACP,KAAA,EAAO,EAAE,aAAA,EAAe,KAAA,EAAM;AAAA,UAE7B,YAAE,wBAAwB;AAAA;AAAA,OAC7B,EACF,CAAA;AAAA,0BACC,+BAAA,EAAA,EAAgC,CAAA;AAAA,0BAChC,GAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,eAAA;AAAA,UACR,MAAA,EAAO,MAAA;AAAA,UACP,KAAA,EAAO,EAAE,UAAA,EAAY,MAAA,EAAQ,eAAe,KAAA,EAAM;AAAA,UAEjD,YAAE,wBAAwB;AAAA;AAAA,OAC7B,EACF,CAAA;AAAA,0BACC,+BAAA,EAAA,EAAgC;AAAA,KAAA,EACnC,CAAA;AAAA,oBACA,GAAA,CAAC,iBACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,SAAS,KAAA,EAAQ,QAAA,EAAA,CAAA,CAAE,kBAAkB,CAAA,EAAE,CAAA,EACjD;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MatrixDialog.esm.js","sources":["../../../src/components/riScDialog/MatrixDialog.tsx"],"sourcesContent":["import { ConsequenceTableInfoWithHeaders } from '../scenarioWizard/components/ConsequenceTable';\nimport { ProbabilityTableInfoWithHeaders } from '../scenarioWizard/components/ProbabilityTable';\nimport { pluginRiScTranslationRef } from '../../utils/translations';\nimport { useTranslationRef } from '@backstage/core-plugin-api/alpha';\nimport Box from '@mui/material/Box';\nimport {\n  Button,\n  Text,\n  Dialog,\n  DialogHeader,\n  DialogBody,\n  DialogFooter,\n  DialogTrigger,\n} from '@backstage/ui';\nimport styles from './RiScDialog.module.css';\n\nexport function MatrixDialog({\n  open,\n  close,\n}: {\n  open: boolean;\n  close: () => void;\n}) {\n  const { t } = useTranslationRef(pluginRiScTranslationRef);\n\n  return (\n    <DialogTrigger>\n      <Dialog\n        isOpen={open}\n        onOpenChange={close}\n        className={styles.matrixDialog}\n      >\n        <DialogHeader>\n          <Text variant=\"title-x-small\" weight=\"bold\">\n            {t('scenarioDrawer.riskMatrixModal.title')}\n          </Text>\n        </DialogHeader>\n        <DialogBody>\n          <Text as=\"p\" variant=\"body-large\" className={styles.matrixDialogBody}>\n            {t('scenarioStepper.initialRiskStep.subtitle')}\n          </Text>\n          <Box>\n            <Text variant=\"title-x-small\" weight=\"bold\">\n              {t('dictionary.probability')}\n            </Text>\n          </Box>\n          <ProbabilityTableInfoWithHeaders />\n          <Box>\n            <Text variant=\"title-x-small\" weight=\"bold\">\n              {t('dictionary.consequence')}\n            </Text>\n          </Box>\n          <ConsequenceTableInfoWithHeaders />\n        </DialogBody>\n        <DialogFooter className={styles.matrixDialogFooter}>\n          <Button onClick={close}>{t('dictionary.close')}</Button>\n        </DialogFooter>\n      </Dialog>\n    </DialogTrigger>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA;AACF,CAAA,EAGG;AACD,EAAA,MAAM,EAAE,CAAA,EAAE,GAAI,iBAAA,CAAkB,wBAAwB,CAAA;AAExD,EAAA,2BACG,aAAA,EAAA,EACC,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,MAAA,EAAQ,IAAA;AAAA,MACR,YAAA,EAAc,KAAA;AAAA,MACd,WAAW,MAAA,CAAO,YAAA;AAAA,MAElB,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,YAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,eAAA,EAAgB,QAAO,MAAA,EAClC,QAAA,EAAA,CAAA,CAAE,sCAAsC,CAAA,EAC3C,CAAA,EACF,CAAA;AAAA,6BACC,UAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,YAAA,EAAa,WAAW,MAAA,CAAO,gBAAA,EACjD,QAAA,EAAA,CAAA,CAAE,0CAA0C,CAAA,EAC/C,CAAA;AAAA,0BACA,GAAA,CAAC,GAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,eAAA,EAAgB,MAAA,EAAO,MAAA,EAClC,QAAA,EAAA,CAAA,CAAE,wBAAwB,CAAA,EAC7B,CAAA,EACF,CAAA;AAAA,8BACC,+BAAA,EAAA,EAAgC,CAAA;AAAA,0BACjC,GAAA,CAAC,GAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,eAAA,EAAgB,MAAA,EAAO,MAAA,EAClC,QAAA,EAAA,CAAA,CAAE,wBAAwB,CAAA,EAC7B,CAAA,EACF,CAAA;AAAA,8BACC,+BAAA,EAAA,EAAgC;AAAA,SAAA,EACnC,CAAA;AAAA,wBACA,GAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAW,MAAA,CAAO,kBAAA,EAC9B,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAS,KAAA,EAAQ,QAAA,EAAA,CAAA,CAAE,kBAAkB,CAAA,EAAE,CAAA,EACjD;AAAA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}

package/dist/components/riScDialog/RiScDialog.esm.js

@@ -1,21 +1,15 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { emptyRiSc, isDeeplyEqual } from '../../utils/utilityfunctions.esm.js';
 import { useTranslationRef } from '@backstage/core-plugin-api/alpha';
 import { pluginRiScTranslationRef } from '../../utils/translations.esm.js';
 import { useRiScs } from '../../contexts/RiScContext.esm.js';
 import { useForm } from 'react-hook-form';
-import Dialog from '@mui/material/Dialog';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogActions from '@mui/material/DialogActions';
-import { dialogActions } from '../common/mixins.esm.js';
 import { Stepper, Step, StepLabel } from '@mui/material';
 import ConfigEncryptionDialog from './ConfigEncryptionDialog.esm.js';
 import ConfigRiscInfo from './ConfigRiscInfo.esm.js';
 import ConfigInitialRisc from './ConfigInitialRisc.esm.js';
-import { Text, Button, Flex } from '@backstage/ui';
-import Divider from '@mui/material/Divider';
+import { DialogTrigger, Dialog, DialogHeader, Text, DialogBody, Flex, Button, DialogFooter } from '@backstage/ui';
 import styles from './RiScDialog.module.css.esm.js';
 import { useDefaultRiScTypeDescriptors } from '../../contexts/DefaultRiScTypesContext.esm.js';
 
@@ -133,136 +127,179 @@ function RiScDialog({
     onClose();
   });
   if (dialogState === 1 /* Create */) {
-    return /* @__PURE__ */ jsxs(Dialog, { open: true, onClose, children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", children: t("rosDialog.titleNew") }) }),
-      /* @__PURE__ */ jsxs(DialogContent, { children: [
-        /* @__PURE__ */ jsx(RiScStepper, { activeStep }),
-        /* @__PURE__ */ jsx(Divider, { className: styles.subtitleDivider }),
-        /* @__PURE__ */ jsxs(
-          Text,
-          {
-            as: "h2",
-            variant: "title-x-small",
-            weight: "bold",
-            className: styles.subtitle,
-            children: [
-              activeStep === 0 && t("rosDialog.initialRiscTitle"),
-              activeStep === 1 && t("rosDialog.titleAndScope"),
-              activeStep === 2 && t("rosDialog.stepEncryption")
-            ]
-          }
-        ),
-        activeStep === 0 && /* @__PURE__ */ jsx(
-          ConfigInitialRisc,
-          {
-            dialogState,
-            switchOn,
-            setSwitchOn,
-            setValue,
-            selectedRiScId,
-            setSelectedRiScId
-          }
-        ),
-        activeStep === 1 && /* @__PURE__ */ jsx(
-          ConfigRiscInfo,
-          {
-            register,
-            errors,
-            setValue,
-            watch
-          }
-        ),
-        activeStep === 2 && /* @__PURE__ */ jsx(
-          ConfigEncryptionDialog,
-          {
-            gcpCryptoKeys,
-            setValue,
-            state: dialogState,
-            register,
-            errors
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs(DialogActions, { sx: dialogActions, children: [
-        /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
-        /* @__PURE__ */ jsxs(Flex, { children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "medium",
-              variant: "secondary",
-              isDisabled: activeStep === 0,
-              onClick: handleBack,
-              children: t("dictionary.previous")
-            }
-          ),
-          activeStep < 2 ? /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleNext, children: t("dictionary.next") }) : /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleFinish, children: t("dictionary.save") })
-        ] })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        isOpen: true,
+        onOpenChange: onClose,
+        className: styles.createRiscDialog,
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: styles.initRiscDialogTitle, children: /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", children: t("rosDialog.titleNew") }) }),
+          /* @__PURE__ */ jsxs(DialogBody, { className: styles.riscDialogBody, children: [
+            /* @__PURE__ */ jsx(RiScStepper, { activeStep }),
+            /* @__PURE__ */ jsxs(
+              Text,
+              {
+                as: "h2",
+                variant: "title-x-small",
+                weight: "bold",
+                className: styles.subtitle,
+                children: [
+                  activeStep === 0 && t("rosDialog.initialRiscTitle"),
+                  activeStep === 1 && t("rosDialog.titleAndScope"),
+                  activeStep === 2 && t("rosDialog.stepEncryption")
+                ]
+              }
+            ),
+            activeStep === 0 && /* @__PURE__ */ jsx(
+              ConfigInitialRisc,
+              {
+                dialogState,
+                switchOn,
+                setSwitchOn,
+                setValue,
+                selectedRiScId,
+                setSelectedRiScId
+              }
+            ),
+            activeStep === 1 && /* @__PURE__ */ jsx(
+              ConfigRiscInfo,
+              {
+                register,
+                errors,
+                setValue,
+                watch
+              }
+            ),
+            activeStep === 2 && /* @__PURE__ */ jsx(
+              ConfigEncryptionDialog,
+              {
+                gcpCryptoKeys,
+                setValue,
+                state: dialogState,
+                register,
+                errors
+              }
+            ),
+            /* @__PURE__ */ jsxs(Flex, { pt: "16px", justify: "between", children: [
+              /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
+              /* @__PURE__ */ jsxs(Flex, { children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "medium",
+                    variant: "secondary",
+                    isDisabled: activeStep === 0,
+                    onClick: handleBack,
+                    children: t("dictionary.previous")
+                  }
+                ),
+                activeStep < 2 ? /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleNext, children: t("dictionary.next") }) : /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    size: "medium",
+                    variant: "primary",
+                    onClick: handleFinish,
+                    children: t("dictionary.save")
+                  }
+                )
+              ] })
+            ] })
+          ] })
+        ]
+      }
+    ) });
   }
   if (dialogState === 5 /* Delete */) {
-    return /* @__PURE__ */ jsxs(Dialog, { open: true, onClose, children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: t("deleteDialog.title") }),
-      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(DialogContent, { children: t("deleteDialog.confirmationMessage") }) }),
-      /* @__PURE__ */ jsxs(DialogActions, { children: [
-        /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
-        /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleFinish, children: t("dictionary.delete") })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        isOpen: true,
+        onOpenChange: onClose,
+        className: styles.createRiscDialog,
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: styles.riscDialogTitle, children: /* @__PURE__ */ jsx(Text, { variant: "title-x-small", weight: "bold", children: t("deleteDialog.title") }) }),
+          /* @__PURE__ */ jsx(DialogBody, { className: styles.riscDialogBody, children: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+            t("deleteDialog.confirmationMessage"),
+            /* @__PURE__ */ jsxs(Flex, { justify: "between", pt: "16px", children: [
+              /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
+              /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleFinish, children: t("dictionary.delete") })
+            ] })
+          ] }) })
+        ]
+      }
+    ) });
   }
   if (dialogState === 2 /* EditRiscInfo */) {
-    return /* @__PURE__ */ jsxs(Dialog, { open: true, onClose, children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", children: t("rosDialog.titleEdit") }) }),
-      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
-        ConfigRiscInfo,
-        {
-          register,
-          errors,
-          setValue,
-          watch
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(DialogActions, { sx: dialogActions, children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            size: "medium",
-            variant: "tertiary",
-            onClick: onDelete,
-            className: styles.deleteButton,
-            children: [
-              /* @__PURE__ */ jsx("i", { className: `ri-delete-bin-line ${styles.deleteButtonIcon}` }),
-              t("contentHeader.deleteButton")
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(Flex, { children: [
-          /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
-          /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleFinish, children: t("dictionary.save") })
-        ] })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        isOpen: true,
+        onOpenChange: onClose,
+        className: styles.createRiscDialog,
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: styles.riscDialogTitle, children: /* @__PURE__ */ jsx(Text, { variant: "title-x-small", weight: "bold", children: t("rosDialog.titleEdit") }) }),
+          /* @__PURE__ */ jsx(DialogBody, { className: styles.riscDialogBody, children: /* @__PURE__ */ jsx(
+            ConfigRiscInfo,
+            {
+              register,
+              errors,
+              setValue,
+              watch
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DialogFooter, { className: styles.riscDialogFooter, children: [
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                size: "medium",
+                variant: "tertiary",
+                onClick: onDelete,
+                className: styles.deleteButton,
+                children: [
+                  /* @__PURE__ */ jsx("i", { className: `ri-delete-bin-line ${styles.deleteButtonIcon}` }),
+                  t("contentHeader.deleteButton")
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(Flex, { children: [
+              /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
+              /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleFinish, children: t("dictionary.save") })
+            ] })
+          ] })
+        ]
+      }
+    ) });
   }
   if (dialogState === 4 /* EditEncryption */) {
-    return /* @__PURE__ */ jsxs(Dialog, { open: true, onClose, children: [
-      /* @__PURE__ */ jsx(DialogTitle, { children: /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", children: t("rosDialog.editEncryption") }) }),
-      /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(
-        ConfigEncryptionDialog,
-        {
-          gcpCryptoKeys,
-          sopsData: selectedRiSc?.sopsConfig,
-          setValue,
-          state: dialogState,
-          register,
-          errors
-        }
-      ) }),
-      /* @__PURE__ */ jsxs(DialogActions, { sx: dialogActions, children: [
-        /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
-        /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleFinish, children: t("dictionary.save") })
-      ] })
-    ] });
+    return /* @__PURE__ */ jsx(DialogTrigger, { children: /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        isOpen: true,
+        onOpenChange: onClose,
+        className: styles.createRiscDialog,
+        children: [
+          /* @__PURE__ */ jsx(DialogHeader, { className: styles.riscDialogTitle, children: /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", children: t("rosDialog.editEncryption") }) }),
+          /* @__PURE__ */ jsxs(DialogBody, { className: styles.riscDialogBody, children: [
+            /* @__PURE__ */ jsx(
+              ConfigEncryptionDialog,
+              {
+                gcpCryptoKeys,
+                sopsData: selectedRiSc?.sopsConfig,
+                setValue,
+                state: dialogState,
+                register,
+                errors
+              }
+            ),
+            /* @__PURE__ */ jsxs(Flex, { justify: "between", className: styles.riscDialogFooter, children: [
+              /* @__PURE__ */ jsx(Button, { size: "medium", variant: "secondary", onClick: onClose, children: t("dictionary.cancel") }),
+              /* @__PURE__ */ jsx(Button, { size: "medium", variant: "primary", onClick: handleFinish, children: t("dictionary.save") })
+            ] })
+          ] })
+        ]
+      }
+    ) });
   }
   return null;
 }