import * as React from 'react';
import { TextField } from '@fluentui/react-next/lib/TextField';
import { Text } from '@fluentui/react-next/lib/Text';
import { Stack } from '@fluentui/react-next/lib/Stack';
var textStyles = { root: { maxWidth: 600 } };
export var TextFieldStyledExample = function () {
    return (React.createElement(Stack, { tokens: { childrenGap: 15 } },
        React.createElement(Text, { styles: textStyles }, "This example shows how components that used to be styled using CSS can be styled using JS styling. (Look at the bottom of the code to see the equivalent SCSS.) The preferred method is JS styling for several reasons: type safety for styling, more predictable behavior, and clear feedback via typing when component changes affect existing styling code."),
        React.createElement(TextField, { label: "Custom styled TextField", required: true, styles: getStyles })));
};
function getStyles(props) {
    var required = props.required;
    return {
        fieldGroup: [
            { width: 300 },
            required && {
                borderTopColor: props.theme.semanticColors.errorText,
            },
        ],
        subComponentStyles: {
            label: getLabelStyles,
        },
    };
}
function getLabelStyles(props) {
    var required = props.required;
    return {
        root: required && {
            color: props.theme.palette.themePrimary,
        },
    };
}
/*
This is the SCSS used in the CSS styling example.
If exporting to CodePen, paste this into the CSS section.
-------------------------------------------------------------------------------------------
// In the real SCSS, these variables are defined elsewhere and adjusted based on the theme.
// The values provided below are from the default theme.
$errorTextColor: #a80000;
$ms-color-themePrimary: #0078d4;

.textField-cssStyled {
  .ms-TextField-fieldGroup {
    width: 300px;
    border-top-color: $errorTextColor;
  }
  .ms-Label {
    color: $ms-color-themePrimary;
  }
}
*/
//# sourceMappingURL=TextField.Styled.Example.js.map