@popmenu/admin-ui 0.126.0 → 0.126.2

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

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { BoxProps } from '@popmenu/common-ui';
+export declare const FullScreenStepperContent: FC<BoxProps & {
+    name: string;
+}>;

package/build/esm/components/FullScreenStepperContent/FullScreenStepperContent.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Box } from '@popmenu/common-ui';
+
+var FullScreenStepperContent = function (props) {
+    props.name; var boxProps = __rest(props, ["name"]);
+    return (React.createElement(Box, __assign({ py: 8 }, boxProps), props.children));
+};
+
+export { FullScreenStepperContent };
+//# sourceMappingURL=FullScreenStepperContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenStepperContent.js","sources":["../../../../src/components/FullScreenStepperContent/FullScreenStepperContent.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport { Box, BoxProps } from '@popmenu/common-ui'\n\nexport const FullScreenStepperContent: FC<BoxProps & { name: string }> = (props) => {\n  const { name: remove, ...boxProps } = props\n  return (\n    <Box py={8} {...boxProps}>\n      {props.children}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAGO,IAAM,wBAAwB,GAAoC,UAAC,KAAK,EAAA;IACvC,KAAK,CAAvB,IAAA,CAAA,KAAK,QAAQ,GAAA,MAAA,CAAK,KAAK,EAArC,CAA6B,MAAA,CAAA;AACnC,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,QAAA,CAAA,EAAC,EAAE,EAAE,CAAC,EAAM,EAAA,QAAQ,GACrB,KAAK,CAAC,QAAQ,CACX;AAEV;;;;"}

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

@@ -0,0 +1 @@
+export { FullScreenStepperContent as default } from './FullScreenStepperContent';

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

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

package/build/esm/components/FullScreenStepperHeader/FullScreenStepperHeader.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Box, Typography, IconButton, Icon } from '@popmenu/common-ui';
+import { X } from '@popmenu/web-icons';
+import { FullScreenStepperProgress } from '../FullScreenStepperProgress/FullScreenStepperProgress.js';
+import { useFullScreenStepperHeaderStyles } from './FullScreenStepperHeaderStyles.js';
+
+var FullScreenStepperHeader = function (props) {
+    var stepCount = props.stepCount, stepCursor = props.stepCursor, step = props.step, onClose = props.onClose;
+    var classes = useFullScreenStepperHeaderStyles(props);
+    return (React.createElement(Box, { className: classes.root },
+        React.createElement(Typography, { variant: "h6" }, step.title),
+        React.createElement(Typography, null,
+            stepCursor,
+            " of ",
+            stepCount),
+        React.createElement(IconButton, { className: classes.closeButton, onClick: onClose },
+            React.createElement(Icon, { icon: X })),
+        React.createElement(FullScreenStepperProgress, { stepCount: stepCount, stepCursor: stepCursor })));
+};
+
+export { FullScreenStepperHeader };
+//# sourceMappingURL=FullScreenStepperHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenStepperHeader.js","sources":["../../../../src/components/FullScreenStepperHeader/FullScreenStepperHeader.tsx"],"sourcesContent":["import React, { FC } from 'react'\n\nimport { Box, Typography, IconButton, Icon } from '@popmenu/common-ui'\nimport { X as XIcon } from '@popmenu/web-icons'\nimport FullScreenStepperProgress from '../FullScreenStepperProgress'\nimport { useFullScreenStepperHeaderStyles } from './FullScreenStepperHeaderStyles'\nimport { FullScreenStepperHeaderProps } from './FullScreenStepperHeaderProps'\n\nexport const FullScreenStepperHeader: FC<FullScreenStepperHeaderProps> = (props) => {\n  const { stepCount, stepCursor, step, onClose } = props\n  const classes = useFullScreenStepperHeaderStyles(props)\n  return (\n    <Box className={classes.root}>\n      <Typography variant=\"h6\">{step.title}</Typography>\n      <Typography>\n        {stepCursor} of {stepCount}\n      </Typography>\n      <IconButton className={classes.closeButton} onClick={onClose}>\n        <Icon icon={XIcon} />\n      </IconButton>\n      <FullScreenStepperProgress stepCount={stepCount} stepCursor={stepCursor} />\n    </Box>\n  )\n}\n"],"names":["XIcon"],"mappings":";;;;;;AAQO,IAAM,uBAAuB,GAAqC,UAAC,KAAK,EAAA;AACrE,IAAA,IAAA,SAAS,GAAgC,KAAK,UAArC,EAAE,UAAU,GAAoB,KAAK,CAAA,UAAzB,EAAE,IAAI,GAAc,KAAK,CAAnB,IAAA,EAAE,OAAO,GAAK,KAAK,QAAV;AAC5C,IAAA,IAAM,OAAO,GAAG,gCAAgC,CAAC,KAAK,CAAC;IACvD,QACE,oBAAC,GAAG,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAA;QAC1B,KAAC,CAAA,aAAA,CAAA,UAAU,IAAC,OAAO,EAAC,IAAI,EAAE,EAAA,IAAI,CAAC,KAAK,CAAc;AAClD,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,IAAA;YACR,UAAU;;AAAM,YAAA,SAAS,CACf;QACb,KAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,EAAA;AAC1D,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAEA,CAAK,GAAI,CACV;AACb,QAAA,KAAA,CAAA,aAAA,CAAC,yBAAyB,EAAA,EAAC,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,EAAA,CAAI,CACvE;AAEV;;;;"}

package/build/esm/components/FullScreenStepperHeader/FullScreenStepperHeaderProps.d.ts

@@ -0,0 +1,8 @@
+import { FullScreenStepperTypes } from '../FullScreenStepper/types';
+import { FullScreenStepperSubProps } from '../FullScreenStepper/FullScreenStepperProps';
+export interface FullScreenStepperHeaderProps {
+    stepCursor: FullScreenStepperTypes.StepCursor;
+    stepCount: FullScreenStepperTypes.StepCount;
+    step: FullScreenStepperSubProps.Step;
+    onClose: () => void;
+}

package/build/esm/components/FullScreenStepperHeader/FullScreenStepperHeaderStyles.d.ts

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

package/build/esm/components/FullScreenStepperHeader/FullScreenStepperHeaderStyles.js

@@ -0,0 +1,26 @@
+import { makeStyles } from '@material-ui/core';
+
+var useFullScreenStepperHeaderStyles = makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        closeButton: {
+            position: 'absolute',
+            right: 0,
+            top: 0,
+        },
+        root: {
+            alignItems: 'center',
+            background: 'white',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            padding: spacing(1.5, 0),
+            position: 'sticky',
+            top: 0,
+            zIndex: 3,
+        },
+    });
+});
+
+export { useFullScreenStepperHeaderStyles };
+//# sourceMappingURL=FullScreenStepperHeaderStyles.js.map

package/build/esm/components/FullScreenStepperHeader/FullScreenStepperHeaderStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenStepperHeaderStyles.js","sources":["../../../../src/components/FullScreenStepperHeader/FullScreenStepperHeaderStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nimport { FullScreenStepperHeaderProps } from './FullScreenStepperHeaderProps'\n\nexport const useFullScreenStepperHeaderStyles = makeStyles<Theme, FullScreenStepperHeaderProps>(({ spacing }) => ({\n  closeButton: {\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n  root: {\n    alignItems: 'center',\n    background: 'white',\n    display: 'flex',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    padding: spacing(1.5, 0),\n    position: 'sticky',\n    top: 0,\n    zIndex: 3,\n  },\n}))\n"],"names":[],"mappings":";;AAIa,IAAA,gCAAgC,GAAG,UAAU,CAAsC,UAAC,EAAW,EAAA;AAAT,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA;AAAO,IAAA,QAAC;AAChH,QAAA,WAAW,EAAE;AACX,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,KAAK,EAAE,CAAC;AACR,YAAA,GAAG,EAAE,CAAC;AACP,SAAA;AACD,QAAA,IAAI,EAAE;AACJ,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,cAAc,EAAE,QAAQ;AACxB,YAAA,OAAO,EAAE,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;AACxB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,GAAG,EAAE,CAAC;AACN,YAAA,MAAM,EAAE,CAAC;AACV,SAAA;KACF;AAjBgH,CAiB/G;;;;"}

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

@@ -0,0 +1 @@
+export { FullScreenStepperHeader as default } from './FullScreenStepperHeader';

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

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

package/build/esm/components/FullScreenStepperProgress/FullScreenStepperProgress.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Box } from '@popmenu/common-ui';
+import { useFullScreenStepperProgressStyles } from './FullScreenStepperProgressStyles.js';
+
+var FullScreenStepperProgress = function (props) {
+    var classes = useFullScreenStepperProgressStyles(props);
+    return (React.createElement(Box, { className: classes.track },
+        React.createElement(Box, { className: classes.progress })));
+};
+
+export { FullScreenStepperProgress };
+//# sourceMappingURL=FullScreenStepperProgress.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenStepperProgress.js","sources":["../../../../src/components/FullScreenStepperProgress/FullScreenStepperProgress.tsx"],"sourcesContent":["import React, { FC } from 'react'\n\nimport { Box } from '@popmenu/common-ui'\nimport { useFullScreenStepperProgressStyles } from './FullScreenStepperProgressStyles'\nimport { FullScreenStepperProgressProps } from './FullScreenStepperProgressProps'\n\nexport const FullScreenStepperProgress: FC<FullScreenStepperProgressProps> = (props) => {\n  const classes = useFullScreenStepperProgressStyles(props)\n  return (\n    <Box className={classes.track}>\n      <Box className={classes.progress} />\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAMO,IAAM,yBAAyB,GAAuC,UAAC,KAAK,EAAA;AACjF,IAAA,IAAM,OAAO,GAAG,kCAAkC,CAAC,KAAK,CAAC;IACzD,QACE,oBAAC,GAAG,EAAA,EAAC,SAAS,EAAE,OAAO,CAAC,KAAK,EAAA;QAC3B,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,EAAA,SAAS,EAAE,OAAO,CAAC,QAAQ,EAAA,CAAI,CAChC;AAEV;;;;"}

package/build/esm/components/FullScreenStepperProgress/FullScreenStepperProgressProps.d.ts

@@ -0,0 +1,5 @@
+import { FullScreenStepperTypes } from '../FullScreenStepper/types';
+export interface FullScreenStepperProgressProps {
+    stepCursor: FullScreenStepperTypes.StepCursor;
+    stepCount: FullScreenStepperTypes.StepCount;
+}

package/build/esm/components/FullScreenStepperProgress/FullScreenStepperProgressStyles.d.ts

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

package/build/esm/components/FullScreenStepperProgress/FullScreenStepperProgressStyles.js

@@ -0,0 +1,36 @@
+import { makeStyles } from '@material-ui/core';
+
+var getBorderRadius = function (theme, props) {
+    var stepCursor = props.stepCursor, stepCount = props.stepCount;
+    var isFinalStep = stepCursor / stepCount === 1;
+    if (isFinalStep) {
+        return 0;
+    }
+    else {
+        return theme.spacing(0.5);
+    }
+};
+var useFullScreenStepperProgressStyles = makeStyles(function (theme) { return ({
+    progress: {
+        width: function (props) { return (props.stepCursor / props.stepCount) * 100 + "%"; },
+        transition: 'all 500ms',
+        height: theme.spacing(1),
+        // @ts-expect-error: Theme includes extended properties
+        background: "linear-gradient(45deg, " + theme.palette.primary.gradientStart + ", " + theme.palette.primary.gradientEnd + ")",
+        borderEndEndRadius: function (props) { return getBorderRadius(theme, props); },
+        borderStartEndRadius: function (props) { return getBorderRadius(theme, props); },
+    },
+    track: {
+        position: 'absolute',
+        bottom: 0,
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        height: theme.spacing(0.5),
+        background: theme.palette.grey[100],
+        zIndex: 2,
+    },
+}); });
+
+export { useFullScreenStepperProgressStyles };
+//# sourceMappingURL=FullScreenStepperProgressStyles.js.map

package/build/esm/components/FullScreenStepperProgress/FullScreenStepperProgressStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FullScreenStepperProgressStyles.js","sources":["../../../../src/components/FullScreenStepperProgress/FullScreenStepperProgressStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { FullScreenStepperProgressProps } from './FullScreenStepperProgressProps'\n\nconst getBorderRadius = (theme: Theme, props: FullScreenStepperProgressProps) => {\n  const { stepCursor, stepCount } = props\n  const isFinalStep = stepCursor / stepCount === 1\n  if (isFinalStep) {\n    return 0\n  } else {\n    return theme.spacing(0.5)\n  }\n}\n\nexport const useFullScreenStepperProgressStyles = makeStyles<Theme, FullScreenStepperProgressProps>((theme) => ({\n  progress: {\n    width: (props) => `${(props.stepCursor / props.stepCount) * 100}%`,\n    transition: 'all 500ms',\n    height: theme.spacing(1),\n    // @ts-expect-error: Theme includes extended properties\n    background: `linear-gradient(45deg, ${theme.palette.primary.gradientStart}, ${theme.palette.primary.gradientEnd})`,\n    borderEndEndRadius: (props) => getBorderRadius(theme, props),\n    borderStartEndRadius: (props) => getBorderRadius(theme, props),\n  },\n  track: {\n    position: 'absolute',\n    bottom: 0,\n    display: 'flex',\n    alignItems: 'center',\n    width: '100%',\n    height: theme.spacing(0.5),\n    background: theme.palette.grey[100],\n    zIndex: 2,\n  },\n}))\n"],"names":[],"mappings":";;AAGA,IAAM,eAAe,GAAG,UAAC,KAAY,EAAE,KAAqC,EAAA;IAClE,IAAA,UAAU,GAAgB,KAAK,CAAA,UAArB,EAAE,SAAS,GAAK,KAAK,CAAA,SAAV;AAC7B,IAAA,IAAM,WAAW,GAAG,UAAU,GAAG,SAAS,KAAK,CAAC;AAChD,IAAA,IAAI,WAAW,EAAE;AACf,QAAA,OAAO,CAAC;AACT;AAAM,SAAA;AACL,QAAA,OAAO,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AAC1B;AACH,CAAC;AAEY,IAAA,kCAAkC,GAAG,UAAU,CAAwC,UAAC,KAAK,EAAK,EAAA,QAAC;AAC9G,IAAA,QAAQ,EAAE;AACR,QAAA,KAAK,EAAE,UAAC,KAAK,IAAK,OAAG,CAAC,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,SAAS,IAAI,GAAG,GAAA,GAAG,GAAA;AAClE,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;;AAExB,QAAA,UAAU,EAAE,yBAA0B,GAAA,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,aAAa,GAAA,IAAA,GAAK,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,GAAG,GAAA;AAClH,QAAA,kBAAkB,EAAE,UAAC,KAAK,EAAA,EAAK,OAAA,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA,EAAA;AAC5D,QAAA,oBAAoB,EAAE,UAAC,KAAK,EAAA,EAAK,OAAA,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,CAAA,EAAA;AAC/D,KAAA;AACD,IAAA,KAAK,EAAE;AACL,QAAA,QAAQ,EAAE,UAAU;AACpB,QAAA,MAAM,EAAE,CAAC;AACT,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,UAAU,EAAE,QAAQ;AACpB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QAC1B,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,QAAA,MAAM,EAAE,CAAC;AACV,KAAA;CACF,EAAC,EAAA;;;;"}

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

@@ -0,0 +1 @@
+export { FullScreenStepperProgress as default } from './FullScreenStepperProgress';

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

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

package/build/esm/components/List/List.js

@@ -0,0 +1,15 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import classNames from 'classnames';
+import { List as List$1 } from '@material-ui/core';
+import { useStyles } from './styles.js';
+
+var List = function (props) {
+    var _a;
+    var children = props.children, uncontained = props.uncontained, className = props.className, restProps = __rest(props, ["children", "uncontained", "className"]);
+    var classes = useStyles(props);
+    return (React.createElement(List$1, __assign({ classes: classes, className: classNames((_a = {}, _a[classes.uncontained] = uncontained, _a), className) }, restProps), children));
+};
+
+export { List };
+//# sourceMappingURL=List.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../../src/components/List/List.tsx"],"sourcesContent":["import React from 'react'\nimport classNames from 'classnames'\nimport { List as MuiList } from '@material-ui/core'\n\nimport { ListProps } from './ListProps'\nimport { useStyles } from './styles'\n\nexport const List = (props: ListProps) => {\n  const { children, uncontained, className, ...restProps } = props\n  const classes = useStyles(props)\n  return (\n    <MuiList classes={classes} className={classNames({ [classes.uncontained]: uncontained }, className)} {...restProps}>\n      {children}\n    </MuiList>\n  )\n}\n"],"names":["MuiList"],"mappings":";;;;;;AAOO,IAAM,IAAI,GAAG,UAAC,KAAgB,EAAA;;IAC3B,IAAA,QAAQ,GAA2C,KAAK,CAAA,QAAhD,EAAE,WAAW,GAA8B,KAAK,CAAnC,WAAA,EAAE,SAAS,GAAmB,KAAK,UAAxB,EAAK,SAAS,UAAK,KAAK,EAA1D,CAAkD,UAAA,EAAA,aAAA,EAAA,WAAA,CAAA,CAAF;AACtD,IAAA,IAAM,OAAO,GAAG,SAAS,CAAC,KAAK,CAAC;IAChC,QACE,KAAC,CAAA,aAAA,CAAAA,MAAO,EAAC,QAAA,CAAA,EAAA,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAG,EAAA,GAAA,EAAA,EAAA,EAAA,CAAC,OAAO,CAAC,WAAW,CAAA,GAAG,WAAW,EAAA,EAAA,GAAI,SAAS,CAAC,EAAM,EAAA,SAAS,CAC/G,EAAA,QAAQ,CACD;AAEd;;;;"}

package/build/esm/components/List/ListProps.d.ts

@@ -0,0 +1,4 @@
+import { ListProps as CommonListProps } from '@popmenu/common-ui';
+export interface ListProps extends CommonListProps {
+    uncontained?: boolean;
+}

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

@@ -0,0 +1,2 @@
+export { List } from './List';
+export { ListProps } from './ListProps';

package/build/esm/components/List/styles.d.ts

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

package/build/esm/components/List/styles.js

@@ -0,0 +1,24 @@
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles(function (theme) { return ({
+    root: {
+        '&$uncontained > li > *:first-child': {
+            background: theme.palette.background.paper,
+            borderRadius: theme.spacing(1),
+        },
+        '& > li > *:first-child': {
+            borderBottom: "1px solid " + theme.palette.grey[300],
+        },
+        '& > li:last-child > *:first-child': {
+            borderBottom: 'none',
+        },
+    },
+    uncontained: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 16,
+    },
+}); });
+
+export { useStyles };
+//# sourceMappingURL=styles.js.map

package/build/esm/components/List/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/List/styles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\n\nimport { ListProps } from './ListProps'\n\nexport const useStyles = makeStyles<Theme, ListProps>((theme) => ({\n  root: {\n    '&$uncontained > li > *:first-child': {\n      background: theme.palette.background.paper,\n      borderRadius: theme.spacing(1),\n    },\n    '& > li > *:first-child': {\n      borderBottom: `1px solid ${theme.palette.grey[300]}`,\n    },\n    '& > li:last-child > *:first-child': {\n      borderBottom: 'none',\n    },\n  },\n  uncontained: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 16,\n  },\n}))\n"],"names":[],"mappings":";;AAIa,IAAA,SAAS,GAAG,UAAU,CAAmB,UAAC,KAAK,EAAK,EAAA,QAAC;AAChE,IAAA,IAAI,EAAE;AACJ,QAAA,oCAAoC,EAAE;AACpC,YAAA,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,KAAK;AAC1C,YAAA,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;AAC/B,SAAA;AACD,QAAA,wBAAwB,EAAE;YACxB,YAAY,EAAE,eAAa,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAG;AACrD,SAAA;AACD,QAAA,mCAAmC,EAAE;AACnC,YAAA,YAAY,EAAE,MAAM;AACrB,SAAA;AACF,KAAA;AACD,IAAA,WAAW,EAAE;AACX,QAAA,OAAO,EAAE,MAAM;AACf,QAAA,aAAa,EAAE,QAAQ;AACvB,QAAA,GAAG,EAAE,EAAE;AACR,KAAA;CACF,EAAC,EAAA;;;;"}

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const Page: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/build/esm/components/Page/Page.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Box } from '@popmenu/common-ui';
+
+var Page = function (props) {
+    var children = props.children, restProps = __rest(props, ["children"]);
+    return (React.createElement(Box, __assign({ marginTop: 8, display: "flex", alignItems: "center", flexDirection: "column" }, restProps), children));
+};
+
+export { Page };
+//# sourceMappingURL=Page.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Page.js","sources":["../../../../src/components/Page/Page.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Box } from '@popmenu/common-ui'\n\nexport const Page = (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {\n  const { children, ...restProps } = props\n  return (\n    <Box marginTop={8} display=\"flex\" alignItems=\"center\" flexDirection=\"column\" {...restProps}>\n      {children}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAGO,IAAM,IAAI,GAAG,UAAC,KAAqD,EAAA;IAChE,IAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAlC,CAA0B,UAAA,CAAA,CAAF;IAC9B,QACE,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,QAAA,CAAA,EAAA,SAAS,EAAE,CAAC,EAAE,OAAO,EAAC,MAAM,EAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAK,EAAA,SAAS,CACvF,EAAA,QAAQ,CACL;AAEV;;;;"}

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

@@ -0,0 +1 @@
+export { Page } from './Page';

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const PageBody: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/build/esm/components/PageBody/PageBody.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Box } from '@popmenu/common-ui';
+
+var PageBody = function (props) {
+    var children = props.children, restProps = __rest(props, ["children"]);
+    return (React.createElement(Box, __assign({ py: 2, px: 5.5, maxWidth: 1100, width: "100%" }, restProps), children));
+};
+
+export { PageBody };
+//# sourceMappingURL=PageBody.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageBody.js","sources":["../../../../src/components/PageBody/PageBody.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Box } from '@popmenu/common-ui'\n\nexport const PageBody = (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {\n  const { children, ...restProps } = props\n  return (\n    <Box py={2} px={5.5} maxWidth={1100} width=\"100%\" {...restProps}>\n      {children}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAGO,IAAM,QAAQ,GAAG,UAAC,KAAqD,EAAA;IACpE,IAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAlC,CAA0B,UAAA,CAAA,CAAF;IAC9B,QACE,KAAC,CAAA,aAAA,CAAA,GAAG,EAAC,QAAA,CAAA,EAAA,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,EAAK,EAAA,SAAS,CAC5D,EAAA,QAAQ,CACL;AAEV;;;;"}

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

@@ -0,0 +1 @@
+export { PageBody } from './PageBody';

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PageSectionProps } from './PageSectionProps';
+export declare const PageSection: React.ForwardRefExoticComponent<PageSectionProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/components/PageSection/PageSection.js

@@ -0,0 +1,15 @@
+import { __rest, __assign } from 'tslib';
+import React, { forwardRef } from 'react';
+import { Card, CardContent } from '@popmenu/common-ui';
+import { usePageSectionStyles } from './PageSectionStyles.js';
+
+var PageSection = forwardRef(function (props, ref) {
+    var children = props.children; props.uncontained; var restProps = __rest(props, ["children", "uncontained"]);
+    var classes = usePageSectionStyles(props);
+    return (React.createElement(Card, __assign({ classes: { root: classes.root }, ref: ref }, restProps),
+        React.createElement(CardContent, { classes: { root: classes.cardContent } }, children)));
+});
+PageSection.displayName = 'PageSection';
+
+export { PageSection };
+//# sourceMappingURL=PageSection.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageSection.js","sources":["../../../../src/components/PageSection/PageSection.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { Card, CardContent } from '@popmenu/common-ui'\nimport { PageSectionProps } from './PageSectionProps'\nimport { usePageSectionStyles } from './PageSectionStyles'\n\nexport const PageSection = forwardRef<HTMLDivElement, PageSectionProps>((props, ref) => {\n  const { children, uncontained, ...restProps } = props\n  const classes = usePageSectionStyles(props)\n  return (\n    <Card classes={{ root: classes.root }} ref={ref} {...restProps}>\n      <CardContent classes={{ root: classes.cardContent }}>{children}</CardContent>\n    </Card>\n  )\n})\n\nPageSection.displayName = 'PageSection'\n"],"names":[],"mappings":";;;;;IAKa,WAAW,GAAG,UAAU,CAAmC,UAAC,KAAK,EAAE,GAAG,EAAA;AACzE,IAAA,IAAA,QAAQ,GAAgC,KAAK,CAArC,QAAA,CAAA,CAAgC,KAAK,CAAxB,WAAA,CAAA,KAAK,SAAS,GAAK,MAAA,CAAA,KAAK,EAA/C,CAAA,UAAA,EAAA,aAAA,CAAuC;AAC7C,IAAA,IAAM,OAAO,GAAG,oBAAoB,CAAC,KAAK,CAAC;AAC3C,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,IAAI,aAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,EAAE,GAAG,EAAE,GAAG,IAAM,SAAS,CAAA;AAC5D,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,EAAG,EAAA,QAAQ,CAAe,CACxE;AAEX,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/build/esm/components/PageSection/PageSectionProps.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export interface PageSectionProps extends PropsWithChildren<HTMLAttributes<HTMLElement>> {
+    /** Removes the background of the section. */
+    uncontained?: boolean;
+}

package/build/esm/components/PageSection/PageSectionStyles.d.ts

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

package/build/esm/components/PageSection/PageSectionStyles.js

@@ -0,0 +1,19 @@
+import { makeStyles } from '@material-ui/core';
+
+var usePageSectionStyles = makeStyles(function (_a) {
+    var spacing = _a.spacing;
+    return ({
+        root: {
+            background: function (_a) {
+                var uncontained = _a.uncontained;
+                return (uncontained ? 'transparent' : undefined);
+            },
+        },
+        cardContent: {
+            padding: spacing(4),
+        },
+    });
+});
+
+export { usePageSectionStyles };
+//# sourceMappingURL=PageSectionStyles.js.map

package/build/esm/components/PageSection/PageSectionStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSectionStyles.js","sources":["../../../../src/components/PageSection/PageSectionStyles.ts"],"sourcesContent":["import { makeStyles, Theme } from '@material-ui/core'\nimport { PageSectionProps } from './PageSectionProps'\n\nexport const usePageSectionStyles = makeStyles<Theme, PageSectionProps>(({ spacing }) => ({\n  root: {\n    background: ({ uncontained }) => (uncontained ? 'transparent' : undefined),\n  },\n  cardContent: {\n    padding: spacing(4),\n  },\n}))\n"],"names":[],"mappings":";;AAGa,IAAA,oBAAoB,GAAG,UAAU,CAA0B,UAAC,EAAW,EAAA;AAAT,IAAA,IAAA,OAAO,GAAA,EAAA,CAAA,OAAA;AAAO,IAAA,QAAC;AACxF,QAAA,IAAI,EAAE;YACJ,UAAU,EAAE,UAAC,EAAe,EAAA;AAAb,gBAAA,IAAA,WAAW,GAAA,EAAA,CAAA,WAAA;gBAAO,QAAC,WAAW,GAAG,aAAa,GAAG,SAAS;aAAC;AAC3E,SAAA;AACD,QAAA,WAAW,EAAE;AACX,YAAA,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AACpB,SAAA;KACF;AAPwF,CAOvF;;;;"}

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

@@ -0,0 +1 @@
+export { PageSection } from './PageSection';

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const PageSectionHead: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/build/esm/components/PageSectionHead/PageSectionHead.js

@@ -0,0 +1,13 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Box } from '@popmenu/common-ui';
+import { useTheme } from '@material-ui/core';
+
+var PageSectionHead = function (props) {
+    var children = props.children, restProps = __rest(props, ["children"]);
+    var theme = useTheme();
+    return (React.createElement(Box, __assign({ fontSize: theme.typography.h5.fontSize, mb: "1em", display: "flex", justifyContent: "space-between" }, restProps), children));
+};
+
+export { PageSectionHead };
+//# sourceMappingURL=PageSectionHead.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageSectionHead.js","sources":["../../../../src/components/PageSectionHead/PageSectionHead.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Box } from '@popmenu/common-ui'\nimport { useTheme } from '@material-ui/core'\n\nexport const PageSectionHead = (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {\n  const { children, ...restProps } = props\n  const theme = useTheme()\n  return (\n    <Box fontSize={theme.typography.h5.fontSize} mb=\"1em\" display=\"flex\" justifyContent=\"space-between\" {...restProps}>\n      {children}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;;AAIO,IAAM,eAAe,GAAG,UAAC,KAAqD,EAAA;IAC3E,IAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAlC,CAA0B,UAAA,CAAA,CAAF;AAC9B,IAAA,IAAM,KAAK,GAAG,QAAQ,EAAE;AACxB,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,GAAG,EAAA,QAAA,CAAA,EAAC,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,cAAc,EAAC,eAAe,EAAA,EAAK,SAAS,CAAA,EAC9G,QAAQ,CACL;AAEV;;;;"}

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

@@ -0,0 +1 @@
+export { PageSectionHead } from './PageSectionHead';

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

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

package/build/esm/components/PageSectionTitle/PageSectionTitle.js

@@ -0,0 +1,13 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Typography } from '@popmenu/common-ui';
+import { useStyles } from './styles.js';
+
+var PageSectionTitle = function (props) {
+    var children = props.children, restProps = __rest(props, ["children"]);
+    var classes = useStyles();
+    return (React.createElement(Typography, __assign({ classes: classes, gutterBottom: true, variant: "h5" }, restProps), children));
+};
+
+export { PageSectionTitle };
+//# sourceMappingURL=PageSectionTitle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageSectionTitle.js","sources":["../../../../src/components/PageSectionTitle/PageSectionTitle.tsx"],"sourcesContent":["import React from 'react'\nimport { Typography, TypographyProps } from '@popmenu/common-ui'\n\nimport { useStyles } from './styles'\n\nexport const PageSectionTitle = (props: TypographyProps) => {\n  const { children, ...restProps } = props\n  const classes = useStyles()\n  return (\n    <Typography classes={classes} gutterBottom variant=\"h5\" {...restProps}>\n      {children}\n    </Typography>\n  )\n}\n"],"names":[],"mappings":";;;;;AAKO,IAAM,gBAAgB,GAAG,UAAC,KAAsB,EAAA;IAC7C,IAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAlC,CAA0B,UAAA,CAAA,CAAF;AAC9B,IAAA,IAAM,OAAO,GAAG,SAAS,EAAE;AAC3B,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,UAAU,aAAC,OAAO,EAAE,OAAO,EAAE,YAAY,QAAC,OAAO,EAAC,IAAI,EAAK,EAAA,SAAS,GAClE,QAAQ,CACE;AAEjB;;;;"}

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

@@ -0,0 +1 @@
+export { PageSectionTitle } from './PageSectionTitle';

package/build/esm/components/PageSectionTitle/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"gutterBottom">;

package/build/esm/components/PageSectionTitle/styles.js

@@ -0,0 +1,10 @@
+import { makeStyles } from '@material-ui/core';
+
+var useStyles = makeStyles(function () { return ({
+    gutterBottom: {
+        marginBottom: '1em',
+    },
+}); });
+
+export { useStyles };
+//# sourceMappingURL=styles.js.map

package/build/esm/components/PageSectionTitle/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../src/components/PageSectionTitle/styles.ts"],"sourcesContent":["import { makeStyles } from '@material-ui/core'\n\nexport const useStyles = makeStyles(() => ({\n  gutterBottom: {\n    marginBottom: '1em',\n  },\n}))\n"],"names":[],"mappings":";;IAEa,SAAS,GAAG,UAAU,CAAC,YAAA,EAAM,QAAC;AACzC,IAAA,YAAY,EAAE;AACZ,QAAA,YAAY,EAAE,KAAK;AACpB,KAAA;CACF,EAAC,EAAA;;;;"}

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

@@ -0,0 +1,2 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+export declare const PageSections: (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => JSX.Element;

package/build/esm/components/PageSections/PageSections.js

@@ -0,0 +1,11 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Box } from '@popmenu/common-ui';
+
+var PageSections = function (props) {
+    var children = props.children, restProps = __rest(props, ["children"]);
+    return (React.createElement(Box, __assign({ display: "flex", flexDirection: "column", gridGap: 16 }, restProps), children));
+};
+
+export { PageSections };
+//# sourceMappingURL=PageSections.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PageSections.js","sources":["../../../../src/components/PageSections/PageSections.tsx"],"sourcesContent":["import React, { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Box } from '@popmenu/common-ui'\n\nexport const PageSections = (props: PropsWithChildren<HTMLAttributes<HTMLElement>>) => {\n  const { children, ...restProps } = props\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" gridGap={16} {...restProps}>\n      {children}\n    </Box>\n  )\n}\n"],"names":[],"mappings":";;;;AAGO,IAAM,YAAY,GAAG,UAAC,KAAqD,EAAA;IACxE,IAAA,QAAQ,GAAmB,KAAK,CAAxB,QAAA,EAAK,SAAS,GAAA,MAAA,CAAK,KAAK,EAAlC,CAA0B,UAAA,CAAA,CAAF;IAC9B,QACE,oBAAC,GAAG,EAAA,QAAA,CAAA,EAAC,OAAO,EAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAC,OAAO,EAAE,EAAE,EAAA,EAAM,SAAS,CAClE,EAAA,QAAQ,CACL;AAEV;;;;"}

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

@@ -0,0 +1 @@
+export { PageSections } from './PageSections';

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

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

package/build/esm/components/SelectableCard/SelectableCard.js

@@ -0,0 +1,22 @@
+import { __rest, __assign } from 'tslib';
+import React from 'react';
+import { Card, CardActionArea, Icon, CardContent } from '@popmenu/common-ui';
+import { CheckCircle, Circle } from '@popmenu/web-icons';
+import { useSelectableCardStyles } from './SelectableCardStyles.js';
+
+var SelectableCard = function (props) {
+    var children = props.children, selectedProp = props.selected, _a = props.selection, selection = _a === void 0 ? [] : _a, onClick = props.onClick, value = props.value, labelId = props.labelId, CardActionAreaProps = props.CardActionAreaProps, muiProps = __rest(props, ["children", "selected", "selection", "onClick", "value", "labelId", "CardActionAreaProps"]);
+    var selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value);
+    var classes = useSelectableCardStyles(__assign(__assign({}, props), { selected: selected }));
+    var handleClick = function () {
+        onClick(value);
+    };
+    return (React.createElement(Card, __assign({ classes: { root: classes.root } }, muiProps),
+        React.createElement(CardActionArea, __assign({ onClick: handleClick, classes: { focusHighlight: classes.focusHighlight }, role: "checkbox", "aria-checked": selected, "aria-labelledby": labelId }, CardActionAreaProps),
+            React.createElement(Icon, { className: classes.icon, icon: selected ? CheckCircle : Circle, size: "medium" }),
+            React.createElement(CardContent, { classes: { root: classes.cardContent } }, children))));
+};
+SelectableCard.displayName = 'SelectableCard';
+
+export { SelectableCard };
+//# sourceMappingURL=SelectableCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCard.js","sources":["../../../../src/components/SelectableCard/SelectableCard.tsx"],"sourcesContent":["import React, { FC } from 'react'\n\nimport { Card, CardActionArea, CardContent, Icon } from '@popmenu/common-ui'\nimport { CheckCircle, Circle } from '@popmenu/web-icons'\nimport { useSelectableCardStyles } from './SelectableCardStyles'\nimport { SelectableCardProps } from './SelectableCardProps'\n\nexport const SelectableCard: FC<SelectableCardProps> = (props) => {\n  const {\n    children,\n    selected: selectedProp,\n    selection = [],\n    onClick,\n    value,\n    labelId,\n    CardActionAreaProps,\n    ...muiProps\n  } = props\n  const selected = typeof selectedProp === 'boolean' ? selectedProp : selection.includes(value)\n  const classes = useSelectableCardStyles({ ...props, selected })\n\n  const handleClick = () => {\n    onClick(value)\n  }\n\n  return (\n    <Card classes={{ root: classes.root }} {...muiProps}>\n      <CardActionArea\n        onClick={handleClick}\n        classes={{ focusHighlight: classes.focusHighlight }}\n        role=\"checkbox\"\n        aria-checked={selected}\n        aria-labelledby={labelId}\n        {...CardActionAreaProps}\n      >\n        <Icon className={classes.icon} icon={selected ? CheckCircle : Circle} size=\"medium\" />\n        <CardContent classes={{ root: classes.cardContent }}>{children}</CardContent>\n      </CardActionArea>\n    </Card>\n  )\n}\n\nSelectableCard.displayName = 'SelectableCard'\n"],"names":[],"mappings":";;;;;;AAOO,IAAM,cAAc,GAA4B,UAAC,KAAK,EAAA;IAEzD,IAAA,QAAQ,GAQN,KAAK,CAAA,QARC,EACE,YAAY,GAOpB,KAAK,CAPe,QAAA,EACtB,KAME,KAAK,CAAA,SANO,EAAd,SAAS,GAAA,EAAA,KAAA,MAAA,GAAG,EAAE,GAAA,EAAA,EACd,OAAO,GAKL,KAAK,QALA,EACP,KAAK,GAIH,KAAK,CAAA,KAJF,EACL,OAAO,GAGL,KAAK,CAHA,OAAA,EACP,mBAAmB,GAEjB,KAAK,oBAFY,EAChB,QAAQ,UACT,KAAK,EATH,CASL,UAAA,EAAA,UAAA,EAAA,WAAA,EAAA,SAAA,EAAA,OAAA,EAAA,SAAA,EAAA,qBAAA,CAAA,CADY;AAEb,IAAA,IAAM,QAAQ,GAAG,OAAO,YAAY,KAAK,SAAS,GAAG,YAAY,GAAG,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC;IAC7F,IAAM,OAAO,GAAG,uBAAuB,CAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAM,KAAK,CAAE,EAAA,EAAA,QAAQ,EAAA,QAAA,EAAA,CAAA,CAAG;AAE/D,IAAA,IAAM,WAAW,GAAG,YAAA;QAClB,OAAO,CAAC,KAAK,CAAC;AAChB,KAAC;AAED,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,QAAA,CAAA,EAAC,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,IAAM,QAAQ,CAAA;QACjD,KAAC,CAAA,aAAA,CAAA,cAAc,EACb,QAAA,CAAA,EAAA,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,EAAE,cAAc,EAAE,OAAO,CAAC,cAAc,EAAE,EACnD,IAAI,EAAC,UAAU,kBACD,QAAQ,EAAA,iBAAA,EACL,OAAO,EAAA,EACpB,mBAAmB,CAAA;YAEvB,KAAC,CAAA,aAAA,CAAA,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAG,WAAW,GAAG,MAAM,EAAE,IAAI,EAAC,QAAQ,EAAG,CAAA;AACtF,YAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAC,EAAA,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,CAAC,WAAW,EAAE,EAAG,EAAA,QAAQ,CAAe,CAC9D,CACZ;AAEX;AAEA,cAAc,CAAC,WAAW,GAAG,gBAAgB;;;;"}

package/build/esm/components/SelectableCard/SelectableCardProps.d.ts

@@ -0,0 +1,17 @@
+import { CardActionAreaProps, CardProps as MuiCardProps } from '@material-ui/core';
+import { Ref } from 'react';
+export interface SelectableCardProps extends Omit<MuiCardProps, 'onClick'> {
+    /** Id of the DOM node serving as the label of the input. */
+    labelId: string;
+    /** Sets card selection state. */
+    selected?: boolean;
+    /** A reference to selection state managing a group of SelectableCards. */
+    selection?: Array<string>;
+    /** The value of a card in respects to selection state. */
+    value: string;
+    /** Callback for when the SelectableCard is clicked. */
+    onClick: (value: string) => void;
+    /** Props passed to the CardActionArea rendered by SelectableCard. */
+    CardActionAreaProps?: CardActionAreaProps;
+    ref?: (instance: HTMLDivElement) => void | Ref<HTMLDivElement> | null;
+}

package/build/esm/components/SelectableCard/SelectableCardStyles.d.ts

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

package/build/esm/components/SelectableCard/SelectableCardStyles.js

@@ -0,0 +1,47 @@
+import { makeStyles, lighten } from '@material-ui/core';
+
+var useSelectableCardStyles = makeStyles(function (theme) {
+    var _a = theme.palette, info = _a.info, grey = _a.grey, getContrastText = _a.getContrastText, spacing = theme.spacing;
+    var selectedBackgroundColor = lighten(theme.palette.info.light, 0.9);
+    var backgroundColor = theme.palette.surface.light;
+    return {
+        root: {
+            position: 'relative',
+            border: function (_a) {
+                var selected = _a.selected;
+                return (selected ? "1px solid " + info.light : "1px solid " + grey[700]);
+            },
+            backgroundColor: function (_a) {
+                var selected = _a.selected;
+                return (selected ? selectedBackgroundColor : backgroundColor);
+            },
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? getContrastText(selectedBackgroundColor) : getContrastText(backgroundColor));
+            },
+            transition: 'none',
+        },
+        cardContent: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            marginTop: spacing(2.5),
+        },
+        icon: {
+            position: 'absolute',
+            top: spacing(2),
+            left: spacing(2),
+            color: function (_a) {
+                var selected = _a.selected;
+                return (selected ? info.main : grey[700]);
+            },
+        },
+        focusHighlight: {
+            backgroundColor: 'inherit',
+        },
+    };
+});
+
+export { useSelectableCardStyles };
+//# sourceMappingURL=SelectableCardStyles.js.map