@mikezimm/fps-library-v2 2.0.142 → 2.0.144

package/lib/PackageVersion.js

@@ -1,5 +1,5 @@
 export const PackageNameFpsLv2 = 'fps-library-v2';
-export const PackageVersionFpsLv2 = '2.0.142';
-export const PackageVersionLabelFpsLv2 = 'fps-library-v2@2.0.142';
-export const PackageVersionTimeFpsLv2 = '7/5/2025, 12:38:54 PM EDT';
+export const PackageVersionFpsLv2 = '2.0.144';
+export const PackageVersionLabelFpsLv2 = 'fps-library-v2@2.0.144';
+export const PackageVersionTimeFpsLv2 = '7/12/2025, 4:38:06 PM EDT';
 //# sourceMappingURL=PackageVersion.js.map

package/lib/PackageVersionStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PackageVersionStyles.d.ts","sourceRoot":"","sources":["../src/PackageVersionStyles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB,EAAE,MAAqB,CAAC;AACtD,eAAO,MAAM,oBAAoB,EAAE,MAAiB,CAAC;AACrD,eAAO,MAAM,yBAAyB,EAAE,MAA4B,CAAC;AACrE,eAAO,MAAM,wBAAwB,EAAE,MAAqC,CAAC"}
+{"version":3,"file":"PackageVersionStyles.d.ts","sourceRoot":"","sources":["../src/PackageVersionStyles.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB,EAAE,MAAqB,CAAC;AACtD,eAAO,MAAM,oBAAoB,EAAE,MAAiB,CAAC;AACrD,eAAO,MAAM,yBAAyB,EAAE,MAA4B,CAAC;AACrE,eAAO,MAAM,wBAAwB,EAAE,MAAoC,CAAC"}

package/lib/PackageVersionStyles.js

@@ -1,5 +1,5 @@
 export const PackageNameFpsSty = 'fps-styles';
-export const PackageVersionFpsSty = '1.0.95';
-export const PackageVersionLabelFpsSty = 'fps-styles@1.0.95';
-export const PackageVersionTimeFpsSty = '5/17/2025, 10:10:28 AM EDT';
+export const PackageVersionFpsSty = '1.0.97';
+export const PackageVersionLabelFpsSty = 'fps-styles@1.0.97';
+export const PackageVersionTimeFpsSty = '7/12/2025, 3:57:52 PM EDT';
 //# sourceMappingURL=PackageVersionStyles.js.map

package/lib/PackageVersionStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"PackageVersionStyles.js","sourceRoot":"","sources":["../src/PackageVersionStyles.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,iBAAiB,GAAW,YAAY,CAAC;AACtD,MAAM,CAAC,MAAM,oBAAoB,GAAW,QAAQ,CAAC;AACrD,MAAM,CAAC,MAAM,yBAAyB,GAAW,mBAAmB,CAAC;AACrE,MAAM,CAAC,MAAM,wBAAwB,GAAW,4BAA4B,CAAC"}
+{"version":3,"file":"PackageVersionStyles.js","sourceRoot":"","sources":["../src/PackageVersionStyles.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,iBAAiB,GAAW,YAAY,CAAC;AACtD,MAAM,CAAC,MAAM,oBAAoB,GAAW,QAAQ,CAAC;AACrD,MAAM,CAAC,MAAM,yBAAyB,GAAW,mBAAmB,CAAC;AACrE,MAAM,CAAC,MAAM,wBAAwB,GAAW,2BAA2B,CAAC"}

package/lib/components/atoms/CopyCat/CopyCat.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { IIconStyles } from '@fluentui/react';
+export interface ICopyCatProps {
+    copyText: string | string[];
+    iconName?: string;
+    hoverText?: string;
+    confirmLabel?: string;
+    buttonLabel?: string;
+    compStyles?: React.CSSProperties;
+    iconStyles?: IIconStyles;
+    optionKey?: string;
+    onCopy?: (event: React.MouseEvent<HTMLElement>, copiedText: string, optionKey?: string) => void;
+    disabled?: boolean;
+    durationMs?: number;
+    joiner?: string;
+}
+export declare const CopyCat: React.FC<ICopyCatProps>;
+//# sourceMappingURL=CopyCat.d.ts.map

package/lib/components/atoms/CopyCat/CopyCat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyCat.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/CopyCat/CopyCat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAQ,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAKpD,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACjC,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAChG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAGD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqE3C,CAAC"}

package/lib/components/atoms/CopyCat/CopyCat.js

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Icon } from '@fluentui/react';
+// require('./CopyCat.css');
+require('@mikezimm/fps-styles/dist/CopyCat.css');
+export const CopyCat = ({ copyText, iconName = 'Copy', optionKey = '', hoverText, iconStyles, compStyles = {}, durationMs = 2000, confirmLabel, disabled = false, buttonLabel = '', joiner = '\n', onCopy }) => {
+    const [copied, setIsCopied] = useState(false);
+    const handleClick = async (event) => {
+        if (disabled || !copyText)
+            return;
+        // Determine if Ctrl (or Meta on Mac) is pressed
+        const isCtrlPressed = event.ctrlKey || event.metaKey;
+        // Decide what to copy
+        let textToCopy = Array.isArray(copyText)
+            ? isCtrlPressed
+                ? JSON.stringify(copyText) // JS-style stringified array
+                : copyText.join(joiner) // Multiline string
+            : copyText;
+        try {
+            if (onCopy) {
+                onCopy(event, textToCopy, optionKey);
+            }
+            else {
+                await navigator.clipboard.writeText(textToCopy);
+            }
+            // Trigger copied state & animation for both cases
+            setIsCopied(true);
+            setTimeout(() => setIsCopied(false), durationMs);
+        }
+        catch (err) {
+            console.warn('Copy failed:', err);
+        }
+    };
+    const className = [
+        'copyCat-root',
+        copyText ? 'clickable' : 'disabled',
+        copied ? 'copied' : ''
+    ].join(' ');
+    return (React.createElement("span", { className: className, style: compStyles, onClick: copyText ? handleClick : undefined, title: `${hoverText} ${Array.isArray(copyText) ? 'CTRL-Click for JSON' : ''}` },
+        React.createElement(Icon, { iconName: copied ? 'CheckMark' : iconName, styles: iconStyles, ariaLabel: copied ? 'Copied' : 'Copy to clipboard' }),
+        (buttonLabel || confirmLabel) && (React.createElement("span", { className: "copyCat-label-wrapper" },
+            React.createElement("span", { className: `copyCat-label default-label ${copied ? 'fade-out' : 'fade-in'}` }, buttonLabel),
+            React.createElement("span", { className: `copyCat-label confirm-label ${copied ? 'fade-in' : 'fade-out'}` }, confirmLabel)))));
+};
+//# sourceMappingURL=CopyCat.js.map

package/lib/components/atoms/CopyCat/CopyCat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyCat.js","sourceRoot":"","sources":["../../../../src/components/atoms/CopyCat/CopyCat.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,IAAI,EAAe,MAAM,iBAAiB,CAAC;AAEpD,4BAA4B;AAC5B,OAAO,CAAG,uCAAuC,CAAC,CAAC;AAkBnD,MAAM,CAAC,MAAM,OAAO,GAA4B,CAAC,EAC/C,QAAQ,EACR,QAAQ,GAAG,MAAM,EACjB,SAAS,GAAG,EAAE,EACd,SAAS,EACT,UAAU,EACV,UAAU,GAAG,EAAE,EACf,UAAU,GAAG,IAAI,EACjB,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAE,EAAE,EACf,MAAM,GAAG,IAAI,EACb,MAAM,EACP,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,KAAK,EAAE,KAAoC,EAAE,EAAE;QACjE,IAAI,QAAQ,IAAI,CAAC,QAAQ;YAAE,OAAO;QAElC,gDAAgD;QAChD,MAAM,aAAa,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC;QAErD,sBAAsB;QACtB,IAAI,UAAU,GACZ,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC;YACrB,CAAC,CAAC,aAAa;gBACb,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,6BAA6B;gBACxD,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,CAAK,mBAAmB;YACjD,CAAC,CAAC,QAAQ,CAAC;QAEf,IAAI;YACF,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,KAAK,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC;aACtC;iBAAM;gBACL,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;aACjD;YACD,kDAAkD;YAClD,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,UAAU,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAC;SAClD;QAAC,OAAO,GAAG,EAAE;YACZ,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,GAAG,CAAC,CAAC;SACnC;IACH,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,cAAc;QACd,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU;QACnC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;KACvB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,OAAO,CACL,8BAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAG,UAAU,EAAG,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAG,GAAG,SAAS,IAAK,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAG,EAAE;QAC5K,oBAAC,IAAI,IACH,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EACzC,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,GAClD;QACD,CAAC,WAAW,IAAI,YAAY,CAAC,IAAI,CAChC,8BAAM,SAAS,EAAC,uBAAuB;YACrC,8BAAM,SAAS,EAAE,+BAA+B,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAAE,IAC9E,WAAW,CACP;YACP,8BAAM,SAAS,EAAE,+BAA+B,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU,EAAE,IAC9E,YAAY,CACR,CACF,CACR,CACI,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib/components/molecules/SideGlance/SideGlance.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export interface ISideGlanceProps {
+    containerStyles?: React.CSSProperties;
+    collapsedWidth?: number;
+    expandedWidth?: number;
+    fadeStart?: number;
+    title?: string;
+    children: React.ReactNode;
+    initiallyCollapsed?: boolean;
+    roundedBorder?: boolean;
+}
+interface ISideGlanceState {
+    collapsed: boolean;
+}
+export declare class SideGlance extends React.Component<ISideGlanceProps, ISideGlanceState> {
+    static defaultProps: Partial<ISideGlanceProps>;
+    constructor(props: ISideGlanceProps);
+    private toggleCollapse;
+    render(): React.ReactNode;
+}
+export {};
+//# sourceMappingURL=SideGlance.d.ts.map

package/lib/components/molecules/SideGlance/SideGlance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideGlance.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/SideGlance/SideGlance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,gBAAgB;IAC/B,eAAe,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACtC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,gBAAgB,EAAE,gBAAgB,CAAC;IACjF,OAAc,YAAY,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAMnD;gBAEU,KAAK,EAAE,gBAAgB;IAOnC,OAAO,CAAC,cAAc,CAEpB;IAEK,MAAM,IAAI,KAAK,CAAC,SAAS;CAoDjC"}

package/lib/components/molecules/SideGlance/SideGlance.js

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { IconButton } from '@fluentui/react/lib/Button';
+// import './SideGlance.css';
+require('@mikezimm/fps-styles/dist/SideGlance.css');
+export class SideGlance extends React.Component {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.toggleCollapse = () => {
+            this.setState((prevState) => ({ collapsed: !prevState.collapsed }));
+        };
+        this.state = {
+            collapsed: (_a = this.props.initiallyCollapsed) !== null && _a !== void 0 ? _a : true,
+        };
+    }
+    render() {
+        const { collapsed } = this.state;
+        const { collapsedWidth, expandedWidth, fadeStart, title, children, roundedBorder, containerStyles = {}, } = this.props;
+        const containerStyle = {
+            width: collapsed ? `${collapsedWidth}px` : 'auto',
+            // Added this so that in rare cases, it's not collapsed to much
+            minWidth: `${collapsedWidth}px`,
+            maxWidth: `${expandedWidth}px`,
+            display: 'block', ...containerStyles
+        };
+        // const containerClass = `sideGlance-container ${collapsed ? 'sideGlance-collapsed' : 'sideGlance-expanded'}${roundedBorder ? '' : ' noRounded'}`;
+        const containerClass = `sideGlance-container ${collapsed ? 'sideGlance-collapsed' : 'sideGlance-expanded'} ${roundedBorder === false ? 'noRounded' : ''}`;
+        return (React.createElement("div", { className: containerClass, style: containerStyle },
+            React.createElement("div", { className: 'sideGlance-header', onClick: this.toggleCollapse },
+                React.createElement("span", { className: 'sideGlance-title' }, title || '\u00A0'),
+                React.createElement(IconButton, { iconProps: { iconName: collapsed ? 'ChevronRight' : 'ChevronLeft' }, title: collapsed ? 'Expand' : 'Collapse', className: 'sideGlance-toggleButton' })),
+            React.createElement("div", { className: 'sideGlance-content', style: { whiteSpace: collapsed ? 'nowrap' : 'normal' } }, children),
+            collapsed && (React.createElement("div", { className: 'sideGlance-fade', style: {
+                    width: `${collapsedWidth}px`,
+                    background: `linear-gradient(to right, rgba(255,255,255,0) ${fadeStart}px, rgba(255,255,255,1) 100%)`,
+                } }))));
+    }
+}
+SideGlance.defaultProps = {
+    collapsedWidth: 79,
+    expandedWidth: 450,
+    fadeStart: 40,
+    initiallyCollapsed: true,
+    roundedBorder: true, // default to true
+};
+//# sourceMappingURL=SideGlance.js.map

package/lib/components/molecules/SideGlance/SideGlance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideGlance.js","sourceRoot":"","sources":["../../../../src/components/molecules/SideGlance/SideGlance.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,6BAA6B;AAE7B,OAAO,CAAG,0CAA0C,CAAC,CAAC;AAiBtD,MAAM,OAAO,UAAW,SAAQ,KAAK,CAAC,SAA6C;IASjF,YAAY,KAAuB;;QACjC,KAAK,CAAC,KAAK,CAAC,CAAC;QAMP,mBAAc,GAAG,GAAS,EAAE;YAClC,IAAI,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC;QACtE,CAAC,CAAC;QAPA,IAAI,CAAC,KAAK,GAAG;YACX,SAAS,EAAE,MAAA,IAAI,CAAC,KAAK,CAAC,kBAAkB,mCAAI,IAAI;SACjD,CAAC;IACJ,CAAC;IAMM,MAAM;QACX,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QACjC,MAAM,EACJ,cAAc,EACd,aAAa,EACb,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EACb,eAAe,GAAG,EAAE,GACrB,GAAG,IAAI,CAAC,KAAK,CAAC;QAEf,MAAM,cAAc,GAAwB;YAC1C,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,GAAG,cAAc,IAAI,CAAC,CAAC,CAAC,MAAM;YACjD,+DAA+D;YAC/D,QAAQ,EAAE,GAAG,cAAc,IAAI;YAC/B,QAAQ,EAAE,GAAG,aAAa,IAAI;YAC9B,OAAO,EAAE,OAAO,EAAE,GAAG,eAAe;SACrC,CAAC;QAEF,mJAAmJ;QACnJ,MAAM,cAAc,GAAG,wBAAwB,SAAS,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,qBAAqB,IAAI,aAAa,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAC1J,OAAO,CACL,6BACE,SAAS,EAAE,cAAc,EACzB,KAAK,EAAE,cAAc;YAErB,6BAAK,SAAS,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc;gBAC7D,8BAAM,SAAS,EAAC,kBAAkB,IAAE,KAAK,IAAI,QAAQ,CAAQ;gBAC7D,oBAAC,UAAU,IACT,SAAS,EAAE,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EAAE,EACnE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,EACxC,SAAS,EAAC,yBAAyB,GACnC,CACE;YACN,6BAAK,SAAS,EAAC,oBAAoB,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvF,QAAQ,CACL;YAEL,SAAS,IAAI,CACZ,6BACE,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAE;oBACL,KAAK,EAAE,GAAG,cAAc,IAAI;oBAC5B,UAAU,EAAE,iDAAiD,SAAS,+BAA+B;iBACtG,GACD,CACH,CAEG,CACP,CAAC;IACJ,CAAC;;AAtEa,uBAAY,GAA8B;IACtD,cAAc,EAAE,EAAE;IAClB,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,EAAE;IACb,kBAAkB,EAAE,IAAI;IACxB,aAAa,EAAE,IAAI,EAAE,kBAAkB;CACxC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mikezimm/fps-library-v2",
-  "version": "2.0.142",
+  "version": "2.0.144",
   "description": "Library of reusable typescript/javascript functions, interfaces and constants",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -45,8 +45,8 @@
   "dependencies": {
     "@fluentui/react": "^7.199.1",
     "@microlink/react-json-view": "^1.24.0",
-    "@mikezimm/fps-core-v7": "1.0.139",
-    "@mikezimm/fps-styles": "1.0.95",
+    "@mikezimm/fps-core-v7": "1.0.141",
+    "@mikezimm/fps-styles": "1.0.97",
     "@monaco-editor/loader": "^1.3.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"