@popmenu/common-ui 0.93.0 → 0.95.0

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationAltActions.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationAltActions: () => JSX.Element | null;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationBody.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationBody: () => JSX.Element;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationCloseButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationCloseButton: () => JSX.Element;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const FollowerAuthenticationContent: (props: {
+    children: React.ReactNode;
+}) => JSX.Element;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationDialog.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { FollowerAuthenticationDialogProps } from './FollowerAuthenticationDialogProps';
+export declare const FollowerAuthenticationDialog: (props: FollowerAuthenticationDialogProps) => JSX.Element;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationDialogProps.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+export declare type FollowerAuthenticationDialogProps = {
+    open: boolean;
+    state: ReducerState;
+    dispatch: (event: ReducerEvent) => void;
+    messages: Record<MessageKey, string>;
+    trigger: 'generic' | 'engagement';
+    locationOptions: LocationOption[];
+    loading: boolean;
+    graphics: Record<`${ReducerStateValue}`, string>;
+    logos: Record<'popmenu' | 'facebook' | 'google', ReactNode>;
+};
+export declare type ReducerState = {
+    value: ReducerStateValue;
+    effects: string[];
+    formValues: Record<string, string>;
+    defaultFormValues: Record<string, string>;
+};
+export declare type ReducerStateValue = 'initial' | 'signUp' | 'emailFound' | 'emailAuthCode' | 'emailPasswordSignIn' | 'phoneFound' | 'phoneAuthCode' | 'phonePasswordSignIn' | 'welcome';
+export declare type ReducerEvent = {
+    type: 'submit-form';
+    context: {
+        values: Record<string, string>;
+    };
+} | {
+    type: 'click-password-continue';
+} | {
+    type: 'click-facebook-continue';
+} | {
+    type: 'click-google-continue';
+} | {
+    type: 'click-get-code';
+    context: {
+        values: Record<string, string>;
+    };
+} | {
+    type: 'click-done';
+} | {
+    type: 'click-close';
+} | {
+    type: 'reset';
+} | {
+    type: 'dialog-closed';
+} | {
+    type: 'user-found';
+} | {
+    type: 'user-not-found';
+} | {
+    type: 'sign-in-success';
+};
+declare type MessageKey = `${ReducerStateValue}Title` | `${ReducerStateValue}Info` | `${ReducerStateValue}GraphicAlt` | 'signUpPhoneInputLabel' | 'signUpNameInputLabel' | 'signUpEmailInputLabel' | 'signUpLocationInputLabel' | 'signUpBirthdaySectionLabel' | 'signUpMonthInputLabel' | 'signUpDayInputLabel' | 'signUp' | 'signUpFinePrint' | 'emailFoundInputLabel' | 'emailFoundCtaButtonLabel' | 'phoneFoundInputLabel' | 'phoneFoundCtaButtonLabel' | 'emailAuthCodeInputLabel' | 'phoneAuthCodeInputLabel' | 'or' | 'popmenuLogoAlt' | 'continueWithFacebookButtonLabel' | 'continueWithGoogleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword' | 'closeButtonLabel';
+declare type LocationOption = {
+    label: string;
+    value: string;
+};
+export {};

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationFooter.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationFooter: () => JSX.Element;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationForm.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationForm: () => JSX.Element | null;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationGraphic.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationGraphic: () => JSX.Element | null;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationInfo.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationInfo: () => JSX.Element | null;

package/build/components/FollowerAuthenticationDialog/FollowerAuthenticationTitle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const FollowerAuthenticationTitle: () => JSX.Element;

package/build/components/FollowerAuthenticationDialog/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FollowerAuthenticationDialogProps } from './FollowerAuthenticationDialogProps';
+export declare const FollowerAuthenticationDialogContextProvider: import("react").Provider<Omit<FollowerAuthenticationDialogProps, "open"> | null>;
+export declare const useFollowerAuthenticationDialogContext: () => Omit<FollowerAuthenticationDialogProps, "open">;

package/build/components/FollowerAuthenticationDialog/index.d.ts

@@ -0,0 +1,2 @@
+export { FollowerAuthenticationDialog } from './FollowerAuthenticationDialog';
+export { FollowerAuthenticationDialogProps } from './FollowerAuthenticationDialogProps';

package/build/components/FollowerAuthenticationDialog/theme.d.ts

@@ -0,0 +1,35 @@
+export declare const theme: {
+    readonly palette: {
+        readonly primary: {
+            readonly main: "#2E3042";
+        };
+    };
+    readonly typography: {
+        readonly h1: {
+            readonly fontFamily: "Poppins";
+            readonly fontSize: "24px";
+            readonly fontWeight: 400;
+            readonly lineHeight: "36px";
+        };
+    };
+    readonly props: {
+        readonly MuiTextField: {
+            readonly variant: "outlined";
+            readonly fullWidth: true;
+        };
+        readonly MuiButton: {
+            readonly variant: "contained";
+            readonly color: "primary";
+            readonly disableElevation: true;
+            readonly fullWidth: true;
+        };
+    };
+    readonly overrides: {
+        readonly MuiButton: {
+            readonly root: {
+                readonly borderRadius: 32;
+                readonly textTransform: "none";
+            };
+        };
+    };
+};

package/build/components/index.d.ts

@@ -75,3 +75,4 @@ export { default as Toolbar, ToolbarProps } from './Toolbar';
 export { default as Tooltip, TooltipProps } from './Tooltip';
 export { default as Typography, TypographyProps, ThemeColors } from './Typography';
 export { NumberField, NumberFieldProps } from './NumberField';
+export { FollowerAuthenticationDialog, FollowerAuthenticationDialogProps } from './FollowerAuthenticationDialog';

package/build/index.es.js

@@ -1,9 +1,9 @@
 export { default as Alert } from '@material-ui/lab/Alert';
-import { makeStyles, Box, Typography as Typography$1, useTheme as useTheme$1, Link as Link$1, Paper as Paper$1, TextField as TextField$1 } from '@material-ui/core';
+import { makeStyles, Box, Typography as Typography$1, useTheme as useTheme$1, Link as Link$1, Paper as Paper$1, TextField as TextField$1, DialogContent, Button as Button$1, MenuItem, Divider as Divider$1, IconButton as IconButton$1, createTheme, useMediaQuery, ThemeProvider, Dialog } from '@material-ui/core';
 export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Box, Breadcrumbs, ButtonBase, ClickAwayListener, Fab, GridList, Hidden, Modal, Popover, Popper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, ThemeProvider, Toolbar, alpha, createTheme, darken, decomposeColor, getLuminance, hexToRgb, lighten, makeStyles, recomposeColor, rgbToHex } from '@material-ui/core';
 export { default as AppBar } from '@material-ui/core/AppBar';
 import * as React from 'react';
-import React__default, { createElement, forwardRef, useState, useRef, useEffect } from 'react';
+import React__default, { createElement, forwardRef, useState, useRef, useEffect, createContext, useContext } from 'react';
 import MuiAvatar from '@material-ui/core/Avatar';
 import { makeStyles as makeStyles$1, useTheme } from '@material-ui/core/styles';
 export { ServerStyleSheets } from '@material-ui/core/styles';
@@ -111,6 +111,24 @@ function SvgCheckCircle(props) {
   }))));
 }
 
+var _path$26;
+
+function _extends$4G() { _extends$4G = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4G.apply(this, arguments); }
+
+function SvgX(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$4G({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$26 || (_path$26 = /*#__PURE__*/React.createElement("path", {
+    d: "M12 4l-8 8m0-8l8 8",
+    stroke: "currentColor"
+  })));
+}
+
 var _g$2y, _defs$1C;
 
 function _extends$4F() { _extends$4F = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$4F.apply(this, arguments); }
@@ -765,7 +783,7 @@ var SemanticColors;
     SemanticColors["SECONDARY_DARK"] = "secondary.dark";
     SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
 })(SemanticColors || (SemanticColors = {}));
-var useStyles$1 = makeStyles(function (theme) { return ({
+var useStyles$5 = makeStyles(function (theme) { return ({
     dividerRoot: {
         gap: theme.spacing(2),
     },
@@ -803,7 +821,7 @@ var useStyles$1 = makeStyles(function (theme) { return ({
 }); });
 var Divider = function (props) {
     var className = props.className, text = props.text, textTransform = props.textTransform, TypographyProps = props.TypographyProps;
-    var classes = useStyles$1(props);
+    var classes = useStyles$5(props);
     var casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset';
     return (React__default.createElement(Box, { className: classNames([classes.dividerRoot, className]), display: "flex", alignItems: "center" },
         React__default.createElement(Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset }),
@@ -843,7 +861,7 @@ Link.defaultProps = {
 };
 Link.displayName = 'Link';
 
-var useStyles = makeStyles(function (_a) {
+var useStyles$4 = makeStyles(function (_a) {
     var spacing = _a.spacing;
     return ({
         root: {
@@ -857,7 +875,7 @@ var useStyles = makeStyles(function (_a) {
 });
 var Paper = forwardRef(function (props, ref) {
     var legacyStyles = props.legacyStyles, restProps = __rest(props, ["legacyStyles"]);
-    var classes = useStyles(props);
+    var classes = useStyles$4(props);
     return React__default.createElement(Paper$1, __assign({}, ref, { classes: __assign({}, (legacyStyles && classes)) }, restProps));
 });
 Paper.displayName = 'Paper';
@@ -1043,6 +1061,275 @@ var NumberField = function (props) {
                 React__default.createElement(Icon, { icon: SvgMinusCircle }))) }, restInputProps) }, restProps)));
 };
 
+var useStyles$3 = makeStyles(function () { return ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationContent = function (props) {
+    var classes = useStyles$3();
+    return React__default.createElement(DialogContent, { classes: classes }, props.children);
+};
+
+var FollowerAuthenticationDialogContext = createContext(null);
+var FollowerAuthenticationDialogContextProvider = FollowerAuthenticationDialogContext.Provider;
+var useFollowerAuthenticationDialogContext = function () {
+    var context = useContext(FollowerAuthenticationDialogContext);
+    if (!context) {
+        throw new Error('useFollowerAuthenticationDialogContext must be called within FollowerAuthenticationDialogContextProvider');
+    }
+    return context;
+};
+
+var FollowerAuthenticationGraphic = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, graphics = _a.graphics;
+    var graphic = graphics[state.value];
+    if (!graphic)
+        return null;
+    return (React__default.createElement(Box, null,
+        React__default.createElement("img", { src: graphic, alt: messages[state.value + "GraphicAlt"] })));
+};
+
+var useStyles$2 = makeStyles(function () { return ({
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationForm = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, dispatch = _a.dispatch, loading = _a.loading;
+    var classes = useStyles$2();
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        var form = e.target;
+        var formData = new FormData(form);
+        var values = Object.fromEntries(formData.entries());
+        dispatch({ type: 'submit-form', context: { values: values } });
+    };
+    var formProps = {
+        id: 'follower-authentication-form',
+        className: classes.form,
+        onSubmit: handleSubmit,
+    };
+    switch (state.value) {
+        case 'initial':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.initialInputLabel, key: "identifier-input", id: "identifier-input", name: "identifier" }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.initialCtaButtonLabel)));
+        case 'signUp':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpPhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone" }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name" }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpEmailInputLabel, key: "email-input", id: "email-input", name: "email" }),
+                React__default.createElement(TextField$1, { disabled: loading, select: true, label: messages.signUpLocationInputLabel, key: "location-input", id: "location-input", name: "location" }, locationOptions.map(function (locationOption) { return (React__default.createElement(MenuItem, { key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
+                React__default.createElement(Typography$1, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpMonthInputLabel, key: "birthday-month-input", id: "birthday-month-input", name: "birthdayMonth" }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.signUpDayInputLabel, key: "birthday-date-input", id: "birthday-date-input", name: "birthdayDate" }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signUp)));
+        case 'emailFound':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.defaultFormValues.email }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.emailFoundCtaButtonLabel)));
+        case 'emailAuthCode':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.emailAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code" }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'emailPasswordSignIn':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.defaultFormValues.email, InputLabelProps: { shrink: true } }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'phoneFound':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.phoneFoundCtaButtonLabel)));
+        case 'phoneAuthCode':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.phoneAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code" }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'phonePasswordSignIn':
+            return (React__default.createElement("form", __assign({}, formProps),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.defaultFormValues.phone, InputLabelProps: { shrink: true } }),
+                React__default.createElement(TextField$1, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React__default.createElement(Button$1, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'welcome':
+            return null;
+        default:
+            return null;
+    }
+};
+
+var useStyles$1 = makeStyles(function () { return ({
+    main: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationAltActions = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, dispatch = _a.dispatch, messages = _a.messages, logos = _a.logos;
+    var classes = useStyles$1();
+    switch (state.value) {
+        case 'initial':
+            return (React__default.createElement(Box, { className: classes.main },
+                React__default.createElement(Divider$1, null),
+                React__default.createElement(Button$1, { variant: "outlined", startIcon: logos.facebook, onClick: function () {
+                        dispatch({ type: 'click-facebook-continue' });
+                    } }, messages.continueWithFacebookButtonLabel),
+                React__default.createElement(Button$1, { variant: "outlined", startIcon: logos.google, onClick: function () {
+                        dispatch({ type: 'click-google-continue' });
+                    } }, messages.continueWithGoogleButtonLabel)));
+        case 'signUp':
+            return null;
+        case 'emailFound':
+            return (React__default.createElement(Box, { className: classes.main },
+                React__default.createElement(Divider$1, null),
+                React__default.createElement(Button$1, { variant: "outlined", onClick: function () {
+                        dispatch({ type: 'click-password-continue' });
+                    } }, messages.signInWithPassword)));
+        case 'emailAuthCode':
+            return null;
+        case 'emailPasswordSignIn':
+            return (React__default.createElement(Box, { className: classes.main },
+                React__default.createElement(Divider$1, null),
+                React__default.createElement(Button$1, { variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        dispatch({ type: 'click-get-code', context: { values: values } });
+                    } }, messages.emailFoundCtaButtonLabel)));
+        case 'phoneFound':
+            return null;
+        case 'phoneAuthCode':
+            return null;
+        case 'phonePasswordSignIn':
+            return (React__default.createElement(Box, { className: classes.main },
+                React__default.createElement(Divider$1, null),
+                React__default.createElement(Button$1, { variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        dispatch({ type: 'click-get-code', context: { values: values } });
+                    } }, messages.phoneFoundCtaButtonLabel)));
+        case 'welcome':
+            return (React__default.createElement(Button$1, { onClick: function () {
+                    dispatch({ type: 'click-done' });
+                } }, messages.done));
+        default:
+            return null;
+    }
+};
+
+var FollowerAuthenticationBody = function () {
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(FollowerAuthenticationForm, null),
+        React__default.createElement(FollowerAuthenticationAltActions, null)));
+};
+
+var FollowerAuthenticationFooter = function () {
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, logos = _a.logos;
+    console.log(logos.popmenu);
+    return (React__default.createElement(Box, { display: "flex", gridGap: 8 },
+        React__default.createElement(Typography$1, { variant: "body2" }, messages.poweredBy),
+        logos.popmenu));
+};
+
+var FollowerAuthenticationTitle = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
+    var title = messages[state.value + "Title"];
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Typography$1, { variant: "h1", align: "center" }, title)));
+};
+
+var FollowerAuthenticationInfo = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
+    var info = messages[state.value + "Info"];
+    if (!info)
+        return null;
+    return (React__default.createElement(Box, null,
+        React__default.createElement(Typography$1, { align: "center" }, info)));
+};
+
+var useStyles = makeStyles(function () { return ({
+    root: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+    },
+}); });
+var FollowerAuthenticationCloseButton = function () {
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, dispatch = _a.dispatch;
+    var classes = useStyles();
+    var handleClose = function () {
+        dispatch({ type: 'click-close' });
+    };
+    return (React__default.createElement(IconButton$1, { classes: classes, "aria-label": messages.closeButtonLabel, onClick: handleClose },
+        React__default.createElement(SvgX, null)));
+};
+
+var theme = {
+    palette: {
+        primary: { main: '#2E3042' },
+    },
+    typography: {
+        h1: {
+            fontFamily: 'Poppins',
+            fontSize: '24px',
+            fontWeight: 400,
+            lineHeight: '36px',
+        },
+    },
+    props: {
+        MuiTextField: {
+            variant: 'outlined',
+            fullWidth: true,
+        },
+        MuiButton: {
+            variant: 'contained',
+            color: 'primary',
+            disableElevation: true,
+            fullWidth: true,
+        },
+    },
+    overrides: {
+        MuiButton: {
+            root: {
+                borderRadius: 32,
+                textTransform: 'none',
+            },
+        },
+    },
+};
+
+var FollowerAuthenticationDialog = function (props) {
+    var open = props.open, restProps = __rest(props, ["open"]);
+    var theme$1 = createTheme(theme);
+    var fullScreen = useMediaQuery(function (_a) {
+        var breakpoints = _a.breakpoints;
+        return breakpoints.down('sm');
+    });
+    var handleClose = function () {
+        props.dispatch({ type: 'click-close' });
+    };
+    return (React__default.createElement(ThemeProvider, { theme: theme$1 },
+        React__default.createElement(FollowerAuthenticationDialogContextProvider, { value: restProps },
+            React__default.createElement(Dialog, { open: open, fullScreen: fullScreen, onClose: handleClose },
+                React__default.createElement(FollowerAuthenticationContent, null,
+                    React__default.createElement(FollowerAuthenticationCloseButton, null),
+                    React__default.createElement(FollowerAuthenticationGraphic, null),
+                    React__default.createElement(FollowerAuthenticationTitle, null),
+                    React__default.createElement(FollowerAuthenticationInfo, null),
+                    React__default.createElement(FollowerAuthenticationBody, null),
+                    React__default.createElement(FollowerAuthenticationFooter, null))))));
+};
+
 var useCollapsibleText = function () {
     var _a = useState(false), open = _a[0], setOpen = _a[1];
     var collapseState = useState(false);
@@ -1087,5 +1374,5 @@ var useTabs = function (options) {
     };
 };
 
-export { Avatar, BrowserSilhouette, Button, Checkbox, Chip, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, TabPanel, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText, useTabs };
+export { Avatar, BrowserSilhouette, Button, Checkbox, Chip, CollapsibleText, Divider, FollowerAuthenticationDialog, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, TabPanel, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText, useTabs };
 //# sourceMappingURL=index.es.js.map