@postgres.ai/shared 4.0.3 → 4.1.0

package/dist/pages/Instance/Clones/Header/Item/styles.module.scss

@@ -0,0 +1,17 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  font-size: 12px;
+  text-align: center;
+  color: $color-gray-semi-dark;
+}
+
+.value {
+  font-weight: bold;
+  font-size: 14px;
+  color: $color-black;
+}
+
+.description {
+  margin-top: 4px;
+}

package/dist/pages/Instance/Clones/Header/styles.module.scss

@@ -0,0 +1,14 @@
+@import '@postgres.ai/shared/styles/mixins';
+
+.root {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  margin-bottom: 20px;
+  background-color: #f9f9f9;
+
+  @include sm {
+    padding: 20px 0;
+    margin-bottom: 10px;
+  }
+}

package/{pages → dist/pages}/Instance/Configuration/index.js

@@ -316,7 +316,9 @@ export const Configuration = observer(({ instanceId, switchActiveTab, reload, is
                     dockerPath: initialRender
                         ? formik.values.dockerPath
                         : data.map((image) => image.location)[0],
-                    sharedPreloadLibraries: currentPreloadLibraries || '',
+                    sharedPreloadLibraries: initialRender
+                        ? formik.values.sharedPreloadLibraries
+                        : currentPreloadLibraries || '',
                 });
             }
             else {

package/dist/pages/Instance/Configuration/styles.module.scss

@@ -0,0 +1,122 @@
+.textField {
+  width: 400px;
+  max-width: 100%;
+
+  input,
+  label {
+    font-family: 'Fira Code', monospace;
+    color: #000;
+  }
+
+  label {
+    font-size: 10px;
+  }
+
+  :disabled {
+    cursor: not-allowed;
+    color: rgba(0, 0, 0, 0.38);
+  }
+
+  @media (max-width: 600px) {
+    width: 100%;
+  }
+}
+
+.chipContainer {
+  width: 350px;
+  max-width: 100%;
+  margin-bottom: 0;
+}
+
+.databasesContainer {
+  width: 350px;
+  max-width: 100%;
+}
+
+.chip {
+  margin-right: 8px;
+  margin-top: 8px;
+}
+
+.underline {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.root {
+  font-size: 12px;
+  max-width: 450px;
+}
+
+.spinner {
+  margin-left: 8px;
+}
+
+.spinnerContainer {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.infoIcon {
+  margin-left: 6px;
+  height: 12px;
+  width: 12px;
+}
+
+.externalIcon {
+  margin-left: 2px;
+  height: 12px;
+  width: 12px;
+}
+
+.externalLink {
+  display: inline-flex;
+  align-items: center;
+  width: max-content;
+
+  &:link,
+  &:hover {
+    color: #0000ee;
+  }
+
+  &:visited {
+    color: #551a8b;
+  }
+}
+
+.largeIcon {
+  height: 15px;
+  width: 15px;
+}
+
+.subsection {
+  margin-bottom: 0.25rem;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.modalTitle {
+  font-size: 16px;
+  font-weight: bold !important;
+}
+
+.sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.firaCodeFont {
+  font-family: 'Fira Code', monospace !important;
+}
+
+.snackbar {
+  div {
+    background-color: #ff6212;
+    color: #fff;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+}

package/{pages → dist/pages}/Instance/Configuration/useForm.d.ts

@@ -55,7 +55,7 @@ export declare const useForm: (onSubmit: (values: FormValues) => void) => {
         dirty: boolean;
         unregisterField: (name: string) => void;
         registerField: (name: string, { validate }: any) => void;
-        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldProps: (nameOrOptions: string | import("formik").FieldConfig<any>) => import("formik").FieldInputProps<any>;
         getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
         getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
         validateOnBlur: boolean;

package/{pages → dist/pages}/Instance/Info/Disks/Disk/ProgressBar/index.d.ts

@@ -1,8 +1,9 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 declare type Props = {
     value: number;
     total: number;
     thresholdPercent: number;
+    style?: CSSProperties;
 };
 export declare const ProgressBar: (props: Props) => JSX.Element;
 export {};

package/{pages → dist/pages}/Instance/Info/Disks/Disk/ProgressBar/index.js

@@ -39,7 +39,7 @@ const useStyles = makeStyles((theme) => ({
 }), { index: 1 });
 export const ProgressBar = (props) => {
     const classes = useStyles();
-    return (_jsxs("div", { className: classes.root, children: [_jsx("div", { className: classes.indicator, style: { width: `${(props.value / props.total) * 100}%` } }), _jsx(Tooltip, { content: `+${props.thresholdPercent}% disk usage may result in performance degradation`, children: _jsx(PoinerIcon, { className: classes.pointer, style: {
+    return (_jsxs("div", { className: classes.root, style: props.style, children: [_jsx("div", { className: classes.indicator, style: { width: `${props.total === 0 ? 0 : (props.value / props.total) * 100}%` } }), _jsx(Tooltip, { content: `+${props.thresholdPercent}% disk usage may result in performance degradation`, children: _jsx(PoinerIcon, { className: classes.pointer, style: {
                         left: `${props.thresholdPercent}%`,
                     } }) })] }));
 };

package/{pages/Instance/Info/Disks/Disk → dist/pages/Instance/Info/Disks/PoolSection/DatasetRow}/index.d.ts

@@ -1,15 +1,13 @@
 /// <reference types="react" />
-declare type Props = {
+export declare type DatasetInfo = {
     id: string | null;
     name: string;
-    totalDataSize: number;
+    showName: boolean;
+    status: 'refreshing' | 'active' | 'empty';
     mode: string;
-    refreshingStartDate: Date | null;
+    usedDataSize: number;
     clonesCount: number;
     snapshotsCount: number;
-    usedDataSize: number;
-    freeDataSize: number;
-    status: 'refreshing' | 'active' | 'empty';
+    refreshingStartDate: Date | null;
 };
-export declare const Disk: (props: Props) => JSX.Element;
-export {};
+export declare const DatasetRow: (props: DatasetInfo) => JSX.Element;

package/dist/pages/Instance/Info/Disks/PoolSection/DatasetRow/index.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { formatUTC, isValidDate } from '@postgres.ai/shared/utils/date';
+import { Property } from '../../../components/Property';
+import { ActionsMenu } from '../../Disk/ActionsMenu';
+import { Status } from '../../Disk/Status';
+const useStyles = makeStyles({
+    root: {
+        border: `1px solid ${colors.consoleStroke}`,
+        padding: '6px 8px 8px',
+        borderRadius: '4px',
+        backgroundColor: colors.white,
+    },
+    header: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    titleWrapper: {
+        display: 'flex',
+        flex: '1 1 auto',
+        alignItems: 'center',
+        marginRight: '16px',
+        minWidth: 0,
+    },
+    title: {
+        fontWeight: 700,
+        fontSize: '14px',
+        margin: '0 4px 0 0',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
+    content: {
+        marginTop: '8px',
+    },
+    uppercaseContent: {
+        textTransform: 'uppercase',
+    },
+}, { index: 1 });
+export const DatasetRow = (props) => {
+    var _a, _b;
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [props.showName ? (_jsxs("div", { className: classes.titleWrapper, children: [_jsx("h6", { title: props.name, className: classes.title, children: props.name }), _jsx(ActionsMenu, { poolId: props.id, poolName: (_a = props.id) !== null && _a !== void 0 ? _a : props.name, isActive: props.status === 'active' })] })) : (_jsx(ActionsMenu, { poolId: props.id, poolName: (_b = props.id) !== null && _b !== void 0 ? _b : props.name, isActive: props.status === 'active' })), _jsx(Status, { value: props.status, hasWarning: false })] }), _jsx(Property, { name: "Mode", classes: { content: classes.uppercaseContent }, children: props.mode }), props.status === 'refreshing' && props.refreshingStartDate && (_jsx("div", { className: classes.content, children: _jsxs(Property, { name: "Refreshing started at", children: [formatUTC(props.refreshingStartDate, 'yyyy-MM-dd HH:mm:ss'), " UTC (", isValidDate(props.refreshingStartDate)
+                            ? formatDistanceToNowStrict(props.refreshingStartDate, {
+                                addSuffix: true,
+                            })
+                            : '-', ")"] }) })), _jsxs("div", { className: classes.content, children: [_jsx(Property, { name: "Clones", children: props.clonesCount }), _jsx(Property, { name: "Snapshots", children: props.snapshotsCount })] }), _jsx("div", { className: classes.content, children: _jsx(Property, { name: "Size", children: formatBytesIEC(props.usedDataSize) }) })] }));
+};

package/dist/pages/Instance/Info/Disks/PoolSection/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { DatasetInfo } from './DatasetRow';
+declare type Props = {
+    poolName: string;
+    totalSize: number;
+    freeSize: number;
+    datasets: DatasetInfo[];
+};
+export declare const PoolSection: (props: Props) => JSX.Element;
+export {};

package/dist/pages/Instance/Info/Disks/PoolSection/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { Status as PerformanceStatus } from '@postgres.ai/shared/components/Status';
+import { ProgressBar } from '../Disk/ProgressBar';
+import { DatasetRow } from './DatasetRow';
+const WARNING_THRESHOLD_PERCENT = 80;
+const useStyles = makeStyles({
+    root: {
+        border: `1px solid ${colors.consoleStroke}`,
+        padding: '6px 8px 8px',
+        borderRadius: '4px',
+        backgroundColor: colors.consoleMenuBackground,
+        '& + $root': {
+            marginTop: '8px',
+        },
+    },
+    headerRow: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'baseline',
+        marginBottom: '4px',
+    },
+    poolName: {
+        fontWeight: 700,
+        fontSize: '14px',
+    },
+    poolSize: {
+        fontSize: '13px',
+        fontWeight: 700,
+    },
+    progressBarWrapper: {
+        marginTop: '4px',
+    },
+    poolStats: {
+        fontSize: '12px',
+        marginTop: '2px',
+    },
+    warningMessage: {
+        fontSize: '10px',
+        marginTop: '4px',
+    },
+    datasets: {
+        marginTop: '8px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '6px',
+    },
+}, { index: 1 });
+const getPercent = (value, total) => total === 0 ? 0 : Math.round((value / total) * 100);
+export const PoolSection = (props) => {
+    const classes = useStyles();
+    const { poolName, totalSize, freeSize, datasets } = props;
+    const usedSize = Math.max(0, totalSize - freeSize);
+    const usedPercent = getPercent(usedSize, totalSize);
+    const freePercent = Math.min(100, getPercent(freeSize, totalSize));
+    const hasActiveDataset = datasets.some((d) => d.status === 'active');
+    const shouldShowWarning = hasActiveDataset && usedPercent > WARNING_THRESHOLD_PERCENT;
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.headerRow, children: [_jsx("span", { className: classes.poolName, children: poolName }), _jsx("span", { className: classes.poolSize, children: formatBytesIEC(totalSize) })] }), _jsx("div", { className: classes.progressBarWrapper, children: _jsx(ProgressBar, { value: usedSize, total: totalSize, thresholdPercent: WARNING_THRESHOLD_PERCENT, style: { marginTop: 0 } }) }), _jsxs("div", { className: classes.poolStats, children: [_jsx("strong", { children: formatBytesIEC(usedSize) }), " used (", usedPercent, "%) \u00B7 ", freePercent, "% free"] }), shouldShowWarning && (_jsxs(PerformanceStatus, { type: "warning", className: classes.warningMessage, children: ["+", WARNING_THRESHOLD_PERCENT, "% disk usage may result in performance degradation"] })), _jsx("div", { className: classes.datasets, children: datasets.map((dataset) => {
+                    var _a;
+                    return (_jsx(DatasetRow, { ...dataset }, (_a = dataset.id) !== null && _a !== void 0 ? _a : dataset.name));
+                }) })] }));
+};

package/dist/pages/Instance/Info/Disks/index.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { observer } from 'mobx-react-lite';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { Section } from '../components/Section';
+import { PoolSection } from './PoolSection';
+export const Disks = observer(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const stores = useStores();
+    const { instance, snapshots } = stores.main;
+    if (!instance)
+        return null;
+    if (!snapshots)
+        return null;
+    const pools = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.pools;
+    if (pools && pools.length > 0) {
+        const poolGroups = {};
+        for (const pool of pools) {
+            const slashIdx = pool.name.indexOf('/');
+            const poolName = slashIdx !== -1 ? pool.name.slice(0, slashIdx) : pool.name;
+            if (!poolGroups[poolName])
+                poolGroups[poolName] = [];
+            poolGroups[poolName].push(pool);
+        }
+        return (_jsx(Section, { title: "Disks", children: Object.entries(poolGroups).map(([poolName, poolList]) => {
+                const firstPool = poolList[0];
+                const datasets = poolList.map((pool) => {
+                    var _a, _b, _c, _d, _e;
+                    const slashIdx = pool.name.indexOf('/');
+                    const datasetName = slashIdx !== -1 ? pool.name.slice(slashIdx + 1) : pool.name;
+                    const datasetSnapshots = (_b = (_a = snapshots.data) === null || _a === void 0 ? void 0 : _a.filter((s) => s.pool === pool.name)) !== null && _b !== void 0 ? _b : [];
+                    return {
+                        id: pool.name,
+                        name: datasetName,
+                        showName: slashIdx !== -1,
+                        status: pool.status,
+                        mode: pool.mode,
+                        usedDataSize: pool.fileSystem.used,
+                        clonesCount: pool.cloneList.length,
+                        snapshotsCount: datasetSnapshots.length,
+                        refreshingStartDate: (_e = (_d = (_c = instance.state) === null || _c === void 0 ? void 0 : _c.retrieving) === null || _d === void 0 ? void 0 : _d.lastRefresh) !== null && _e !== void 0 ? _e : null,
+                    };
+                });
+                return (_jsx(PoolSection, { poolName: poolName, totalSize: firstPool.fileSystem.size, freeSize: firstPool.fileSystem.free, datasets: datasets }, poolName));
+            }) }));
+    }
+    if ((_b = instance.state) === null || _b === void 0 ? void 0 : _b.fileSystem) {
+        const allSnapshots = (_c = snapshots.data) !== null && _c !== void 0 ? _c : [];
+        const dataset = {
+            id: null,
+            name: 'Main',
+            showName: false,
+            status: 'active',
+            mode: 'zfs',
+            usedDataSize: instance.state.fileSystem.used,
+            clonesCount: (_f = (_e = (_d = instance.state) === null || _d === void 0 ? void 0 : _d.clones) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : instance.state.cloning.clones.length,
+            snapshotsCount: allSnapshots.length,
+            refreshingStartDate: (_j = (_h = (_g = instance.state) === null || _g === void 0 ? void 0 : _g.retrieving) === null || _h === void 0 ? void 0 : _h.lastRefresh) !== null && _j !== void 0 ? _j : null,
+        };
+        return (_jsx(Section, { title: "Disks", children: _jsx(PoolSection, { poolName: "Main", totalSize: instance.state.fileSystem.size, freeSize: instance.state.fileSystem.free, datasets: [dataset] }) }));
+    }
+    return (_jsx(Section, { title: "Disks", children: _jsxs(_Fragment, { children: ["Disk information is ", _jsx("strong", { children: "unavailable" }), "."] }) }));
+});

package/dist/pages/Instance/Info/Retrieval/RefreshFailedAlert/styles.module.scss

@@ -0,0 +1,33 @@
+@import '@postgres.ai/shared/styles/vars';
+
+.root {
+  padding: 8px 10px;
+  background: #fff2e5;
+  border: 1px solid $color-gray-100;
+  margin-top: 12px;
+  border-radius: $border-radius--small;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.title {
+  font-weight: 700;
+  font-size: 12px;
+  margin-right: 24px;
+  margin: 0;
+}
+
+.icon {
+  width: 10px;
+  color: $color-status-warning;
+  flex: 0 0 auto;
+}
+
+.propertyName {
+  flex: 0 0 123px;
+}

package/dist/pages/Instance/Info/Retrieval/RetrievalModal/styles.module.scss

@@ -0,0 +1,6 @@
+.tableContainer {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  flex-direction: row;
+}

package/dist/pages/Instance/Info/Retrieval/RetrievalTable/styles.module.scss

@@ -0,0 +1,29 @@
+.tableRow {
+  display: inline-table !important;
+  width: 100%;
+}
+
+.tableBody {
+  height: 100%;
+  
+  div:not(:first-child) {
+    padding-top: 0.75rem;
+    border-top: 1px solid rgba(224, 224, 224, 1);
+  }
+
+  div {
+    padding: 0.75rem 0;
+  }
+
+  td {
+    border-bottom: 0;
+    padding: 0px 18px;
+    font-size: 13px;
+    font-family: 'Fira Code', monospace;   
+  }
+}
+
+.tableSubtitle {
+  font-size: 15px;
+  font-weight: bold;
+}

package/dist/pages/Instance/Info/Status/InstanceResponseModal/styles.module.scss

@@ -0,0 +1,3 @@
+.formattedText {
+  max-height: 400px;
+}

package/dist/pages/Instance/Info/Status/styles.module.scss

@@ -0,0 +1,12 @@
+.controls {
+  display: flex;
+  margin-top: 24px;
+}
+
+.button {
+  text-decoration: none;
+
+  & + .button {
+    margin-left: 8px;
+  }
+}

package/dist/pages/Instance/Info/components/Property/styles.module.scss

@@ -0,0 +1,21 @@
+.root {
+  display: flex;
+  margin-top: 4px;
+  font-size: 12px;
+}
+
+.name {
+  flex: 0 0 134px;
+  margin-right: 14px;
+
+  @media screen and (max-width: '600px') {
+    flex: 1 1 100%;
+    margin-right: 7px;
+  }
+}
+
+.content {
+  flex: 1 1 100%;
+  font-weight: 700;
+  width: 0;
+}

package/{pages → dist/pages}/Instance/Snapshots/components/SnapshotsList/index.js

@@ -113,7 +113,7 @@ const SnapshotListItem = ({ snapshot, setSnapshotModal, openClonesModal, }) => {
     const timeAgo = formatDistanceSafe(snapshot.createdAtDate);
     const history = useHistory();
     const host = useHost();
-    return (_jsx("div", { className: classes.commitItem, children: _jsxs("div", { className: classes.gridContainer, children: [_jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: snapshot.message || '-' }), _jsxs("div", { className: classes.infoContent, title: snapshot.dataStateAt, children: [timeAgo, " ago"] })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Pool" }), _jsx("div", { className: classes.infoContent, children: (_a = snapshot.pool) !== null && _a !== void 0 ? _a : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Number of clones" }), _jsx("div", { className: classes.infoContent, children: (_b = snapshot.numClones) !== null && _b !== void 0 ? _b : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Logical Size" }), _jsx("div", { className: classes.infoContent, children: snapshot.logicalSize ? formatBytesIEC(snapshot.logicalSize) : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Physical Size" }), _jsx("div", { className: classes.infoContent, children: snapshot.physicalSize
+    return (_jsx("div", { className: classes.commitItem, children: _jsxs("div", { className: classes.gridContainer, children: [_jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: snapshot.message || '-' }), _jsx("div", { className: classes.infoContent, title: snapshot.dataStateAt, children: timeAgo })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Pool" }), _jsx("div", { className: classes.infoContent, children: (_a = snapshot.pool) !== null && _a !== void 0 ? _a : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Number of clones" }), _jsx("div", { className: classes.infoContent, children: (_b = snapshot.numClones) !== null && _b !== void 0 ? _b : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Logical Size" }), _jsx("div", { className: classes.infoContent, children: snapshot.logicalSize ? formatBytesIEC(snapshot.logicalSize) : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Physical Size" }), _jsx("div", { className: classes.infoContent, children: snapshot.physicalSize
                                 ? formatBytesIEC(snapshot.physicalSize)
                                 : '-' })] }), _jsxs("div", { className: classes.actionsContainer, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: classes.snapshotId, children: snapshot.id }), _jsx("div", { className: classes.copyButtonContainer, title: "Copy snapshot ID", children: _jsx(IconButton, { className: classes.copyButton, onClick: (e) => {
                                     e.stopPropagation();

package/dist/pages/Instance/styles.scss

@@ -0,0 +1,37 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2022, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+
+#logs-container {
+  margin: 20px 0 0 0;
+  border: 1px solid #b4b4b4;
+  border-radius: 4px;
+  overflow: hidden;
+  padding: 0.5rem 1rem;
+  & > p {
+    font-size: small;
+    font-family: 'Fira Code', monospace;
+    padding: 1px 0;
+  }
+}
+
+.error-log {
+  color: red;
+}
+
+.snackbar-tag {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #fff2e5;
+  color: #000;
+  font-weight: 500;
+  padding: 6px 8px;
+  border-radius: 4px;
+  transition: all 40050ms ease;
+  cursor: pointer;
+}

package/dist/react-app-env.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare module '*.avif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.bmp' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.gif' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.jpeg' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}
+
+declare module '*.webp' {
+    const src: string;
+    export default src;
+}
+
+declare module '*.svg' {
+  import * as React from 'react';
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
+
+  const src: string;
+  export default src;
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}