import { jsx as _jsx } from "react/jsx-runtime";
/*!
 * Copyright (c) Microsoft. All rights reserved.
 * Licensed under the MIT license. See LICENSE file in the project.
 */ import { memo, useMemo } from 'react';
import { selectStepDescription } from '../selectStepDescription.js';
import { Container } from './StepDescription.styles.js';
/**
 * Let's us render the Steps in a loop while memoing all the functions
 */ export const StepDescription = /*#__PURE__*/ memo(function StepComponent({ step , output  }) {
    const Description = useMemo(()=>selectStepDescription(step), [
        step
    ]);
    return /*#__PURE__*/ _jsx(Container, {
        children: /*#__PURE__*/ _jsx(Description, {
            step: step,
            output: output,
            showInput: true,
            showOutput: true,
            showOutputColumn: true
        })
    });
});
