import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef } from 'react';
import Box from '../Box';
import Button from '../Button';
import Checkbox from '../Checkbox';
import Divider from '../Divider';
import FormControlLabel from '../FormControlLabel';
import FormGroup from '../FormGroup';
import Grid from '../Grid';
import Link from '../Link';
import Paper from '../Paper';
import TextField from '../TextField';
import Typography from '../Typography';

/**
 * The Sign In component is a custom component that is used to render a sign-in form.
 *
 * Demos:
 *
 * - [Sign In (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-sign-in--overview)
 *
 * API:
 *
 * - inherits [Box API](https://mui.com/material-ui/api/box/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the SignIn component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered SignIn component.
 */
const SignIn = forwardRef((_a, ref) => {
    var { className, signUpUrl, logoUrl, signInOptions } = _a, rest = __rest(_a, ["className", "signUpUrl", "logoUrl", "signInOptions"]);
    return (_jsxs(Box, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-sign-in', 'OxygenSignIn-root', className) }, rest, { children: [logoUrl && _jsx(Box, { className: "OxygenSignIn-logo oxygen-sign-in-logo", component: "img", src: logoUrl }), _jsxs(Paper, Object.assign({ className: "OxygenSignIn-box oxygen-sign-in-box", elevation: 0, variant: "outlined" }, { children: [_jsx(Typography, Object.assign({ align: "center", className: "OxygenSignIn-header oxygen-sign-in-header", variant: "h5" }, { children: "Sign in" })), _jsxs(Box, Object.assign({ className: "OxygenSignIn-form oxygen-sign-in-form", component: "form", onSubmit: () => null, noValidate: true, sx: { mt: 1 } }, { children: [_jsx(TextField, { required: true, fullWidth: true, id: "name", label: "Username", name: "text", placeholder: "Enter your username", autoFocus: true }), _jsx(TextField, { required: true, fullWidth: true, name: "password", label: "Password", type: "password", id: "password", placeholder: "Enter your password", autoComplete: "current-password" }), _jsx(FormGroup, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { defaultChecked: true }), label: "Remember me on this computer" }) }), _jsx(Button, Object.assign({ color: "primary", variant: "contained", className: "OxygenSignIn-cta oxygen-sign-in-cta", type: "submit", fullWidth: true }, { children: "Sign In" })), signInOptions && (_jsxs("div", Object.assign({ className: "OxygenSignIn-optionsWrapper oxygen-sign-in-options-wrapper" }, { children: [_jsx(Divider, { children: "OR" }), _jsx("div", Object.assign({ className: "OxygenSignIn-options oxygen-sign-in-options" }, { children: signInOptions }))] }))), signUpUrl && (_jsxs(Grid, Object.assign({ container: true, className: "OxygenSignIn-signUpLink oxygen-sign-in-sign-up-link" }, { children: [_jsx(Grid, { children: "Don't have an account?" }), _jsx(Grid, { children: _jsx(Link, Object.assign({ href: signUpUrl, className: "OxygenSignIn-signUpLinkAction oxygen-sign-in-sign-up-link-action" }, { children: "Sign up" })) })] })))] }))] }))] })));
});
export default SignIn;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * 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,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-sign-in {\n  display: flex;\n  place-content: center;\n  align-items: center;\n  flex-flow: column nowrap;\n  text-align: left;\n}\n.oxygen-sign-in .oxygen-sign-in-box {\n  padding: 32px;\n  min-width: 350px;\n  max-width: 500px;\n}\n.oxygen-sign-in .oxygen-sign-in-logo {\n  max-height: 50px;\n  margin-bottom: 30px;\n}\n.oxygen-sign-in .oxygen-sign-in-header {\n  margin-bottom: 32px;\n}\n.oxygen-sign-in .oxygen-sign-in-form .oxygen-text-field {\n  margin-bottom: 20px;\n}\n.oxygen-sign-in .oxygen-sign-in-form .oxygen-sign-in-cta {\n  margin: 16px 0;\n}\n.oxygen-sign-in .oxygen-sign-in-form .oxygen-sign-in-sign-up-link {\n  font-size: 14px;\n}\n.oxygen-sign-in .oxygen-sign-in-form .oxygen-sign-in-sign-up-link-action {\n  margin-left: 5px;\n}\n.oxygen-sign-in .oxygen-sign-in-options {\n  margin-top: 16px;\n}\n.oxygen-sign-in .oxygen-sign-in-options .oxygen-button {\n  background: var(--oxygen-palette-common-white);\n  color: var(--oxygen-palette-common-black);\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* stylelint-disable-next-line color-function-notation */\n  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.12), 0 1px 1px 0 rgba(0, 0, 0, 0.24);\n}\n.oxygen-sign-in .oxygen-sign-in-options .oxygen-button:hover {\n  /* stylelint-disable-next-line color-function-notation */\n  color: rgba(0, 0, 0, 0.8);\n}\n.oxygen-sign-in .oxygen-sign-in-options .oxygen-button:not(:last-child) {\n  margin-bottom: 16px;\n}");