@popmenu/common-ui 0.126.0 → 0.126.2

package/build/esm/components/Checkbox/CheckboxProps.d.ts

@@ -0,0 +1,7 @@
+import { FormControlLabelProps, CheckboxProps as MuiCheckboxProps } from '@material-ui/core';
+export interface CheckboxProps extends MuiCheckboxProps {
+    /** Adds a text label to the Checkbox. If provided, the Checkbox will be wrapped by a FormControlLabel component. */
+    label: string;
+    /** Props applied to the FormControlLabel component wrapping a checkbox if a label is given. */
+    LabelProps: Omit<FormControlLabelProps, 'control'>;
+}

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ChipProps } from './ChipProps';
+export declare const Chip: {
+    <C extends React.ElementType<any> = "div">(props: ChipProps<C>): JSX.Element;
+    displayName: string;
+};

package/build/esm/components/Chip/Chip.js

@@ -0,0 +1,23 @@
+import { __rest, __assign } from 'tslib';
+import { Chip as Chip$1 } from '@material-ui/core';
+import { Warning, CheckCircle, Info, Error, XCircle } from '@popmenu/web-icons';
+import React from 'react';
+import { useChipStyles } from './ChipStyles.js';
+
+var IconDictionary = {
+    error: Error,
+    info: Info,
+    success: CheckCircle,
+    warning: Warning,
+};
+var Chip = function (props) {
+    var severity = props.severity, restProps = __rest(props, ["severity"]);
+    var classes = useChipStyles(props);
+    var icon = severity ? React.createElement(IconDictionary[severity]) : undefined;
+    var deleteIcon = React.createElement(XCircle);
+    return React.createElement(Chip$1, __assign({ classes: classes, icon: icon, deleteIcon: deleteIcon }, restProps));
+};
+Chip.displayName = 'Chip';
+
+export { Chip };
+//# sourceMappingURL=Chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sources":["../../../../src/components/Chip/Chip.tsx"],"sourcesContent":["import { Chip as MuiChip } from '@material-ui/core'\nimport { CheckCircle, Error as ErrorIcon, Info, Warning, XCircle } from '@popmenu/web-icons'\nimport React from 'react'\nimport { ChipProps, DefaultChipComponent } from './ChipProps'\nimport { useChipStyles } from './ChipStyles'\n\nconst IconDictionary = {\n  error: ErrorIcon,\n  info: Info,\n  success: CheckCircle,\n  warning: Warning,\n}\n\nexport const Chip = <C extends React.ElementType = DefaultChipComponent>(props: ChipProps<C>) => {\n  const { severity, ...restProps } = props\n  const classes = useChipStyles(props)\n  const icon = severity ? React.createElement(IconDictionary[severity]) : undefined\n  const deleteIcon = React.createElement(XCircle)\n  return <MuiChip classes={classes} icon={icon} deleteIcon={deleteIcon} {...restProps} />\n}\n\nChip.displayName = 'Chip'\n"],"names":["ErrorIcon","MuiChip"],"mappings":";;;;;;AAMA,IAAM,cAAc,GAAG;AACrB,IAAA,KAAK,EAAEA,KAAS;AAChB,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,OAAO,EAAE,OAAO;CACjB;AAEM,IAAM,IAAI,GAAG,UAAqD,KAAmB,EAAA;IAClF,IAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAlC,CAA0B,UAAA,CAAA,CAAF;AAC9B,IAAA,IAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC;AACpC,IAAA,IAAM,IAAI,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS;IACjF,IAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;AAC/C,IAAA,OAAO,oBAACC,MAAO,EAAA,QAAA,CAAA,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAM,EAAA,SAAS,EAAI;AACzF;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/build/esm/components/Chip/ChipProps.d.ts

@@ -0,0 +1,8 @@
+import { ChipTypeMap, ChipProps as MuiChipProps } from '@material-ui/core';
+import React from 'react';
+export declare type DefaultChipComponent = ChipTypeMap['defaultComponent'];
+export declare type ChipProps<C extends React.ElementType = DefaultChipComponent> = MuiChipProps<C, {
+    component?: C;
+}> & {
+    severity?: 'success' | 'info' | 'warning' | 'error';
+};

package/build/esm/components/Chip/ChipStyles.d.ts

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

package/build/esm/components/Chip/ChipStyles.js

@@ -0,0 +1,83 @@
+import { makeStyles } from '@material-ui/core';
+
+var getBackground = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var background = theme.palette.grey[100];
+    var backgrounds = {
+        outlined: 'none',
+        error: 'error.main',
+        warning: 'warning.main',
+        info: 'info.light',
+        success: 'success.light',
+    };
+    if (variant === 'outlined') {
+        background = backgrounds[variant];
+    }
+    else if (severity) {
+        var _a = backgrounds[severity].split('.'), color = _a[0], colorVariant = _a[1];
+        // @ts-expect-error - todo.
+        background = theme.palette[color][colorVariant];
+    }
+    return background;
+}; };
+var getColor = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var textColor;
+    if (variant === 'outlined' && severity) {
+        var textColors = {
+            error: theme.palette.error.main,
+            info: theme.palette.info.main,
+            warning: theme.palette.warning.dark,
+            success: theme.palette.success.dark,
+        };
+        textColor = textColors[severity];
+    }
+    else if (variant === 'outlined' && !severity) {
+        textColor = theme.palette.grey[700];
+    }
+    else if ((variant === 'default' || variant === undefined) && severity) {
+        var textColors = {
+            error: theme.palette.common.white,
+            info: theme.palette.secondary.main,
+            warning: theme.palette.secondary.main,
+            success: theme.palette.secondary.main,
+        };
+        textColor = textColors[severity];
+    }
+    return textColor;
+}; };
+var getBorder = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var borderColor;
+    if (variant === 'outlined' && severity) {
+        var borderColors = {
+            error: theme.palette.error.main,
+            info: theme.palette.info.main,
+            warning: theme.palette.warning.dark,
+            success: theme.palette.success.dark,
+        };
+        borderColor = borderColors[severity];
+    }
+    return borderColor;
+}; };
+// using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on
+// any component-specific props
+var useChipStyles = makeStyles(function (theme) { return ({
+    root: {
+        background: getBackground(theme),
+        color: getColor(theme),
+        borderColor: getBorder(theme),
+        borderRadius: theme.spacing(0.5),
+    },
+    icon: {
+        color: 'inherit',
+        height: theme.spacing(2),
+        width: theme.spacing(2),
+    },
+    deleteIcon: {
+        color: theme.palette.grey[500],
+    },
+}); });
+
+export { useChipStyles };
+//# sourceMappingURL=ChipStyles.js.map

package/build/esm/components/Chip/ChipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChipStyles.js","sources":["../../../../src/components/Chip/ChipStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { ChipProps } from './ChipProps'\n\nconst getBackground = (theme: Theme) => (props: ChipProps) => {\n  const { variant, severity } = props\n  let background = theme.palette.grey[100]\n  const backgrounds = {\n    outlined: 'none',\n    error: 'error.main',\n    warning: 'warning.main',\n    info: 'info.light',\n    success: 'success.light',\n  }\n  if (variant === 'outlined') {\n    background = backgrounds[variant]\n  } else if (severity) {\n    const [color, colorVariant] = backgrounds[severity].split('.')\n    // @ts-expect-error - todo.\n    background = theme.palette[color][colorVariant]\n  }\n  return background\n}\n\nconst getColor = (theme: Theme) => (props: ChipProps) => {\n  const { variant, severity } = props\n  let textColor\n  if (variant === 'outlined' && severity) {\n    const textColors = {\n      error: theme.palette.error.main,\n      info: theme.palette.info.main,\n      warning: theme.palette.warning.dark,\n      success: theme.palette.success.dark,\n    }\n    textColor = textColors[severity]\n  } else if (variant === 'outlined' && !severity) {\n    textColor = theme.palette.grey[700]\n  } else if ((variant === 'default' || variant === undefined) && severity) {\n    const textColors = {\n      error: theme.palette.common.white,\n      info: theme.palette.secondary.main,\n      warning: theme.palette.secondary.main,\n      success: theme.palette.secondary.main,\n    }\n    textColor = textColors[severity]\n  }\n  return textColor\n}\n\nconst getBorder = (theme: Theme) => (props: ChipProps) => {\n  const { variant, severity } = props\n  let borderColor\n  if (variant === 'outlined' && severity) {\n    const borderColors = {\n      error: theme.palette.error.main,\n      info: theme.palette.info.main,\n      warning: theme.palette.warning.dark,\n      success: theme.palette.success.dark,\n    }\n    borderColor = borderColors[severity]\n  }\n  return borderColor\n}\n\n// using `any` here is a bit of cheating but it doesn't matter since this doesn't depend on\n// any component-specific props\nexport const useChipStyles = makeStyles<Theme, ChipProps<any>>((theme) => ({\n  root: {\n    background: getBackground(theme),\n    color: getColor(theme),\n    borderColor: getBorder(theme),\n    borderRadius: theme.spacing(0.5),\n  },\n  icon: {\n    color: 'inherit',\n    height: theme.spacing(2),\n    width: theme.spacing(2),\n  },\n  deleteIcon: {\n    color: theme.palette.grey[500],\n  },\n}))\n"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { CollapsibleTextProps } from './CollapsibleTextProps';
+export declare const CollapsibleText: FC<CollapsibleTextProps>;

package/build/esm/components/CollapsibleText/CollapsibleText.js

@@ -0,0 +1,40 @@
+import { __rest, __assign } from 'tslib';
+import { useTheme, Box, Collapse } from '@material-ui/core';
+import React, { useState, useRef, useEffect } from 'react';
+import { Typography } from '../Typography/Typography.js';
+import { useCollapsibleTextStyles } from './CollapsibleTextStyles.js';
+
+var CollapsibleText = function (props) {
+    var text = props.text, open = props.open, _a = props.previewLines, previewLines = _a === void 0 ? 2 : _a, _b = props.typographyVariant, typographyVariant = _b === void 0 ? 'body1' : _b; props.collapseState; var restProps = __rest(props, ["text", "open", "previewLines", "typographyVariant", "collapseState"]);
+    var collapseState = useState(false);
+    var typographyRef = useRef(null);
+    var classes = useCollapsibleTextStyles(__assign(__assign({}, props), { previewLines: previewLines, typographyVariant: typographyVariant }));
+    var theme = useTheme();
+    var _c = props.collapseState ? props.collapseState : collapseState, collapsible = _c[0], setCollapsible = _c[1];
+    var typographyEntryLineHeightRem = parseFloat(theme.typography[typographyVariant].lineHeight);
+    var collapsedSizeRem = previewLines * typographyEntryLineHeightRem;
+    var documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    var collapsedSizePx = collapsedSizeRem * documentFontSize;
+    useEffect(function () {
+        var typographyNode = typographyRef.current;
+        var observer = new ResizeObserver(function (entries) {
+            var typographyEntry = entries.find(function (entry) { return entry.target === typographyNode; });
+            if (typographyEntry) {
+                var typographyEntryHeight = typographyEntry.contentRect.height;
+                var isCollapsible = typographyEntryHeight > collapsedSizePx;
+                setCollapsible(isCollapsible);
+            }
+        });
+        observer.observe(typographyNode);
+        return function () {
+            observer.unobserve(typographyNode);
+        };
+    }, []);
+    return (React.createElement(Box, __assign({ position: "relative", overflow: "hidden" }, restProps),
+        React.createElement(Collapse, { in: open, collapsedSize: collapsedSizePx + 'px' },
+            React.createElement(Typography, { TypographyRef: typographyRef, variant: typographyVariant }, text)),
+        collapsible && !open && React.createElement(Box, { className: classes.overlay })));
+};
+
+export { CollapsibleText };
+//# sourceMappingURL=CollapsibleText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleText.js","sources":["../../../../src/components/CollapsibleText/CollapsibleText.tsx"],"sourcesContent":["import { Box, Collapse, useTheme } from '@material-ui/core'\nimport React, { FC, useEffect, useRef, useState } from 'react'\nimport { Typography } from '../Typography'\nimport { CollapsibleTextProps } from './CollapsibleTextProps'\nimport { useCollapsibleTextStyles } from './CollapsibleTextStyles'\n\nexport const CollapsibleText: FC<CollapsibleTextProps> = (props) => {\n  const { text, open, previewLines = 2, typographyVariant = 'body1', collapseState: _exclude, ...restProps } = props\n  const collapseState = useState<boolean | undefined>(false)\n  const typographyRef = useRef<HTMLParagraphElement | HTMLHeadingElement | HTMLSpanElement>(null)\n  const classes = useCollapsibleTextStyles({ ...props, previewLines, typographyVariant })\n  const theme = useTheme()\n  const [collapsible, setCollapsible] = props.collapseState ? props.collapseState : collapseState\n  const typographyEntryLineHeightRem = parseFloat(theme.typography[typographyVariant].lineHeight as string)\n  const collapsedSizeRem = previewLines * typographyEntryLineHeightRem\n  const documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize)\n  const collapsedSizePx = collapsedSizeRem * documentFontSize\n\n  useEffect(() => {\n    const typographyNode = typographyRef.current as Element\n    const observer = new ResizeObserver((entries) => {\n      const typographyEntry = entries.find((entry) => entry.target === typographyNode)\n      if (typographyEntry) {\n        const typographyEntryHeight = typographyEntry.contentRect.height\n        const isCollapsible = typographyEntryHeight > collapsedSizePx\n        setCollapsible(isCollapsible)\n      }\n    })\n    observer.observe(typographyNode)\n    return () => {\n      observer.unobserve(typographyNode)\n    }\n  }, [])\n\n  return (\n    <Box position=\"relative\" overflow=\"hidden\" {...restProps}>\n      <Collapse in={open} collapsedSize={collapsedSizePx + 'px'}>\n        <Typography TypographyRef={typographyRef} variant={typographyVariant}>\n          {text}\n        </Typography>\n      </Collapse>\n      {collapsible && !open && <Box className={classes.overlay} />}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAMO,IAAM,eAAe,GAA6B,UAAC,KAAK,EAAA;AACrD,IAAA,IAAA,IAAI,GAAiG,KAAK,CAAtG,IAAA,CAAA,CAAE,IAAI,GAA2F,KAAK,CAAhG,IAAA,CAAA,CAAE,KAAyF,KAAK,CAAA,YAA9E,EAAhB,YAAY,GAAA,EAAA,KAAA,MAAA,GAAG,CAAC,GAAA,EAAA,CAAA,CAAE,EAAuE,GAAA,KAAK,kBAAjD,CAA3B,CAAA,iBAAiB,mBAAG,OAAO,GAAA,EAAA,EAA4C,KAAK,CAAA,aAAxB,MAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAA5G,CAAA,MAAA,EAAA,MAAA,EAAA,cAAA,EAAA,mBAAA,EAAA,eAAA,CAAoG;AAC1G,IAAA,IAAM,aAAa,GAAG,QAAQ,CAAsB,KAAK,CAAC;AAC1D,IAAA,IAAM,aAAa,GAAG,MAAM,CAA8D,IAAI,CAAC;AAC/F,IAAA,IAAM,OAAO,GAAG,wBAAwB,CAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAM,KAAK,CAAA,EAAA,EAAE,YAAY,EAAA,YAAA,EAAE,iBAAiB,EAAA,iBAAA,EAAA,CAAA,CAAG;AACvF,IAAA,IAAM,KAAK,GAAG,QAAQ,EAAE;IAClB,IAAA,EAAA,GAAgC,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,GAAG,aAAa,EAAxF,WAAW,QAAA,EAAE,cAAc,QAA6D;AAC/F,IAAA,IAAM,4BAA4B,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAoB,CAAC;AACzG,IAAA,IAAM,gBAAgB,GAAG,YAAY,GAAG,4BAA4B;AACpE,IAAA,IAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC;AACxF,IAAA,IAAM,eAAe,GAAG,gBAAgB,GAAG,gBAAgB;AAE3D,IAAA,SAAS,CAAC,YAAA;AACR,QAAA,IAAM,cAAc,GAAG,aAAa,CAAC,OAAkB;AACvD,QAAA,IAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,UAAC,OAAO,EAAA;AAC1C,YAAA,IAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,MAAM,KAAK,cAAc,CAA/B,EAA+B,CAAC;AAChF,YAAA,IAAI,eAAe,EAAE;AACnB,gBAAA,IAAM,qBAAqB,GAAG,eAAe,CAAC,WAAW,CAAC,MAAM;AAChE,gBAAA,IAAM,aAAa,GAAG,qBAAqB,GAAG,eAAe;gBAC7D,cAAc,CAAC,aAAa,CAAC;AAC9B;AACH,SAAC,CAAC;AACF,QAAA,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC;QAChC,OAAO,YAAA;AACL,YAAA,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC;AACpC,SAAC;KACF,EAAE,EAAE,CAAC;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,QAAA,CAAA,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAA,EAAK,SAAS,CAAA;QACtD,KAAC,CAAA,aAAA,CAAA,QAAQ,EAAC,EAAA,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,eAAe,GAAG,IAAI,EAAA;AACvD,YAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,aAAa,EAAE,aAAa,EAAE,OAAO,EAAE,iBAAiB,EAAA,EACjE,IAAI,CACM,CACJ;AACV,QAAA,WAAW,IAAI,CAAC,IAAI,IAAI,oBAAC,GAAG,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,OAAO,EAAI,CAAA,CACxD;AAEV;;;;"}

package/build/esm/components/CollapsibleText/CollapsibleTextProps.d.ts

@@ -0,0 +1,13 @@
+import { BoxProps } from '@material-ui/core';
+export interface CollapsibleTextProps extends Pick<BoxProps, 'onClick'> {
+    /** The content of the CollapsibleText component. */
+    text: string;
+    /** Expands and collapses the component. */
+    open: boolean;
+    /** The number of lines visible in the collapsed state. */
+    previewLines?: number;
+    /** The variant of the typography. */
+    typographyVariant?: 'body1' | 'body2';
+    /** A React state tuple. */
+    collapseState?: [boolean, (collapsible: boolean) => void];
+}

package/build/esm/components/CollapsibleText/CollapsibleTextStyles.d.ts

@@ -0,0 +1,5 @@
+import { CollapsibleTextProps } from './CollapsibleTextProps';
+export declare const useCollapsibleTextStyles: (props: CollapsibleTextProps & {
+    fadeStop?: string | number | undefined;
+    typographyVariant: 'body1' | 'body2';
+}) => import("@material-ui/styles").ClassNameMap<string>;

package/build/esm/components/CollapsibleText/CollapsibleTextStyles.js

@@ -0,0 +1,24 @@
+import { makeStyles } from '@material-ui/core';
+
+var getFadeStop = function (_a, typographyVariant) {
+    var typography = _a.typography;
+    // @ts-expect-error - todo.
+    return !isNaN(Number(typography[typographyVariant].lineHeight))
+        ? // @ts-expect-error - todo.
+            typography[typographyVariant].lineHeight + "rem"
+        : // @ts-expect-error - todo.
+            typography[typographyVariant].lineHeight;
+};
+var useCollapsibleTextStyles = makeStyles(function (theme) { return ({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: '100%',
+        background: function (props) { return "linear-gradient(to top, white, #FFF0 " + getFadeStop(theme, props.typographyVariant) + ")"; },
+    },
+}); });
+
+export { useCollapsibleTextStyles };
+//# sourceMappingURL=CollapsibleTextStyles.js.map

package/build/esm/components/CollapsibleText/CollapsibleTextStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTextStyles.js","sources":["../../../../src/components/CollapsibleText/CollapsibleTextStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { CollapsibleTextProps } from './CollapsibleTextProps'\n\nconst getFadeStop = ({ typography }: Theme, typographyVariant: string) => {\n  // @ts-expect-error - todo.\n  return !isNaN(Number(typography[typographyVariant].lineHeight))\n    ? // @ts-expect-error - todo.\n      `${typography[typographyVariant].lineHeight}rem`\n    : // @ts-expect-error - todo.\n      typography[typographyVariant].lineHeight\n}\n\nexport const useCollapsibleTextStyles = makeStyles<\n  Theme,\n  CollapsibleTextProps & { fadeStop?: string | number; typographyVariant: 'body1' | 'body2' }\n>((theme) => ({\n  overlay: {\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    height: '100%',\n    width: '100%',\n    background: (props) => `linear-gradient(to top, white, #FFF0 ${getFadeStop(theme, props.typographyVariant)})`,\n  },\n}))\n"],"names":[],"mappings":";;AAGA,IAAM,WAAW,GAAG,UAAC,EAAqB,EAAE,iBAAyB,EAAA;AAA9C,IAAA,IAAA,UAAU,GAAA,EAAA,CAAA,UAAA;;AAE/B,IAAA,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC;AAC5D;AACK,YAAA,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAU,GAAK;AAClD;AACE,YAAA,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAU;AAC9C,CAAC;AAEY,IAAA,wBAAwB,GAAG,UAAU,CAGhD,UAAC,KAAK,EAAK,EAAA,QAAC;AACZ,IAAA,OAAO,EAAE;AACP,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,IAAI,EAAE,CAAC;AACP,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,UAAU,EAAE,UAAC,KAAK,EAAK,EAAA,OAAA,0CAAwC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,GAAA,GAAG,GAAA;AAC9G,KAAA;CACF,EAAC,EAAA;;;;"}

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

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

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

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DividerProps } from './DividerProps';
+export declare const Divider: FC<DividerProps>;

package/build/esm/components/Divider/Divider.js

@@ -0,0 +1,70 @@
+import { __assign } from 'tslib';
+import { makeStyles, Box } from '@material-ui/core';
+import classNames from 'classnames';
+import React from 'react';
+import { Typography } from '../Typography/Typography.js';
+
+var SemanticColors;
+(function (SemanticColors) {
+    SemanticColors["PRIMARY_MAIN"] = "primary.main";
+    SemanticColors["PRIMARY_DARK"] = "primary.dark";
+    SemanticColors["PRIMARY_LIGHT"] = "primary.light";
+    SemanticColors["SECONDARY_MAIN"] = "secondary.main";
+    SemanticColors["SECONDARY_DARK"] = "secondary.dark";
+    SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
+})(SemanticColors || (SemanticColors = {}));
+var useStyles = makeStyles(function (theme) { return ({
+    dividerRoot: {
+        gap: theme.spacing(2),
+    },
+    textRoot: {
+        color: function (props) {
+            var textColor = props.textColor;
+            if (Object.values(SemanticColors).includes(textColor)) {
+                var _a = textColor.split('.'), semanticColor = _a[0], shade = _a[1];
+                // @ts-expect-error - todo.
+                return theme.palette[semanticColor][shade];
+            }
+            else if (textColor) {
+                return textColor;
+            }
+            else {
+                return 'black';
+            }
+        },
+        textTransform: function (props) { return props.textTransform; },
+    },
+    dividerLine: {
+        backgroundColor: function (props) {
+            var dividerColor = props.dividerColor;
+            if (Object.values(SemanticColors).includes(dividerColor)) {
+                var _a = dividerColor.split('.'), semanticColor = _a[0], shade = _a[1];
+                // @ts-expect-error - todo.
+                return theme.palette[semanticColor][shade];
+            }
+            else if (dividerColor) {
+                return dividerColor;
+            }
+            else {
+                return theme.palette.grey[500];
+            }
+        },
+    },
+}); });
+var Divider = function (props) {
+    var className = props.className, text = props.text, textTransform = props.textTransform, TypographyProps = props.TypographyProps;
+    var classes = useStyles(props);
+    var casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset';
+    return (React.createElement(Box, { className: classNames([classes.dividerRoot, className]), display: "flex", alignItems: "center" },
+        React.createElement(Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset }),
+        text && (React.createElement(React.Fragment, null,
+            React.createElement(Typography, __assign({ className: classes.textRoot }, TypographyProps), text),
+            React.createElement(Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset })))));
+};
+Divider.displayName = 'Divider';
+Divider.defaultProps = {
+    textTransform: 'lowercase',
+};
+
+export { Divider };
+//# sourceMappingURL=Divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import { Box, makeStyles, Theme } from '@material-ui/core'\nimport classNames from 'classnames'\nimport React, { FC } from 'react'\nimport { Typography } from '../Typography'\nimport { DividerProps } from './DividerProps'\n\nenum SemanticColors {\n  PRIMARY_MAIN = 'primary.main',\n  PRIMARY_DARK = 'primary.dark',\n  PRIMARY_LIGHT = 'primary.light',\n  SECONDARY_MAIN = 'secondary.main',\n  SECONDARY_DARK = 'secondary.dark',\n  SECONDARY_LIGHT = 'secondary.light',\n}\n\nconst useStyles = makeStyles<Theme, DividerProps>((theme) => ({\n  dividerRoot: {\n    gap: theme.spacing(2),\n  },\n  textRoot: {\n    color: (props) => {\n      const { textColor } = props as { textColor: string }\n      if (Object.values<string>(SemanticColors).includes(textColor)) {\n        const [semanticColor, shade] = textColor.split('.')\n        // @ts-expect-error - todo.\n        return theme.palette[semanticColor][shade]\n      } else if (textColor) {\n        return textColor\n      } else {\n        return 'black'\n      }\n    },\n    textTransform: (props) => props.textTransform,\n  },\n  dividerLine: {\n    backgroundColor: (props) => {\n      const { dividerColor } = props as { dividerColor: string }\n      if (Object.values<string>(SemanticColors).includes(dividerColor)) {\n        const [semanticColor, shade] = dividerColor.split('.')\n        // @ts-expect-error - todo.\n        return theme.palette[semanticColor][shade]\n      } else if (dividerColor) {\n        return dividerColor\n      } else {\n        return theme.palette.grey[500]\n      }\n    },\n  },\n}))\n\nexport const Divider: FC<DividerProps> = (props) => {\n  const { className, text, textTransform, TypographyProps } = props\n  const classes = useStyles(props)\n  const casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset'\n\n  return (\n    <Box className={classNames([classes.dividerRoot, className])} display=\"flex\" alignItems=\"center\">\n      <Box className={classes.dividerLine} display=\"flex\" flexGrow={1} height=\"1px\" marginTop={casingOffset} />\n      {text && (\n        <>\n          <Typography className={classes.textRoot} {...TypographyProps}>\n            {text}\n          </Typography>\n          <Box className={classes.dividerLine} display=\"flex\" flexGrow={1} height=\"1px\" marginTop={casingOffset} />\n        </>\n      )}\n    </Box>\n  )\n}\n\nDivider.displayName = 'Divider'\n\nDivider.defaultProps = {\n  textTransform: 'lowercase',\n}\n"],"names":[],"mappings":";;;;;;AAMA,IAAK,cAOJ;AAPD,CAAA,UAAK,cAAc,EAAA;AACjB,IAAA,cAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7B,IAAA,cAAA,CAAA,cAAA,CAAA,GAAA,cAA6B;AAC7B,IAAA,cAAA,CAAA,eAAA,CAAA,GAAA,eAA+B;AAC/B,IAAA,cAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC;AACjC,IAAA,cAAA,CAAA,gBAAA,CAAA,GAAA,gBAAiC;AACjC,IAAA,cAAA,CAAA,iBAAA,CAAA,GAAA,iBAAmC;AACrC,CAAC,EAPI,cAAc,KAAd,cAAc,GAOlB,EAAA,CAAA,CAAA;AAED,IAAM,SAAS,GAAG,UAAU,CAAsB,UAAC,KAAK,EAAA,EAAK,QAAC;AAC5D,IAAA,WAAW,EAAE;AACX,QAAA,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AACtB,KAAA;AACD,IAAA,QAAQ,EAAE;QACR,KAAK,EAAE,UAAC,KAAK,EAAA;AACH,YAAA,IAAA,SAAS,GAAK,KAA8B,CAAA,SAAnC;YACjB,IAAI,MAAM,CAAC,MAAM,CAAS,cAAc,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE;AACvD,gBAAA,IAAA,EAAyB,GAAA,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,EAA5C,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,QAAwB;;gBAEnD,OAAO,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC3C;AAAM,iBAAA,IAAI,SAAS,EAAE;AACpB,gBAAA,OAAO,SAAS;AACjB;AAAM,iBAAA;AACL,gBAAA,OAAO,OAAO;AACf;SACF;QACD,aAAa,EAAE,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,aAAa,CAAA,EAAA;AAC9C,KAAA;AACD,IAAA,WAAW,EAAE;QACX,eAAe,EAAE,UAAC,KAAK,EAAA;AACb,YAAA,IAAA,YAAY,GAAK,KAAiC,CAAA,YAAtC;YACpB,IAAI,MAAM,CAAC,MAAM,CAAS,cAAc,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;AAC1D,gBAAA,IAAA,EAAyB,GAAA,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,EAA/C,aAAa,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,KAAK,QAA2B;;gBAEtD,OAAO,KAAK,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC,KAAK,CAAC;AAC3C;AAAM,iBAAA,IAAI,YAAY,EAAE;AACvB,gBAAA,OAAO,YAAY;AACpB;AAAM,iBAAA;gBACL,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AAC/B;SACF;AACF,KAAA;CACF,EAAC,EAAA,CAAC;AAEI,IAAM,OAAO,GAAqB,UAAC,KAAK,EAAA;AACrC,IAAA,IAAA,SAAS,GAA2C,KAAK,UAAhD,EAAE,IAAI,GAAqC,KAAK,CAAA,IAA1C,EAAE,aAAa,GAAsB,KAAK,CAA3B,aAAA,EAAE,eAAe,GAAK,KAAK,gBAAV;AACvD,IAAA,IAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;AAChC,IAAA,IAAM,YAAY,GAAG,aAAa,KAAK,WAAW,GAAG,QAAQ,GAAG,OAAO;IAEvE,QACE,oBAAC,GAAG,EAAA,EAAC,SAAS,EAAE,UAAU,CAAC,CAAC,OAAO,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAA;QAC9F,KAAC,CAAA,aAAA,CAAA,GAAG,IAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAC,KAAK,EAAC,SAAS,EAAE,YAAY,EAAI,CAAA;AACxG,QAAA,IAAI,KACH,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA;YACE,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,QAAA,CAAA,EAAA,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAM,EAAA,eAAe,CACzD,EAAA,IAAI,CACM;AACb,YAAA,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAC,KAAK,EAAC,SAAS,EAAE,YAAY,EAAA,CAAI,CACxG,CACJ,CACG;AAEV;AAEA,OAAO,CAAC,WAAW,GAAG,SAAS;AAE/B,OAAO,CAAC,YAAY,GAAG;AACrB,IAAA,aAAa,EAAE,WAAW;CAC3B;;;;"}

package/build/esm/components/Divider/DividerProps.d.ts

@@ -0,0 +1,17 @@
+import { TypographyProps } from '../Typography';
+declare type Colors = 'primary.main' | 'primary.dark' | 'primary.light' | 'secondary.main' | 'secondary.dark' | 'secondary.light';
+export interface DividerProps {
+    /** Sets the styles for a divider. */
+    className?: string;
+    /** Sets the color of the divider line. Accepts thematic color names and color codes. */
+    dividerColor?: Colors | string;
+    /** A message shown in the center of the divider */
+    text?: string;
+    /** Sets the color of the divider text.  Accepts thematic color names and color codes. */
+    textColor?: Colors | string;
+    /** Sets the casing of the text */
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize';
+    /** Props applied to the internal Typography component that displays text */
+    TypographyProps?: TypographyProps;
+}
+export {};

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

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

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

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

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import { useFollowerAuthenticationDialogContext } from './context.js';
+import { makeStyles, Button, Box, Divider } from '@material-ui/core';
+
+var useStyles = makeStyles(function () { return ({
+    main: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationAltActions = function () {
+    var _a = useFollowerAuthenticationDialogContext(), state = _a.state, messages = _a.messages, logos = _a.logos, loading = _a.loading, onActionButtonClick = _a.onActionButtonClick;
+    var classes = useStyles();
+    switch (state.value) {
+        case 'initial':
+            return (React.createElement(Box, { className: classes.main },
+                React.createElement(Divider, null),
+                React.createElement(Button, { variant: "outlined", startIcon: logos.facebook, onClick: function () {
+                        onActionButtonClick('sign-in-with-facebook');
+                    } }, messages.continueWithFacebookButtonLabel),
+                React.createElement(Button, { variant: "outlined", startIcon: logos.google, onClick: function () {
+                        onActionButtonClick('sign-in-with-google');
+                    } }, messages.continueWithGoogleButtonLabel)));
+        case 'signUp':
+            return null;
+        case 'emailFound':
+            return (React.createElement(Box, { className: classes.main },
+                React.createElement(Divider, null),
+                React.createElement(Button, { variant: "outlined", onClick: function () {
+                        onActionButtonClick('sign-in-with-password');
+                    } }, messages.signInWithPassword)));
+        case 'emailAuthCode':
+            return (React.createElement(Box, { className: classes.main },
+                React.createElement(Button, { disabled: loading, variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        onActionButtonClick('request-auth-code-email', values);
+                    } }, messages.resendAuthCode)));
+        case 'indirectUserFound':
+            return (React.createElement(Box, { className: classes.main },
+                React.createElement(Divider, null),
+                React.createElement(Button, { variant: "outlined", onClick: function () {
+                        onActionButtonClick('use-different-account');
+                    } }, messages.indirectUserFoundCtaButtonLabelAlt)));
+        case 'emailPasswordSignIn':
+            return (React.createElement(Box, { className: classes.main },
+                React.createElement(Divider, null),
+                React.createElement(Button, { variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        onActionButtonClick('request-auth-code-email', values);
+                    } }, messages.emailFoundCtaButtonLabel)));
+        case 'phoneFound':
+            return null;
+        case 'phoneAuthCode':
+            return (React.createElement(Box, { className: classes.main },
+                React.createElement(Button, { disabled: loading, variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        onActionButtonClick('request-auth-code-sms', values);
+                    } }, messages.resendAuthCode)));
+        case 'phonePasswordSignIn':
+            return (React.createElement(Box, { className: classes.main },
+                React.createElement(Divider, null),
+                React.createElement(Button, { variant: "outlined", onClick: function () {
+                        var form = document.querySelector('#follower-authentication-form');
+                        var formData = new FormData(form);
+                        var values = Object.fromEntries(formData.entries());
+                        onActionButtonClick('request-auth-code-sms', values);
+                    } }, messages.phoneFoundCtaButtonLabel)));
+        case 'welcome':
+            return (React.createElement(Button, { onClick: function () {
+                    onActionButtonClick('close');
+                } }, messages.done));
+        default:
+            return null;
+    }
+};
+
+export { FollowerAuthenticationAltActions };
+//# sourceMappingURL=FollowerAuthenticationAltActions.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationAltActions.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationAltActions.tsx"],"sourcesContent":["import React from 'react'\nimport { useFollowerAuthenticationDialogContext } from './context'\nimport { Box, Button, Divider, makeStyles } from '@material-ui/core'\n\nconst useStyles = makeStyles(() => ({\n  main: {\n    width: '100%',\n    display: 'flex',\n    flexDirection: 'column',\n    gridGap: 16,\n  },\n}))\nexport const FollowerAuthenticationAltActions = () => {\n  const { state, messages, logos, loading, onActionButtonClick } = useFollowerAuthenticationDialogContext()\n  const classes = useStyles()\n  switch (state.value) {\n    case 'initial':\n      return (\n        <Box className={classes.main}>\n          <Divider />\n          <Button\n            variant=\"outlined\"\n            startIcon={logos.facebook}\n            onClick={() => {\n              onActionButtonClick('sign-in-with-facebook')\n            }}\n          >\n            {messages.continueWithFacebookButtonLabel}\n          </Button>\n          <Button\n            variant=\"outlined\"\n            startIcon={logos.google}\n            onClick={() => {\n              onActionButtonClick('sign-in-with-google')\n            }}\n          >\n            {messages.continueWithGoogleButtonLabel}\n          </Button>\n        </Box>\n      )\n    case 'signUp':\n      return null\n    case 'emailFound':\n      return (\n        <Box className={classes.main}>\n          <Divider />\n          <Button\n            variant=\"outlined\"\n            onClick={() => {\n              onActionButtonClick('sign-in-with-password')\n            }}\n          >\n            {messages.signInWithPassword}\n          </Button>\n        </Box>\n      )\n    case 'emailAuthCode':\n      return (\n        <Box className={classes.main}>\n          <Button\n            disabled={loading}\n            variant=\"outlined\"\n            onClick={() => {\n              const form = document.querySelector('#follower-authentication-form') as HTMLFormElement\n              const formData = new FormData(form)\n              const values = Object.fromEntries(formData.entries()) as Record<string, string>\n              onActionButtonClick('request-auth-code-email', values)\n            }}\n          >\n            {messages.resendAuthCode}\n          </Button>\n        </Box>\n      )\n    case 'indirectUserFound':\n      return (\n        <Box className={classes.main}>\n          <Divider />\n          <Button\n            variant=\"outlined\"\n            onClick={() => {\n              onActionButtonClick('use-different-account')\n            }}\n          >\n            {messages.indirectUserFoundCtaButtonLabelAlt}\n          </Button>\n        </Box>\n      )\n    case 'emailPasswordSignIn':\n      return (\n        <Box className={classes.main}>\n          <Divider />\n          <Button\n            variant=\"outlined\"\n            onClick={() => {\n              const form = document.querySelector('#follower-authentication-form') as HTMLFormElement\n              const formData = new FormData(form)\n              const values = Object.fromEntries(formData.entries()) as Record<string, string>\n              onActionButtonClick('request-auth-code-email', values)\n            }}\n          >\n            {messages.emailFoundCtaButtonLabel}\n          </Button>\n        </Box>\n      )\n    case 'phoneFound':\n      return null\n    case 'phoneAuthCode':\n      return (\n        <Box className={classes.main}>\n          <Button\n            disabled={loading}\n            variant=\"outlined\"\n            onClick={() => {\n              const form = document.querySelector('#follower-authentication-form') as HTMLFormElement\n              const formData = new FormData(form)\n              const values = Object.fromEntries(formData.entries()) as Record<string, string>\n              onActionButtonClick('request-auth-code-sms', values)\n            }}\n          >\n            {messages.resendAuthCode}\n          </Button>\n        </Box>\n      )\n    case 'phonePasswordSignIn':\n      return (\n        <Box className={classes.main}>\n          <Divider />\n          <Button\n            variant=\"outlined\"\n            onClick={() => {\n              const form = document.querySelector('#follower-authentication-form') as HTMLFormElement\n              const formData = new FormData(form)\n              const values = Object.fromEntries(formData.entries()) as Record<string, string>\n              onActionButtonClick('request-auth-code-sms', values)\n            }}\n          >\n            {messages.phoneFoundCtaButtonLabel}\n          </Button>\n        </Box>\n      )\n    case 'welcome':\n      return (\n        <Button\n          onClick={() => {\n            onActionButtonClick('close')\n          }}\n        >\n          {messages.done}\n        </Button>\n      )\n    default:\n      return null\n  }\n}\n"],"names":[],"mappings":"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"}

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { FollowerAuthenticationForm } from './FollowerAuthenticationForm.js';
+import { FollowerAuthenticationAltActions } from './FollowerAuthenticationAltActions.js';
+
+var FollowerAuthenticationBody = function () {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FollowerAuthenticationForm, null),
+        React.createElement(FollowerAuthenticationAltActions, null)));
+};
+
+export { FollowerAuthenticationBody };
+//# sourceMappingURL=FollowerAuthenticationBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationBody.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationBody.tsx"],"sourcesContent":["import React from 'react'\nimport { FollowerAuthenticationForm } from './FollowerAuthenticationForm'\nimport { FollowerAuthenticationAltActions } from './FollowerAuthenticationAltActions'\n\nexport const FollowerAuthenticationBody = () => {\n  return (\n    <React.Fragment>\n      <FollowerAuthenticationForm />\n      <FollowerAuthenticationAltActions />\n    </React.Fragment>\n  )\n}\n"],"names":[],"mappings":";;;;AAIa,IAAA,0BAA0B,GAAG,YAAA;AACxC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAQ,EAAA,IAAA;AACb,QAAA,KAAA,CAAA,aAAA,CAAC,0BAA0B,EAAG,IAAA,CAAA;AAC9B,QAAA,KAAA,CAAA,aAAA,CAAC,gCAAgC,EAAA,IAAA,CAAG,CACrB;AAErB;;;;"}

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

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

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

@@ -0,0 +1,24 @@
+import { makeStyles, IconButton } from '@material-ui/core';
+import React from 'react';
+import { useFollowerAuthenticationDialogContext } from './context.js';
+import { X } from '@popmenu/web-icons';
+
+var useStyles = makeStyles(function () { return ({
+    root: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+    },
+}); });
+var FollowerAuthenticationCloseButton = function () {
+    var _a = useFollowerAuthenticationDialogContext(), messages = _a.messages, onActionButtonClick = _a.onActionButtonClick;
+    var classes = useStyles();
+    var handleClose = function () {
+        onActionButtonClick('close');
+    };
+    return (React.createElement(IconButton, { classes: classes, "aria-label": messages.closeButtonLabel, onClick: handleClose },
+        React.createElement(X, null)));
+};
+
+export { FollowerAuthenticationCloseButton };
+//# sourceMappingURL=FollowerAuthenticationCloseButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationCloseButton.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationCloseButton.tsx"],"sourcesContent":["import { IconButton, makeStyles } from '@material-ui/core'\nimport React from 'react'\nimport { useFollowerAuthenticationDialogContext } from './context'\nimport { X as XIcon } from '@popmenu/web-icons'\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    position: 'absolute',\n    top: 0,\n    right: 0,\n  },\n}))\nexport const FollowerAuthenticationCloseButton = () => {\n  const { messages, onActionButtonClick } = useFollowerAuthenticationDialogContext()\n  const classes = useStyles()\n  const handleClose = () => {\n    onActionButtonClick('close')\n  }\n  return (\n    <IconButton classes={classes} aria-label={messages.closeButtonLabel} onClick={handleClose}>\n      <XIcon />\n    </IconButton>\n  )\n}\n"],"names":["XIcon"],"mappings":";;;;;AAKA,IAAM,SAAS,GAAG,UAAU,CAAC,YAAA,EAAM,QAAC;AAClC,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,GAAG,EAAE,CAAC;AACN,QAAA,KAAK,EAAE,CAAC;AACT,KAAA;CACF,EAAC,EAAA,CAAC;AACU,IAAA,iCAAiC,GAAG,YAAA;IACzC,IAAA,EAAA,GAAoC,sCAAsC,EAAE,EAA1E,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,mBAAmB,GAAA,EAAA,CAAA,mBAA6C;AAClF,IAAA,IAAM,OAAO,GAAG,SAAS,EAAE;AAC3B,IAAA,IAAM,WAAW,GAAG,YAAA;QAClB,mBAAmB,CAAC,OAAO,CAAC;AAC9B,KAAC;AACD,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,OAAO,EAAE,OAAO,EAAc,YAAA,EAAA,QAAQ,CAAC,gBAAgB,EAAE,OAAO,EAAE,WAAW,EAAA;AACvF,QAAA,KAAA,CAAA,aAAA,CAACA,CAAK,EAAA,IAAA,CAAG,CACE;AAEjB;;;;"}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { makeStyles, DialogContent } from '@material-ui/core';
+
+var useStyles = makeStyles(function () { return ({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        gridGap: 16,
+    },
+}); });
+var FollowerAuthenticationContent = function (props) {
+    var classes = useStyles();
+    return React.createElement(DialogContent, { classes: classes }, props.children);
+};
+
+export { FollowerAuthenticationContent };
+//# sourceMappingURL=FollowerAuthenticationContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FollowerAuthenticationContent.js","sources":["../../../../src/components/FollowerAuthenticationDialog/FollowerAuthenticationContent.tsx"],"sourcesContent":["import React from 'react'\nimport { DialogContent, makeStyles } from '@material-ui/core'\n\nconst useStyles = makeStyles(() => ({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'center',\n    gridGap: 16,\n  },\n}))\nexport const FollowerAuthenticationContent = (props: { children: React.ReactNode }) => {\n  const classes = useStyles()\n  return <DialogContent classes={classes}>{props.children}</DialogContent>\n}\n"],"names":[],"mappings":";;;AAGA,IAAM,SAAS,GAAG,UAAU,CAAC,YAAA,EAAM,QAAC;AAClC,IAAA,IAAI,EAAE;AACJ,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,OAAO,EAAE,EAAE;AACZ,KAAA;CACF,EAAC,EAAA,CAAC;AACI,IAAM,6BAA6B,GAAG,UAAC,KAAoC,EAAA;AAChF,IAAA,IAAM,OAAO,GAAG,SAAS,EAAE;IAC3B,OAAO,KAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,OAAO,EAAE,OAAO,EAAA,EAAG,KAAK,CAAC,QAAQ,CAAiB;AAC1E;;;;"}

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

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