@popmenu/common-ui 0.127.0 → 0.127.1

package/build/esm/components/Button/ButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonStyles.js","sources":["../../../../src/components/Button/ButtonStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { ButtonProps } from './ButtonProps'\n\nexport const useButtonStyles = makeStyles<Theme, ButtonProps>(() => ({\n  root: {\n    minWidth: 'unset',\n  },\n  label: {\n    textTransform: ({ textTransform }) => textTransform,\n  },\n}))\n"],"names":[],"mappings":";;IAGa,eAAe,GAAG,UAAU,CAAqB,YAAA,EAAM,QAAC;AACnE,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,OAAO;AAClB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,aAAa,EAAE,UAAC,EAAiB,EAAA;AAAf,YAAA,IAAA,aAAa,GAAA,EAAA,CAAA,aAAA;AAAO,YAAA,OAAA,aAAa;SAAA;AACpD,KAAA;CACF,EAAC,EAAA;;;;"}
+{"version":3,"file":"ButtonStyles.js","sources":["../../../../src/components/Button/ButtonStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { ButtonProps } from './ButtonProps'\n\nexport const useButtonStyles = makeStyles<Theme, ButtonProps>(() => ({\n  root: {\n    minWidth: 'unset',\n  },\n  label: {\n    textTransform: ({ textTransform }) => textTransform,\n  },\n}))\n"],"names":[],"mappings":";;MAGa,eAAe,GAAG,UAAU,CAAqB,OAAO;AACnE,IAAA,IAAI,EAAE;AACJ,QAAA,QAAQ,EAAE,OAAO;AAClB,KAAA;AACD,IAAA,KAAK,EAAE;QACL,aAAa,EAAE,CAAC,EAAE,aAAa,EAAE,KAAK,aAAa;AACpD,KAAA;AACF,CAAA,CAAC;;;;"}

package/build/esm/components/Checkbox/Checkbox.js

@@ -1,11 +1,11 @@
-import { __rest, __assign } from 'tslib';
 import React, { forwardRef } from 'react';
 import { Checkbox as Checkbox$1, FormControlLabel } from '@material-ui/core';
 
-var Checkbox = forwardRef(function (props, ref) {
-    var label = props.label, disabled = props.disabled, LabelProps = props.LabelProps, muiProps = __rest(props, ["label", "disabled", "LabelProps"]);
-    var control = React.createElement(Checkbox$1, __assign({ disabled: label ? undefined : disabled }, muiProps));
-    return label ? (React.createElement(FormControlLabel, __assign({ disabled: disabled, inputRef: ref, control: control, label: label }, LabelProps))) : (control);
+const Checkbox = forwardRef((props, ref) => {
+    const { disabled, LabelProps, ...muiProps } = props;
+    const label = LabelProps?.label || props.label;
+    const control = React.createElement(Checkbox$1, { disabled: label ? undefined : disabled, ...muiProps });
+    return label ? (React.createElement(FormControlLabel, { disabled: disabled, inputRef: ref, control: control, ...LabelProps, label: label })) : (control);
 });
 Checkbox.displayName = 'Checkbox';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { FormControlLabel, Checkbox as MuiCheckbox } from '@material-ui/core'\nimport { CheckboxProps } from './CheckboxProps'\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n  const { label, disabled, LabelProps, ...muiProps } = props\n  const control = <MuiCheckbox disabled={label ? undefined : disabled} {...muiProps} />\n  return label ? (\n    <FormControlLabel disabled={disabled} inputRef={ref} control={control} label={label} {...LabelProps} />\n  ) : (\n    control\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["MuiCheckbox"],"mappings":";;;;IAKa,QAAQ,GAAG,UAAU,CAAkC,UAAC,KAAK,EAAE,GAAG,EAAA;IACrE,IAAA,KAAK,GAAwC,KAAK,CAAA,KAA7C,EAAE,QAAQ,GAA8B,KAAK,CAAnC,QAAA,EAAE,UAAU,GAAkB,KAAK,WAAvB,EAAK,QAAQ,UAAK,KAAK,EAApD,CAA4C,OAAA,EAAA,UAAA,EAAA,YAAA,CAAA,CAAF;AAChD,IAAA,IAAM,OAAO,GAAG,KAAA,CAAA,aAAA,CAACA,UAAW,EAAC,QAAA,CAAA,EAAA,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,EAAM,EAAA,QAAQ,EAAI;AACrF,IAAA,OAAO,KAAK,IACV,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAC,QAAA,CAAA,EAAA,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAM,EAAA,UAAU,CAAI,CAAA,KAEvG,OAAO,CACR;AACH,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\n\nimport { FormControlLabel, Checkbox as MuiCheckbox } from '@material-ui/core'\nimport { CheckboxProps } from './CheckboxProps'\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {\n  const { disabled, LabelProps, ...muiProps } = props\n  const label = LabelProps?.label || props.label\n  const control = <MuiCheckbox disabled={label ? undefined : disabled} {...muiProps} />\n  return label ? (\n    <FormControlLabel disabled={disabled} inputRef={ref} control={control} {...LabelProps} label={label} />\n  ) : (\n    control\n  )\n})\n\nCheckbox.displayName = 'Checkbox'\n"],"names":["MuiCheckbox"],"mappings":";;;AAKa,MAAA,QAAQ,GAAG,UAAU,CAAkC,CAAC,KAAK,EAAE,GAAG,KAAI;IACjF,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK;IACnD,MAAM,KAAK,GAAG,UAAU,EAAE,KAAK,IAAI,KAAK,CAAC,KAAK;AAC9C,IAAA,MAAM,OAAO,GAAG,KAAA,CAAA,aAAA,CAACA,UAAW,EAAC,EAAA,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,EAAM,GAAA,QAAQ,GAAI;AACrF,IAAA,OAAO,KAAK,IACV,KAAC,CAAA,aAAA,CAAA,gBAAgB,EAAC,EAAA,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,EAAE,OAAO,EAAA,GAAM,UAAU,EAAE,KAAK,EAAE,KAAK,EAAI,CAAA,KAEvG,OAAO,CACR;AACH,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

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

@@ -1,6 +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;
+    <C extends React.ElementType = "div">(props: ChipProps<C>): JSX.Element;
     displayName: string;
 };

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

@@ -1,21 +1,20 @@
-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 = {
+const 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));
+const Chip = (props) => {
+    const { severity, ...restProps } = props;
+    const classes = useChipStyles(props);
+    const icon = severity ? React.createElement(IconDictionary[severity]) : undefined;
+    const deleteIcon = React.createElement(XCircle);
+    return React.createElement(Chip$1, { classes: classes, icon: icon, deleteIcon: deleteIcon, ...restProps });
 };
 Chip.displayName = 'Chip';
 

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

@@ -1 +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;;;;"}
+{"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,MAAM,cAAc,GAAG;AACrB,IAAA,KAAK,EAAEA,KAAS;AAChB,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,OAAO,EAAE,WAAW;AACpB,IAAA,OAAO,EAAE,OAAO;CACjB;AAEY,MAAA,IAAI,GAAG,CAAqD,KAAmB,KAAI;IAC9F,MAAM,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AACxC,IAAA,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC;AACpC,IAAA,MAAM,IAAI,GAAG,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,SAAS;IACjF,MAAM,UAAU,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;AAC/C,IAAA,OAAO,oBAACC,MAAO,EAAA,EAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAM,GAAA,SAAS,GAAI;AACzF;AAEA,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

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

@@ -1,7 +1,7 @@
 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, {
+export type DefaultChipComponent = ChipTypeMap['defaultComponent'];
+export type ChipProps<C extends React.ElementType = DefaultChipComponent> = MuiChipProps<C, {
     component?: C;
 }> & {
     severity?: 'success' | 'info' | 'warning' | 'error';

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

@@ -1,9 +1,9 @@
 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 = {
+const getBackground = (theme) => (props) => {
+    const { variant, severity } = props;
+    let background = theme.palette.grey[100];
+    const backgrounds = {
         outlined: 'none',
         error: 'error.main',
         warning: 'warning.main',
@@ -14,17 +14,17 @@ var getBackground = function (theme) { return function (props) {
         background = backgrounds[variant];
     }
     else if (severity) {
-        var _a = backgrounds[severity].split('.'), color = _a[0], colorVariant = _a[1];
+        const [color, colorVariant] = backgrounds[severity].split('.');
         // @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;
+};
+const getColor = (theme) => (props) => {
+    const { variant, severity } = props;
+    let textColor;
     if (variant === 'outlined' && severity) {
-        var textColors = {
+        const textColors = {
             error: theme.palette.error.main,
             info: theme.palette.info.main,
             warning: theme.palette.warning.dark,
@@ -36,7 +36,7 @@ var getColor = function (theme) { return function (props) {
         textColor = theme.palette.grey[700];
     }
     else if ((variant === 'default' || variant === undefined) && severity) {
-        var textColors = {
+        const textColors = {
             error: theme.palette.common.white,
             info: theme.palette.secondary.main,
             warning: theme.palette.secondary.main,
@@ -45,12 +45,12 @@ var getColor = function (theme) { return function (props) {
         textColor = textColors[severity];
     }
     return textColor;
-}; };
-var getBorder = function (theme) { return function (props) {
-    var variant = props.variant, severity = props.severity;
-    var borderColor;
+};
+const getBorder = (theme) => (props) => {
+    const { variant, severity } = props;
+    let borderColor;
     if (variant === 'outlined' && severity) {
-        var borderColors = {
+        const borderColors = {
             error: theme.palette.error.main,
             info: theme.palette.info.main,
             warning: theme.palette.warning.dark,
@@ -59,10 +59,10 @@ var getBorder = function (theme) { return function (props) {
         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 ({
+const useChipStyles = makeStyles((theme) => ({
     root: {
         background: getBackground(theme),
         color: getColor(theme),
@@ -77,7 +77,7 @@ var useChipStyles = makeStyles(function (theme) { return ({
     deleteIcon: {
         color: theme.palette.grey[500],
     },
-}); });
+}));
 
 export { useChipStyles };
 //# sourceMappingURL=ChipStyles.js.map

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

@@ -1 +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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"}
+{"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/CollapsibleText/CollapsibleText.js

@@ -1,36 +1,35 @@
-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; });
+const CollapsibleText = (props) => {
+    const { text, open, previewLines = 2, typographyVariant = 'body1', collapseState: _exclude, ...restProps } = props;
+    const collapseState = useState(false);
+    const typographyRef = useRef(null);
+    const classes = useCollapsibleTextStyles({ ...props, previewLines, typographyVariant });
+    const theme = useTheme();
+    const [collapsible, setCollapsible] = props.collapseState ? props.collapseState : collapseState;
+    const typographyEntryLineHeightRem = parseFloat(theme.typography[typographyVariant].lineHeight);
+    const collapsedSizeRem = previewLines * typographyEntryLineHeightRem;
+    const documentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const collapsedSizePx = collapsedSizeRem * documentFontSize;
+    useEffect(() => {
+        const typographyNode = typographyRef.current;
+        const observer = new ResizeObserver((entries) => {
+            const typographyEntry = entries.find((entry) => entry.target === typographyNode);
             if (typographyEntry) {
-                var typographyEntryHeight = typographyEntry.contentRect.height;
-                var isCollapsible = typographyEntryHeight > collapsedSizePx;
+                const typographyEntryHeight = typographyEntry.contentRect.height;
+                const isCollapsible = typographyEntryHeight > collapsedSizePx;
                 setCollapsible(isCollapsible);
             }
         });
         observer.observe(typographyNode);
-        return function () {
+        return () => {
             observer.unobserve(typographyNode);
         };
     }, []);
-    return (React.createElement(Box, __assign({ position: "relative", overflow: "hidden" }, restProps),
+    return (React.createElement(Box, { 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 })));

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

@@ -1 +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;;;;"}
+{"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":";;;;;AAMa,MAAA,eAAe,GAA6B,CAAC,KAAK,KAAI;IACjE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,GAAG,CAAC,EAAE,iBAAiB,GAAG,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK;AAClH,IAAA,MAAM,aAAa,GAAG,QAAQ,CAAsB,KAAK,CAAC;AAC1D,IAAA,MAAM,aAAa,GAAG,MAAM,CAA8D,IAAI,CAAC;AAC/F,IAAA,MAAM,OAAO,GAAG,wBAAwB,CAAC,EAAE,GAAG,KAAK,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC;AACvF,IAAA,MAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,aAAa,GAAG,aAAa;AAC/F,IAAA,MAAM,4BAA4B,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAoB,CAAC;AACzG,IAAA,MAAM,gBAAgB,GAAG,YAAY,GAAG,4BAA4B;AACpE,IAAA,MAAM,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,QAAQ,CAAC;AACxF,IAAA,MAAM,eAAe,GAAG,gBAAgB,GAAG,gBAAgB;IAE3D,SAAS,CAAC,MAAK;AACb,QAAA,MAAM,cAAc,GAAG,aAAa,CAAC,OAAkB;QACvD,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AAC9C,YAAA,MAAM,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,MAAM,KAAK,cAAc,CAAC;YAChF,IAAI,eAAe,EAAE;AACnB,gBAAA,MAAM,qBAAqB,GAAG,eAAe,CAAC,WAAW,CAAC,MAAM;AAChE,gBAAA,MAAM,aAAa,GAAG,qBAAqB,GAAG,eAAe;gBAC7D,cAAc,CAAC,aAAa,CAAC;;AAEjC,SAAC,CAAC;AACF,QAAA,QAAQ,CAAC,OAAO,CAAC,cAAc,CAAC;AAChC,QAAA,OAAO,MAAK;AACV,YAAA,QAAQ,CAAC,SAAS,CAAC,cAAc,CAAC;AACpC,SAAC;KACF,EAAE,EAAE,CAAC;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,QAAQ,EAAA,GAAK,SAAS,EAAA;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/CollapsibleTextStyles.d.ts

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

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

@@ -1,24 +1,23 @@
 import { makeStyles } from '@material-ui/core';
 
-var getFadeStop = function (_a, typographyVariant) {
-    var typography = _a.typography;
+const getFadeStop = ({ typography }, typographyVariant) => {
     // @ts-expect-error - todo.
     return !isNaN(Number(typography[typographyVariant].lineHeight))
         ? // @ts-expect-error - todo.
-            typography[typographyVariant].lineHeight + "rem"
+            `${typography[typographyVariant].lineHeight}rem`
         : // @ts-expect-error - todo.
             typography[typographyVariant].lineHeight;
 };
-var useCollapsibleTextStyles = makeStyles(function (theme) { return ({
+const useCollapsibleTextStyles = makeStyles((theme) => ({
     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) + ")"; },
+        background: (props) => `linear-gradient(to top, white, #FFF0 ${getFadeStop(theme, props.typographyVariant)})`,
     },
-}); });
+}));
 
 export { useCollapsibleTextStyles };
 //# sourceMappingURL=CollapsibleTextStyles.js.map

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

@@ -1 +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;;;;"}
+{"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,MAAM,WAAW,GAAG,CAAC,EAAE,UAAU,EAAS,EAAE,iBAAyB,KAAI;;AAEvE,IAAA,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC;AAC5D;AACE,YAAA,CAAA,EAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAK,GAAA;AAClD;AACE,YAAA,UAAU,CAAC,iBAAiB,CAAC,CAAC,UAAU;AAC9C,CAAC;AAEY,MAAA,wBAAwB,GAAG,UAAU,CAGhD,CAAC,KAAK,MAAM;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,CAAC,KAAK,KAAK,CAAA,qCAAA,EAAwC,WAAW,CAAC,KAAK,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAG,CAAA,CAAA;AAC9G,KAAA;AACF,CAAA,CAAC;;;;"}

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

@@ -1,4 +1,3 @@
-import { __assign } from 'tslib';
 import { makeStyles, Box } from '@material-ui/core';
 import classNames from 'classnames';
 import React from 'react';
@@ -13,15 +12,14 @@ var SemanticColors;
     SemanticColors["SECONDARY_DARK"] = "secondary.dark";
     SemanticColors["SECONDARY_LIGHT"] = "secondary.light";
 })(SemanticColors || (SemanticColors = {}));
-var useStyles = makeStyles(function (theme) { return ({
+const useStyles = makeStyles((theme) => ({
     dividerRoot: {
         gap: theme.spacing(2),
     },
     textRoot: {
-        color: function (_a) {
-            var textColor = _a.textColor;
+        color: ({ textColor }) => {
             if (textColor && Object.values(SemanticColors).includes(textColor)) {
-                var _b = textColor.split('.'), semanticColor = _b[0], shade = _b[1];
+                const [semanticColor, shade] = textColor.split('.');
                 // @ts-expect-error - todo.
                 return theme.palette[semanticColor][shade];
             }
@@ -32,13 +30,12 @@ var useStyles = makeStyles(function (theme) { return ({
                 return 'black';
             }
         },
-        textTransform: function (props) { return props.textTransform; },
+        textTransform: (props) => props.textTransform,
     },
     dividerLine: {
-        backgroundColor: function (_a) {
-            var dividerColor = _a.dividerColor;
+        backgroundColor: ({ dividerColor }) => {
             if (dividerColor && Object.values(SemanticColors).includes(dividerColor)) {
-                var _b = dividerColor.split('.'), semanticColor = _b[0], shade = _b[1];
+                const [semanticColor, shade] = dividerColor.split('.');
                 // @ts-expect-error - todo.
                 return theme.palette[semanticColor][shade];
             }
@@ -50,15 +47,14 @@ var useStyles = makeStyles(function (theme) { return ({
             }
         },
     },
-}); });
-var Divider = function (_a) {
-    var TypographyProps = _a.TypographyProps, className = _a.className, dividerColor = _a.dividerColor, text = _a.text, textColor = _a.textColor, _b = _a.textTransform, textTransform = _b === void 0 ? 'lowercase' : _b;
-    var classes = useStyles({ dividerColor: dividerColor, textColor: textColor, textTransform: textTransform });
-    var casingOffset = textTransform === 'lowercase' ? '.25rem' : 'unset';
+}));
+const Divider = ({ TypographyProps, className, dividerColor, text, textColor, textTransform = 'lowercase', }) => {
+    const classes = useStyles({ dividerColor, textColor, textTransform });
+    const 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(Typography, { className: classes.textRoot, ...TypographyProps }, text),
             React.createElement(Box, { className: classes.dividerLine, display: "flex", flexGrow: 1, height: "1px", marginTop: casingOffset })))));
 };
 Divider.displayName = 'Divider';

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

@@ -1 +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\ntype StyleProps = Pick<DividerProps, 'dividerColor' | 'textColor' | 'textTransform'>\n\nconst useStyles = makeStyles<Theme, StyleProps>((theme) => ({\n  dividerRoot: {\n    gap: theme.spacing(2),\n  },\n  textRoot: {\n    color: ({ textColor }) => {\n      if (textColor && 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: ({ dividerColor }) => {\n      if (dividerColor && 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> = ({\n  TypographyProps,\n  className,\n  dividerColor,\n  text,\n  textColor,\n  textTransform = 'lowercase',\n}) => {\n  const classes = useStyles({ dividerColor, textColor, textTransform })\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"],"names":[],"mappings":"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"}
+{"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\ntype StyleProps = Pick<DividerProps, 'dividerColor' | 'textColor' | 'textTransform'>\n\nconst useStyles = makeStyles<Theme, StyleProps>((theme) => ({\n  dividerRoot: {\n    gap: theme.spacing(2),\n  },\n  textRoot: {\n    color: ({ textColor }) => {\n      if (textColor && 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: ({ dividerColor }) => {\n      if (dividerColor && 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> = ({\n  TypographyProps,\n  className,\n  dividerColor,\n  text,\n  textColor,\n  textTransform = 'lowercase',\n}) => {\n  const classes = useStyles({ dividerColor, textColor, textTransform })\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"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { TypographyProps } from '../Typography';
-declare type Colors = 'primary.main' | 'primary.dark' | 'primary.light' | 'secondary.main' | 'secondary.dark' | 'secondary.light';
+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;

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

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

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

@@ -2,25 +2,25 @@ import React from 'react';
 import { useFollowerAuthenticationDialogContext } from './context.js';
 import { makeStyles, Button, Box, Divider } from '@material-ui/core';
 
-var useStyles = makeStyles(function () { return ({
+const useStyles = makeStyles(() => ({
     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();
+}));
+const FollowerAuthenticationAltActions = () => {
+    const { state, messages, logos, loading, onActionButtonClick } = useFollowerAuthenticationDialogContext();
+    const 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 () {
+                React.createElement(Button, { variant: "outlined", startIcon: logos.facebook, onClick: () => {
                         onActionButtonClick('sign-in-with-facebook');
                     } }, messages.continueWithFacebookButtonLabel),
-                React.createElement(Button, { variant: "outlined", startIcon: logos.google, onClick: function () {
+                React.createElement(Button, { variant: "outlined", startIcon: logos.google, onClick: () => {
                         onActionButtonClick('sign-in-with-google');
                     } }, messages.continueWithGoogleButtonLabel)));
         case 'signUp':
@@ -28,53 +28,53 @@ var FollowerAuthenticationAltActions = function () {
         case 'emailFound':
             return (React.createElement(Box, { className: classes.main },
                 React.createElement(Divider, null),
-                React.createElement(Button, { variant: "outlined", onClick: function () {
+                React.createElement(Button, { variant: "outlined", onClick: () => {
                         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());
+                React.createElement(Button, { disabled: loading, variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const 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 () {
+                React.createElement(Button, { variant: "outlined", onClick: () => {
                         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());
+                React.createElement(Button, { variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const 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());
+                React.createElement(Button, { disabled: loading, variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const 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());
+                React.createElement(Button, { variant: "outlined", onClick: () => {
+                        const form = document.querySelector('#follower-authentication-form');
+                        const formData = new FormData(form);
+                        const values = Object.fromEntries(formData.entries());
                         onActionButtonClick('request-auth-code-sms', values);
                     } }, messages.phoneFoundCtaButtonLabel)));
         case 'welcome':
-            return (React.createElement(Button, { onClick: function () {
+            return (React.createElement(Button, { onClick: () => {
                     onActionButtonClick('close');
                 } }, messages.done));
         default: