@popmenu/common-ui 0.126.0 → 0.126.2

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationDialog.js

@@ -0,0 +1,37 @@
+import { __rest } from 'tslib';
+import React from 'react';
+import { createTheme, useMediaQuery, ThemeProvider, Dialog } from '@material-ui/core';
+import { FollowerAuthenticationContent } from './FollowerAuthenticationContent.js';
+import { FollowerAuthenticationGraphic } from './FollowerAuthenticationGraphic.js';
+import { FollowerAuthenticationBody } from './FollowerAuthenticationBody.js';
+import { FollowerAuthenticationFooter } from './FollowerAuthenticationFooter.js';
+import { FollowerAuthenticationDialogContextProvider } from './context.js';
+import { FollowerAuthenticationTitle } from './FollowerAuthenticationTitle.js';
+import { FollowerAuthenticationInfo } from './FollowerAuthenticationInfo.js';
+import { FollowerAuthenticationCloseButton } from './FollowerAuthenticationCloseButton.js';
+import { theme } from './theme.js';
+
+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 () {
+        restProps.onActionButtonClick('close');
+    };
+    return (React.createElement(ThemeProvider, { theme: theme$1 },
+        React.createElement(FollowerAuthenticationDialogContextProvider, { value: restProps },
+            React.createElement(Dialog, { open: open, fullScreen: fullScreen, onClose: handleClose },
+                React.createElement(FollowerAuthenticationContent, null,
+                    React.createElement(FollowerAuthenticationCloseButton, null),
+                    React.createElement(FollowerAuthenticationGraphic, null),
+                    React.createElement(FollowerAuthenticationTitle, null),
+                    React.createElement(FollowerAuthenticationInfo, null),
+                    React.createElement(FollowerAuthenticationBody, null),
+                    React.createElement(FollowerAuthenticationFooter, null))))));
+};
+
+export { FollowerAuthenticationDialog };
+//# sourceMappingURL=FollowerAuthenticationDialog.js.map

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationDialog.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationDialog.tsx"],"sourcesContent":["import React from 'react'\nimport { FollowerAuthenticationDialogProps } from './FollowerAuthenticationDialogProps'\nimport { createTheme, Dialog, ThemeProvider, useMediaQuery } from '@material-ui/core'\nimport { FollowerAuthenticationContent } from './FollowerAuthenticationContent'\nimport { FollowerAuthenticationGraphic } from './FollowerAuthenticationGraphic'\nimport { FollowerAuthenticationBody } from './FollowerAuthenticationBody'\nimport { FollowerAuthenticationFooter } from './FollowerAuthenticationFooter'\nimport { FollowerAuthenticationDialogContextProvider } from './context'\nimport { FollowerAuthenticationTitle } from './FollowerAuthenticationTitle'\nimport { FollowerAuthenticationInfo } from './FollowerAuthenticationInfo'\nimport { FollowerAuthenticationCloseButton } from './FollowerAuthenticationCloseButton'\nimport { theme as themeOptions } from './theme'\n\nexport const FollowerAuthenticationDialog = (props: FollowerAuthenticationDialogProps) => {\n  const { open, ...restProps } = props\n  const theme = createTheme(themeOptions)\n  const fullScreen = useMediaQuery(({ breakpoints }) => breakpoints.down('sm'))\n  const handleClose = () => {\n    restProps.onActionButtonClick('close')\n  }\n  return (\n    <ThemeProvider theme={theme}>\n      <FollowerAuthenticationDialogContextProvider value={restProps}>\n        <Dialog open={open} fullScreen={fullScreen} onClose={handleClose}>\n          <FollowerAuthenticationContent>\n            <FollowerAuthenticationCloseButton />\n            <FollowerAuthenticationGraphic />\n            <FollowerAuthenticationTitle />\n            <FollowerAuthenticationInfo />\n            <FollowerAuthenticationBody />\n            <FollowerAuthenticationFooter />\n          </FollowerAuthenticationContent>\n        </Dialog>\n      </FollowerAuthenticationDialogContextProvider>\n    </ThemeProvider>\n  )\n}\n"],"names":["theme","themeOptions"],"mappings":";;;;;;;;;;;;;AAaO,IAAM,4BAA4B,GAAG,UAAC,KAAwC,EAAA;IAC3E,IAAA,IAAI,GAAmB,KAAK,CAAxB,IAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA9B,CAAsB,MAAA,CAAA,CAAF;AAC1B,IAAA,IAAMA,OAAK,GAAG,WAAW,CAACC,KAAY,CAAC;AACvC,IAAA,IAAM,UAAU,GAAG,aAAa,CAAC,UAAC,EAAe,EAAA;AAAb,QAAA,IAAA,WAAW,GAAA,EAAA,CAAA,WAAA;AAAO,QAAA,OAAA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AAAtB,KAAsB,CAAC;AAC7E,IAAA,IAAM,WAAW,GAAG,YAAA;AAClB,QAAA,SAAS,CAAC,mBAAmB,CAAC,OAAO,CAAC;AACxC,KAAC;AACD,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,aAAa,EAAC,EAAA,KAAK,EAAED,OAAK,EAAA;AACzB,QAAA,KAAA,CAAA,aAAA,CAAC,2CAA2C,EAAA,EAAC,KAAK,EAAE,SAAS,EAAA;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAA;AAC9D,gBAAA,KAAA,CAAA,aAAA,CAAC,6BAA6B,EAAA,IAAA;AAC5B,oBAAA,KAAA,CAAA,aAAA,CAAC,iCAAiC,EAAG,IAAA,CAAA;AACrC,oBAAA,KAAA,CAAA,aAAA,CAAC,6BAA6B,EAAG,IAAA,CAAA;AACjC,oBAAA,KAAA,CAAA,aAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA;AAC/B,oBAAA,KAAA,CAAA,aAAA,CAAC,0BAA0B,EAAG,IAAA,CAAA;AAC9B,oBAAA,KAAA,CAAA,aAAA,CAAC,0BAA0B,EAAG,IAAA,CAAA;AAC9B,oBAAA,KAAA,CAAA,aAAA,CAAC,4BAA4B,EAAG,IAAA,CAAA,CACF,CACzB,CACmC,CAChC;AAEpB;;;;"}

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

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+export declare type FollowerAuthenticationDialogProps = {
+    open: boolean;
+    state: ReducerState;
+    messages: Record<MessageKey, ReactNode> & {
+        closeButtonLabel: string;
+    };
+    locationOptions: LocationOption[];
+    loading: boolean;
+    graphics: Record<`${ReducerStateValue}`, string>;
+    logos: Record<'popmenu' | 'facebook' | 'google', ReactNode>;
+    onActionButtonClick: (eventType: ClickEventType, values?: Record<string, string>) => void;
+};
+export declare type ReducerState = {
+    value: ReducerStateValue;
+    context: {
+        email?: string;
+        phone?: string;
+        name?: string;
+    };
+};
+export declare type ReducerStateValue = 'initial' | 'signUp' | 'emailFound' | 'indirectUserFound' | 'emailAuthCode' | 'emailPasswordSignIn' | 'phoneFound' | 'phoneAuthCode' | 'phonePasswordSignIn' | 'welcome' | 'requirePhone';
+export declare type ClickEventType = 'submit-form' | 'click-close' | 'code-sent' | 'request-auth-code-email' | 'request-auth-code-sms' | 'close' | 'use-different-account' | 'sign-in-with-password' | 'sign-in-with-facebook' | 'sign-in-with-google';
+export declare type MessageKey = `${ReducerStateValue}Title` | `${ReducerStateValue}Info` | `${ReducerStateValue}GraphicAlt` | 'requirePhoneInputLabel' | 'requirePhoneCtaButtonLabel' | 'indirectUserFoundLabel' | 'indirectUserFoundCtaButtonLabel' | 'indirectUserFoundCtaButtonLabelAlt' | 'signUpPhoneErrorText' | 'signUpPhoneInputLabel' | 'signUpNameInputLabel' | 'signUpEmailErrorText' | 'signUpEmailInputLabel' | 'signUpLocationErrorText' | 'signUpLocationInputLabel' | 'signUpBirthdaySectionLabel' | 'signUpMonthInputLabel' | 'signUpDayInputLabel' | 'signUp' | 'signUpFinePrint' | 'emailFoundInputLabel' | 'emailFoundCtaButtonLabel' | 'phoneFoundInputLabel' | 'phoneFoundCtaButtonLabel' | 'emailAuthCodeInputLabel' | 'phoneAuthCodeInputLabel' | 'resendAuthCode' | 'or' | 'popmenuLogoAlt' | 'continueWithFacebookButtonLabel' | 'continueWithGoogleButtonLabel' | 'initialCtaButtonLabel' | 'initialInputLabel' | 'passwordInputLabel' | 'poweredBy' | 'done' | 'signIn' | 'signInWithPassword';
+declare type LocationOption = {
+    label: string;
+    value: string;
+};
+export {};

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

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

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationFooter.js

@@ -0,0 +1,13 @@
+import { Box, Typography } from '@material-ui/core';
+import React from 'react';
+import { useFollowerAuthenticationDialogContext } from './context.js';
+
+var FollowerAuthenticationFooter = function () {
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, logos = _a.logos;
+    return (React.createElement(Box, { display: "flex", gridGap: 8 },
+        React.createElement(Typography, { variant: "body2" }, messages.poweredBy),
+        logos.popmenu));
+};
+
+export { FollowerAuthenticationFooter };
+//# sourceMappingURL=FollowerAuthenticationFooter.js.map

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationFooter.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationFooter.tsx"],"sourcesContent":["import { Box, Typography } from '@material-ui/core'\nimport React from 'react'\nimport { useFollowerAuthenticationDialogContext } from './context'\n\nexport const FollowerAuthenticationFooter = () => {\n  const { messages, logos } = useFollowerAuthenticationDialogContext()\n  return (\n    <Box display=\"flex\" gridGap={8}>\n      <Typography variant=\"body2\">{messages.poweredBy}</Typography>\n      {logos.popmenu}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAIa,IAAA,4BAA4B,GAAG,YAAA;IACpC,IAAA,EAAA,GAAsB,sCAAsC,EAAE,EAA5D,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAA6C;IACpE,QACE,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,CAAC,EAAA;QAC5B,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,OAAO,EAAC,OAAO,EAAE,EAAA,QAAQ,CAAC,SAAS,CAAc;AAC5D,QAAA,KAAK,CAAC,OAAO,CACV;AAEV;;;;"}

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

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

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationForm.js

@@ -0,0 +1,149 @@
+import { __assign } from 'tslib';
+import React, { useRef, useState, useEffect } from 'react';
+import { useFollowerAuthenticationDialogContext } from './context.js';
+import { makeStyles, TextField, Button, MenuItem, Typography } from '@material-ui/core';
+
+var useStyles = makeStyles(function () { return ({
+    form: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: '100%',
+        gridGap: 16,
+    },
+}); });
+var northAmericanPhoneRegex = /^(\()?[2-9]{1}\d{2}(\))?[-\s.]?[2-9]{1}\d{2}[-\s.]?\d{4}$/;
+var ukPhoneRegex = /^((\+?44\s?|0044\s?)(\s?\d{3,5}|\(\d{3,5}\))(\s?\d{3,4})(\s?\d{3,4})$|^07\d{9}$)/;
+var validatePhoneNumber = function (phone) {
+    if (!phone)
+        return false;
+    return northAmericanPhoneRegex.test(phone) || ukPhoneRegex.test(phone);
+};
+var FollowerAuthenticationForm = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, locationOptions = _a.locationOptions, onActionButtonClick = _a.onActionButtonClick, loading = _a.loading;
+    var classes = useStyles();
+    // sign-up form state
+    var formRef = useRef(null);
+    var _b = useState(false), formValidity = _b[0], setFormValidity = _b[1];
+    var _c = useState(), showPhoneErrorText = _c[0], setShowPhoneErrorText = _c[1];
+    var _d = useState(), showEmailErrorText = _d[0], setShowEmailErrorText = _d[1];
+    var _e = useState(), showLocationErrorText = _e[0], setShowLocationErrorText = _e[1];
+    var _f = useState(state.context.phone || ''), signUpPhoneValue = _f[0], setSignUpPhoneValue = _f[1];
+    var _g = useState(state.context.email || ''), signUpEmailValue = _g[0], setSignUpEmailValue = _g[1];
+    var checkFieldValidity = function (e) {
+        var _a, _b;
+        var fieldName = e.target.name;
+        var fieldValue = e.target.value;
+        switch (fieldName) {
+            case 'phone':
+                var isPhoneValid = validatePhoneNumber(fieldValue);
+                setSignUpPhoneValue(fieldValue);
+                setShowPhoneErrorText(!isPhoneValid && fieldValue.length > 0);
+                break;
+            case 'email':
+                var emailField = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem(fieldName);
+                var isEmailValid = (_b = emailField === null || emailField === void 0 ? void 0 : emailField.validity.valid) !== null && _b !== void 0 ? _b : false;
+                setSignUpEmailValue(fieldValue);
+                setShowEmailErrorText(!isEmailValid && fieldValue.length > 0);
+                break;
+            case 'location':
+                setShowLocationErrorText(!fieldValue);
+                break;
+        }
+    };
+    useEffect(function () {
+        var _a;
+        var hasValidPhone = Boolean(signUpPhoneValue) && !showPhoneErrorText;
+        var hasValidEmail = Boolean(signUpEmailValue) && !showEmailErrorText;
+        var locationField = (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.elements.namedItem('location');
+        var hasValidLocation = locationField ? Boolean(locationField.value) : true;
+        var hasValidContact = hasValidPhone || hasValidEmail;
+        setFormValidity(hasValidContact && hasValidLocation);
+    }, [signUpPhoneValue, signUpEmailValue, showPhoneErrorText, showEmailErrorText, showLocationErrorText]);
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        var form = e.target;
+        var formData = new FormData(form);
+        var values = Object.fromEntries(formData.entries());
+        onActionButtonClick('submit-form', values);
+    };
+    var formProps = {
+        id: 'follower-authentication-form',
+        className: classes.form,
+        onSubmit: handleSubmit,
+    };
+    switch (state.value) {
+        case 'initial':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.initialInputLabel, key: "identifier-input", id: "identifier-input", name: "identifier" }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.initialCtaButtonLabel)));
+        case 'signUp':
+            return (React.createElement("form", __assign({ ref: formRef }, formProps, { onInvalid: function (e) {
+                    e.preventDefault();
+                } }),
+                React.createElement(TextField, { disabled: loading, label: messages.signUpPhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone", onChange: checkFieldValidity, error: showPhoneErrorText, helperText: showPhoneErrorText && messages.signUpPhoneErrorText, inputProps: {
+                        required: signUpEmailValue ? false : true,
+                    }, defaultValue: state.context.phone }),
+                React.createElement(TextField, { disabled: loading, label: messages.signUpNameInputLabel, key: "name-input", id: "name-input", name: "name", inputProps: { required: true } }),
+                React.createElement(TextField, { disabled: loading, label: messages.signUpEmailInputLabel, key: "email-input", id: "email-input", name: "email", error: showEmailErrorText, helperText: showEmailErrorText && messages.signUpEmailErrorText, onChange: checkFieldValidity, inputProps: {
+                        required: signUpPhoneValue ? false : true,
+                        type: 'email',
+                    }, defaultValue: state.context.email }),
+                React.createElement(TextField, { disabled: loading, select: true, onChange: checkFieldValidity, label: messages.signUpLocationInputLabel, error: showLocationErrorText, helperText: showLocationErrorText && messages.signUpLocationErrorText, key: "location-input", id: "location-input", inputProps: { required: true }, name: "location" }, locationOptions.map(function (locationOption) { return (React.createElement(MenuItem, { "data-cy": 'option', key: locationOption.value, value: locationOption.value }, locationOption.label)); })),
+                React.createElement(Typography, { style: { alignSelf: 'start' } }, messages.signUpBirthdaySectionLabel),
+                React.createElement(TextField, { disabled: loading, label: messages.signUpMonthInputLabel, key: "birthday-month-input", id: "birthday-month-input", name: "birthdayMonth" }),
+                React.createElement(TextField, { disabled: loading, label: messages.signUpDayInputLabel, key: "birthday-date-input", id: "birthday-date-input", name: "birthdayDate" }),
+                React.createElement(Button, { disabled: loading || !formValidity, type: "submit" }, messages.signUp)));
+        case 'emailFound':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.emailFoundCtaButtonLabel)));
+        case 'emailAuthCode':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.emailAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code" }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'indirectUserFound': {
+            if (state.context.email) {
+                return (React.createElement("form", __assign({}, formProps),
+                    React.createElement(TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email }),
+                    React.createElement(Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
+            }
+            else if (state.context.phone) {
+                return (React.createElement("form", __assign({}, formProps),
+                    React.createElement(TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
+                    React.createElement(Button, { disabled: loading, type: "submit" }, messages.indirectUserFoundCtaButtonLabel)));
+            }
+            else
+                return null;
+        }
+        case 'emailPasswordSignIn':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.emailFoundInputLabel, key: "email-input", id: "email-input", name: "email", value: state.context.email, InputLabelProps: { shrink: true } }),
+                React.createElement(TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'phoneFound':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.phoneFoundCtaButtonLabel)));
+        case 'phoneAuthCode':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.phoneAuthCodeInputLabel, key: "code-input", id: "code-input", name: "code", autoComplete: "one-time-code" }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'phonePasswordSignIn':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.phoneFoundInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone, InputLabelProps: { shrink: true } }),
+                React.createElement(TextField, { disabled: loading, label: messages.passwordInputLabel, key: "password-input", id: "password-input", name: "password", inputProps: { type: 'password' } }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.signIn)));
+        case 'requirePhone':
+            return (React.createElement("form", __assign({}, formProps),
+                React.createElement(TextField, { disabled: loading, label: messages.requirePhoneInputLabel, key: "phone-input", id: "phone-input", name: "phone", value: state.context.phone }),
+                React.createElement(Button, { disabled: loading, type: "submit" }, messages.requirePhoneCtaButtonLabel)));
+        case 'welcome':
+            return null;
+        default:
+            return null;
+    }
+};
+
+export { FollowerAuthenticationForm };
+//# sourceMappingURL=FollowerAuthenticationForm.js.map

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationForm.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationForm.tsx"],"sourcesContent":["import React, { ChangeEventHandler, useEffect, useRef, useState } from 'react'\nimport { useFollowerAuthenticationDialogContext } from './context'\nimport { Button, makeStyles, MenuItem, TextField, Typography } from '@material-ui/core'\n\nconst useStyles = makeStyles(() => ({\n  form: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    width: '100%',\n    gridGap: 16,\n  },\n}))\n\nconst northAmericanPhoneRegex = /^(\\()?[2-9]{1}\\d{2}(\\))?[-\\s.]?[2-9]{1}\\d{2}[-\\s.]?\\d{4}$/\nconst ukPhoneRegex = /^((\\+?44\\s?|0044\\s?)(\\s?\\d{3,5}|\\(\\d{3,5}\\))(\\s?\\d{3,4})(\\s?\\d{3,4})$|^07\\d{9}$)/\n\nconst validatePhoneNumber = (phone: string): boolean => {\n  if (!phone) return false\n  return northAmericanPhoneRegex.test(phone) || ukPhoneRegex.test(phone)\n}\n\nexport const FollowerAuthenticationForm = () => {\n  const { state, messages, locationOptions, onActionButtonClick, loading } = useFollowerAuthenticationDialogContext()\n  const classes = useStyles()\n\n  // sign-up form state\n  const formRef = useRef<HTMLFormElement>(null)\n  const [formValidity, setFormValidity] = useState(false)\n  const [showPhoneErrorText, setShowPhoneErrorText] = useState<boolean | undefined>()\n  const [showEmailErrorText, setShowEmailErrorText] = useState<boolean | undefined>()\n  const [showLocationErrorText, setShowLocationErrorText] = useState<boolean | undefined>()\n  const [signUpPhoneValue, setSignUpPhoneValue] = useState(state.context.phone || '')\n  const [signUpEmailValue, setSignUpEmailValue] = useState(state.context.email || '')\n\n  const checkFieldValidity: ChangeEventHandler<HTMLInputElement> = (e) => {\n    const fieldName = e.target.name\n    const fieldValue = e.target.value\n\n    switch (fieldName) {\n      case 'phone':\n        const isPhoneValid = validatePhoneNumber(fieldValue)\n        setSignUpPhoneValue(fieldValue)\n        setShowPhoneErrorText(!isPhoneValid && fieldValue.length > 0)\n        break\n      case 'email':\n        const emailField = formRef.current?.elements.namedItem(fieldName) as HTMLInputElement\n        const isEmailValid = emailField?.validity.valid ?? false\n        setSignUpEmailValue(fieldValue)\n        setShowEmailErrorText(!isEmailValid && fieldValue.length > 0)\n        break\n      case 'location':\n        setShowLocationErrorText(!fieldValue)\n        break\n      default:\n        break\n    }\n  }\n\n  useEffect(() => {\n    const hasValidPhone = Boolean(signUpPhoneValue) && !showPhoneErrorText\n    const hasValidEmail = Boolean(signUpEmailValue) && !showEmailErrorText\n\n    const locationField = formRef.current?.elements.namedItem('location') as HTMLInputElement\n    const hasValidLocation = locationField ? Boolean(locationField.value) : true\n\n    const hasValidContact = hasValidPhone || hasValidEmail\n    setFormValidity(hasValidContact && hasValidLocation)\n  }, [signUpPhoneValue, signUpEmailValue, showPhoneErrorText, showEmailErrorText, showLocationErrorText])\n\n  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault()\n    const form = e.target as HTMLFormElement\n    const formData = new FormData(form)\n    const values = Object.fromEntries(formData.entries()) as Record<string, string>\n    onActionButtonClick('submit-form', values)\n  }\n  const formProps = {\n    id: 'follower-authentication-form',\n    className: classes.form,\n    onSubmit: handleSubmit,\n  }\n  switch (state.value) {\n    case 'initial':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.initialInputLabel}\n            key=\"identifier-input\"\n            id=\"identifier-input\"\n            name=\"identifier\"\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.initialCtaButtonLabel}\n          </Button>\n        </form>\n      )\n    case 'signUp':\n      return (\n        <form\n          ref={formRef}\n          {...formProps}\n          onInvalid={(e) => {\n            e.preventDefault()\n          }}\n        >\n          <TextField\n            disabled={loading}\n            label={messages.signUpPhoneInputLabel}\n            key=\"phone-input\"\n            id=\"phone-input\"\n            name=\"phone\"\n            onChange={checkFieldValidity}\n            error={showPhoneErrorText}\n            helperText={showPhoneErrorText && messages.signUpPhoneErrorText}\n            inputProps={{\n              required: signUpEmailValue ? false : true,\n            }}\n            defaultValue={state.context.phone}\n          />\n          <TextField\n            disabled={loading}\n            label={messages.signUpNameInputLabel}\n            key=\"name-input\"\n            id=\"name-input\"\n            name=\"name\"\n            inputProps={{ required: true }}\n          />\n          <TextField\n            disabled={loading}\n            label={messages.signUpEmailInputLabel}\n            key=\"email-input\"\n            id=\"email-input\"\n            name=\"email\"\n            error={showEmailErrorText}\n            helperText={showEmailErrorText && messages.signUpEmailErrorText}\n            onChange={checkFieldValidity}\n            inputProps={{\n              required: signUpPhoneValue ? false : true,\n              type: 'email',\n            }}\n            defaultValue={state.context.email}\n          />\n          <TextField\n            disabled={loading}\n            select\n            onChange={checkFieldValidity}\n            label={messages.signUpLocationInputLabel}\n            error={showLocationErrorText}\n            helperText={showLocationErrorText && messages.signUpLocationErrorText}\n            key=\"location-input\"\n            id=\"location-input\"\n            inputProps={{ required: true }}\n            name=\"location\"\n          >\n            {locationOptions.map((locationOption) => (\n              <MenuItem data-cy={'option'} key={locationOption.value} value={locationOption.value}>\n                {locationOption.label}\n              </MenuItem>\n            ))}\n          </TextField>\n          <Typography style={{ alignSelf: 'start' }}>{messages.signUpBirthdaySectionLabel}</Typography>\n          <TextField\n            disabled={loading}\n            label={messages.signUpMonthInputLabel}\n            key=\"birthday-month-input\"\n            id=\"birthday-month-input\"\n            name=\"birthdayMonth\"\n          />\n          <TextField\n            disabled={loading}\n            label={messages.signUpDayInputLabel}\n            key=\"birthday-date-input\"\n            id=\"birthday-date-input\"\n            name=\"birthdayDate\"\n          />\n          <Button disabled={loading || !formValidity} type=\"submit\">\n            {messages.signUp}\n          </Button>\n        </form>\n      )\n    case 'emailFound':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.emailFoundInputLabel}\n            key=\"email-input\"\n            id=\"email-input\"\n            name=\"email\"\n            value={state.context.email}\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.emailFoundCtaButtonLabel}\n          </Button>\n        </form>\n      )\n    case 'emailAuthCode':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.emailAuthCodeInputLabel}\n            key=\"code-input\"\n            id=\"code-input\"\n            name=\"code\"\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.signIn}\n          </Button>\n        </form>\n      )\n    case 'indirectUserFound': {\n      if (state.context.email) {\n        return (\n          <form {...formProps}>\n            <TextField\n              disabled={loading}\n              label={messages.emailFoundInputLabel}\n              key=\"email-input\"\n              id=\"email-input\"\n              name=\"email\"\n              value={state.context.email}\n            />\n            <Button disabled={loading} type=\"submit\">\n              {messages.indirectUserFoundCtaButtonLabel}\n            </Button>\n          </form>\n        )\n      } else if (state.context.phone) {\n        return (\n          <form {...formProps}>\n            <TextField\n              disabled={loading}\n              label={messages.phoneFoundInputLabel}\n              key=\"phone-input\"\n              id=\"phone-input\"\n              name=\"phone\"\n              value={state.context.phone}\n            />\n            <Button disabled={loading} type=\"submit\">\n              {messages.indirectUserFoundCtaButtonLabel}\n            </Button>\n          </form>\n        )\n      } else return null\n    }\n    case 'emailPasswordSignIn':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.emailFoundInputLabel}\n            key=\"email-input\"\n            id=\"email-input\"\n            name=\"email\"\n            value={state.context.email}\n            InputLabelProps={{ shrink: true }}\n          />\n          <TextField\n            disabled={loading}\n            label={messages.passwordInputLabel}\n            key=\"password-input\"\n            id=\"password-input\"\n            name=\"password\"\n            inputProps={{ type: 'password' }}\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.signIn}\n          </Button>\n        </form>\n      )\n    case 'phoneFound':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.phoneFoundInputLabel}\n            key=\"phone-input\"\n            id=\"phone-input\"\n            name=\"phone\"\n            value={state.context.phone}\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.phoneFoundCtaButtonLabel}\n          </Button>\n        </form>\n      )\n    case 'phoneAuthCode':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.phoneAuthCodeInputLabel}\n            key=\"code-input\"\n            id=\"code-input\"\n            name=\"code\"\n            autoComplete=\"one-time-code\"\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.signIn}\n          </Button>\n        </form>\n      )\n    case 'phonePasswordSignIn':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.phoneFoundInputLabel}\n            key=\"phone-input\"\n            id=\"phone-input\"\n            name=\"phone\"\n            value={state.context.phone}\n            InputLabelProps={{ shrink: true }}\n          />\n          <TextField\n            disabled={loading}\n            label={messages.passwordInputLabel}\n            key=\"password-input\"\n            id=\"password-input\"\n            name=\"password\"\n            inputProps={{ type: 'password' }}\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.signIn}\n          </Button>\n        </form>\n      )\n    case 'requirePhone':\n      return (\n        <form {...formProps}>\n          <TextField\n            disabled={loading}\n            label={messages.requirePhoneInputLabel}\n            key=\"phone-input\"\n            id=\"phone-input\"\n            name=\"phone\"\n            value={state.context.phone}\n          />\n          <Button disabled={loading} type=\"submit\">\n            {messages.requirePhoneCtaButtonLabel}\n          </Button>\n        </form>\n      )\n    case 'welcome':\n      return null\n    default:\n      return null\n  }\n}\n"],"names":[],"mappings":"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"}

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

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

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationGraphic.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useFollowerAuthenticationDialogContext } from './context.js';
+import { Box } from '@material-ui/core';
+
+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.createElement(Box, null,
+        React.createElement("img", { src: graphic, alt: messages[state.value + "GraphicAlt"] })));
+};
+
+export { FollowerAuthenticationGraphic };
+//# sourceMappingURL=FollowerAuthenticationGraphic.js.map

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationGraphic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationGraphic.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationGraphic.tsx"],"sourcesContent":["import React from 'react'\nimport { useFollowerAuthenticationDialogContext } from './context'\nimport { Box } from '@material-ui/core'\nimport { MessageKey } from './FollowerAuthenticationDialogProps'\n\nexport const FollowerAuthenticationGraphic = () => {\n  const { state, messages, graphics } = useFollowerAuthenticationDialogContext()\n  const graphic = graphics[state.value]\n  if (!graphic) return null\n  return (\n    <Box>\n      <img src={graphic} alt={messages[`${state.value}GraphicAlt` as MessageKey] as string} />\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAKa,IAAA,6BAA6B,GAAG,YAAA;AACrC,IAAA,IAAA,EAAgC,GAAA,sCAAsC,EAAE,EAAtE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAA6C;IAC9E,IAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC;AACrC,IAAA,IAAI,CAAC,OAAO;AAAE,QAAA,OAAO,IAAI;IACzB,QACE,oBAAC,GAAG,EAAA,IAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAI,KAAK,CAAC,KAAK,GAA0B,YAAA,CAAW,EAAI,CAAA,CACpF;AAEV;;;;"}

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

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

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationInfo.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useFollowerAuthenticationDialogContext } from './context.js';
+import { Box, Typography } from '@material-ui/core';
+
+var FollowerAuthenticationInfo = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
+    var info = messages[state.value + "Info"];
+    if (!info)
+        return null;
+    return (React.createElement(Box, null,
+        React.createElement(Typography, { align: "center" }, info)));
+};
+
+export { FollowerAuthenticationInfo };
+//# sourceMappingURL=FollowerAuthenticationInfo.js.map

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationInfo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationInfo.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationInfo.tsx"],"sourcesContent":["import React from 'react'\nimport { useFollowerAuthenticationDialogContext } from './context'\nimport { Box, Typography } from '@material-ui/core'\nimport { MessageKey } from './FollowerAuthenticationDialogProps'\n\nexport const FollowerAuthenticationInfo = () => {\n  const { state, messages } = useFollowerAuthenticationDialogContext()\n  const info = messages[`${state.value}Info` as MessageKey]\n\n  if (!info) return null\n  return (\n    <Box>\n      <Typography align=\"center\">{info}</Typography>\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAKa,IAAA,0BAA0B,GAAG,YAAA;IAClC,IAAA,EAAA,GAAsB,sCAAsC,EAAE,EAA5D,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAA6C;IACpE,IAAM,IAAI,GAAG,QAAQ,CAAI,KAAK,CAAC,KAAK,GAAoB,MAAA,CAAC;AAEzD,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;IACtB,QACE,oBAAC,GAAG,EAAA,IAAA;QACF,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,KAAK,EAAC,QAAQ,IAAE,IAAI,CAAc,CAC1C;AAEV;;;;"}

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

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

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationTitle.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { useFollowerAuthenticationDialogContext } from './context.js';
+import { Box, Typography } from '@material-ui/core';
+
+var FollowerAuthenticationTitle = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages;
+    var title = messages[state.value + "Title"];
+    return (React.createElement(Box, null,
+        React.createElement(Typography, { variant: "h1", align: "center" }, title)));
+};
+
+export { FollowerAuthenticationTitle };
+//# sourceMappingURL=FollowerAuthenticationTitle.js.map

package/build/esm/components/FollowerAuthenticationDialog/FollowerAuthenticationTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationTitle.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationTitle.tsx"],"sourcesContent":["import React from 'react'\nimport { useFollowerAuthenticationDialogContext } from './context'\nimport { Box, Typography } from '@material-ui/core'\nimport { MessageKey } from './FollowerAuthenticationDialogProps'\n\nexport const FollowerAuthenticationTitle = () => {\n  const { state, messages } = useFollowerAuthenticationDialogContext()\n  const title = messages[`${state.value}Title` as MessageKey]\n  return (\n    <Box>\n      <Typography variant=\"h1\" align=\"center\">\n        {title}\n      </Typography>\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAKa,IAAA,2BAA2B,GAAG,YAAA;IACnC,IAAA,EAAA,GAAsB,sCAAsC,EAAE,EAA5D,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,QAAQ,GAAA,EAAA,CAAA,QAA6C;IACpE,IAAM,KAAK,GAAG,QAAQ,CAAI,KAAK,CAAC,KAAK,GAAqB,OAAA,CAAC;IAC3D,QACE,oBAAC,GAAG,EAAA,IAAA;AACF,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EACpC,EAAA,KAAK,CACK,CACT;AAEV;;;;"}

package/build/esm/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/esm/components/FollowerAuthenticationDialog/context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+
+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;
+};
+
+export { FollowerAuthenticationDialogContextProvider, useFollowerAuthenticationDialogContext };
+//# sourceMappingURL=context.js.map

package/build/esm/components/FollowerAuthenticationDialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../src/components/FollowerAuthenticationDialog/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport { FollowerAuthenticationDialogProps } from './FollowerAuthenticationDialogProps'\n\nconst FollowerAuthenticationDialogContext = createContext<Omit<FollowerAuthenticationDialogProps, 'open'> | null>(null)\n\nexport const FollowerAuthenticationDialogContextProvider = FollowerAuthenticationDialogContext.Provider\n\nexport const useFollowerAuthenticationDialogContext = () => {\n  const context = useContext(FollowerAuthenticationDialogContext)\n  if (!context) {\n    throw new Error(\n      'useFollowerAuthenticationDialogContext must be called within FollowerAuthenticationDialogContextProvider',\n    )\n  }\n  return context\n}\n"],"names":[],"mappings":";;AAGA,IAAM,mCAAmC,GAAG,aAAa,CAAyD,IAAI,CAAC;AAE1G,IAAA,2CAA2C,GAAG,mCAAmC,CAAC;AAElF,IAAA,sCAAsC,GAAG,YAAA;AACpD,IAAA,IAAM,OAAO,GAAG,UAAU,CAAC,mCAAmC,CAAC;IAC/D,IAAI,CAAC,OAAO,EAAE;AACZ,QAAA,MAAM,IAAI,KAAK,CACb,0GAA0G,CAC3G;AACF;AACD,IAAA,OAAO,OAAO;AAChB;;;;"}

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

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

package/build/esm/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/esm/components/FollowerAuthenticationDialog/theme.js

@@ -0,0 +1,36 @@
+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',
+            },
+        },
+    },
+};
+
+export { theme };
+//# sourceMappingURL=theme.js.map

package/build/esm/components/FollowerAuthenticationDialog/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../../src/components/FollowerAuthenticationDialog/theme.ts"],"sourcesContent":["export const theme = {\n  palette: {\n    primary: { main: '#2E3042' },\n  },\n  typography: {\n    h1: {\n      fontFamily: 'Poppins',\n      fontSize: '24px',\n      fontWeight: 400,\n      lineHeight: '36px',\n    },\n  },\n  props: {\n    MuiTextField: {\n      variant: 'outlined',\n      fullWidth: true,\n    },\n    MuiButton: {\n      variant: 'contained',\n      color: 'primary',\n      disableElevation: true,\n      fullWidth: true,\n    },\n  },\n  overrides: {\n    MuiButton: {\n      root: {\n        borderRadius: 32,\n        textTransform: 'none',\n      },\n    },\n  },\n} as const\n"],"names":[],"mappings":"AAAa,IAAA,KAAK,GAAG;AACnB,IAAA,OAAO,EAAE;AACP,QAAA,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;AAC7B,KAAA;AACD,IAAA,UAAU,EAAE;AACV,QAAA,EAAE,EAAE;AACF,YAAA,UAAU,EAAE,SAAS;AACrB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,UAAU,EAAE,GAAG;AACf,YAAA,UAAU,EAAE,MAAM;AACnB,SAAA;AACF,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,YAAY,EAAE;AACZ,YAAA,OAAO,EAAE,UAAU;AACnB,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA;AACD,QAAA,SAAS,EAAE;AACT,YAAA,OAAO,EAAE,WAAW;AACpB,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,gBAAgB,EAAE,IAAI;AACtB,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA;AACF,KAAA;AACD,IAAA,SAAS,EAAE;AACT,QAAA,SAAS,EAAE;AACT,YAAA,IAAI,EAAE;AACJ,gBAAA,YAAY,EAAE,EAAE;AAChB,gBAAA,aAAa,EAAE,MAAM;AACtB,aAAA;AACF,SAAA;AACF,KAAA;;;;;"}

package/build/esm/components/Icon/Icon.d.ts

@@ -0,0 +1,4 @@
+import { VoidFunctionComponent } from 'react';
+import { IconProps } from './IconProps';
+export declare const iconStaticClassName = "pop-icon";
+export declare const Icon: VoidFunctionComponent<IconProps>;

package/build/esm/components/Icon/Icon.js

@@ -0,0 +1,29 @@
+import { __rest, __assign } from 'tslib';
+import { createElement } from 'react';
+import { useIconStyles } from './IconStyles.js';
+import classNames from 'classnames';
+
+var iconStaticClassName = 'pop-icon';
+var Icon = function (props) {
+    var icon = props.icon, className = props.className, restProps = __rest(props, ["icon", "className"]);
+    var hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label']);
+    if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {
+        restProps['aria-hidden'] = true;
+    }
+    var classes = useIconStyles(props);
+    var isValid = true;
+    if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {
+        isValid = false;
+    }
+    return isValid
+        ? createElement(icon, __assign({ className: classNames([classes.root, iconStaticClassName, className]) }, restProps))
+        : null;
+};
+Icon.defaultProps = {
+    size: 'inherit',
+    color: 'inherit',
+};
+Icon.displayName = 'Icon';
+
+export { Icon, iconStaticClassName };
+//# sourceMappingURL=Icon.js.map

package/build/esm/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { createElement, VoidFunctionComponent } from 'react'\nimport { IconProps } from './IconProps'\nimport { useIconStyles } from './IconStyles'\nimport classNames from 'classnames'\n\nexport const iconStaticClassName = 'pop-icon'\nexport const Icon: VoidFunctionComponent<IconProps> = (props) => {\n  const { icon, className, ...restProps } = props\n  const hasAccessibleAttr = Boolean(restProps['aria-describedby'] || restProps['aria-label'])\n  if (!hasAccessibleAttr && restProps['aria-hidden'] === undefined) {\n    restProps['aria-hidden'] = true\n  }\n  const classes = useIconStyles(props)\n  let isValid = true\n  if (!icon || (typeof icon === 'function' && icon({}) === undefined)) {\n    isValid = false\n  }\n  return isValid\n    ? createElement(icon, { className: classNames([classes.root, iconStaticClassName, className]), ...restProps })\n    : null\n}\n\nIcon.defaultProps = {\n  size: 'inherit',\n  color: 'inherit',\n}\n\nIcon.displayName = 'Icon'\n"],"names":[],"mappings":";;;;;AAKO,IAAM,mBAAmB,GAAG;AAC5B,IAAM,IAAI,GAAqC,UAAC,KAAK,EAAA;AAClD,IAAA,IAAA,IAAI,GAA8B,KAAK,CAAnC,IAAA,EAAE,SAAS,GAAmB,KAAK,CAAxB,SAAA,EAAK,SAAS,GAAK,MAAA,CAAA,KAAK,EAAzC,CAAA,MAAA,EAAA,WAAA,CAAiC,CAAF;AACrC,IAAA,IAAM,iBAAiB,GAAG,OAAO,CAAC,SAAS,CAAC,kBAAkB,CAAC,IAAI,SAAS,CAAC,YAAY,CAAC,CAAC;IAC3F,IAAI,CAAC,iBAAiB,IAAI,SAAS,CAAC,aAAa,CAAC,KAAK,SAAS,EAAE;AAChE,QAAA,SAAS,CAAC,aAAa,CAAC,GAAG,IAAI;AAChC;AACD,IAAA,IAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC;IACpC,IAAI,OAAO,GAAG,IAAI;AAClB,IAAA,IAAI,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC,EAAE;QACnE,OAAO,GAAG,KAAK;AAChB;AACD,IAAA,OAAO;UACH,aAAa,CAAC,IAAI,aAAI,SAAS,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,mBAAmB,EAAE,SAAS,CAAC,CAAC,EAAK,EAAA,SAAS,CAAG;UAC5G,IAAI;AACV;AAEA,IAAI,CAAC,YAAY,GAAG;AAClB,IAAA,IAAI,EAAE,SAAS;AACf,IAAA,KAAK,EAAE,SAAS;CACjB;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/build/esm/components/Icon/IconProps.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface IconProps {
+    /** Adds aria-describedby attribute to the html element */
+    'aria-describedby'?: string;
+    /** Overrides aria-hidden attribute on the html element */
+    'aria-hidden'?: boolean;
+    /** Adds aria-label attribute to the html element */
+    'aria-label'?: string;
+    /** Adds to the class attribute on the html element */
+    className?: string;
+    /** The icon from @popmenu/web-icons to be rendered */
+    icon: string | React.FC<React.SVGProps<SVGSVGElement>>;
+    /** Sets the color of the icon */
+    color?: 'primary' | 'secondary' | 'primary.light' | 'primary.dark' | 'secondary.light' | 'secondary.dark' | string;
+    /** Sets the dimensions of the icon */
+    size?: 'small' | 'medium' | 'large' | 'extra-large' | 'inherit';
+}

package/build/esm/components/Icon/IconStyles.d.ts

@@ -0,0 +1,2 @@
+import { IconProps } from './IconProps';
+export declare const useIconStyles: (props: IconProps) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/Icon/IconStyles.js

@@ -0,0 +1,43 @@
+import { makeStyles } from '@material-ui/core';
+
+var useIconStyles = makeStyles(function (_a) {
+    var spacing = _a.spacing, palette = _a.palette;
+    var getFontSize = function (_a) {
+        var size = _a.size;
+        var sizes = {
+            inherit: 'inherit',
+            small: spacing(1.5),
+            medium: spacing(2),
+            large: spacing(2.5),
+            'extra-large': spacing(3),
+        };
+        return size ? sizes[size] : 'inherit';
+    };
+    var getColor = function (props) {
+        var semanticColors = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];
+        var value = 'inherit';
+        if (props.color) {
+            if (semanticColors.includes(props.color.split('.')[0])) {
+                var _a = props.color.split('.'), color = _a[0], _b = _a[1], variant = _b === void 0 ? 'main' : _b;
+                // @ts-expect-error - todo.
+                value = palette[color][variant];
+            }
+            else if (props.color.search(/^(rgb|hsla|#)/) !== -1) {
+                value = props.color;
+            }
+        }
+        return value;
+    };
+    return {
+        root: {
+            color: getColor,
+            fontSize: getFontSize,
+            width: '1em',
+            height: '1em',
+            strokeWidth: '1.3px',
+        },
+    };
+});
+
+export { useIconStyles };
+//# sourceMappingURL=IconStyles.js.map