@spur.us/monocle-react 0.0.18 → 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,22 @@
+
+> @spur.us/monocle-react@1.0.0 build /home/runner/work/javascript/javascript/packages/monocle-react
+> tsup
+
+CLI Building entry: {"index":"src/index.ts"}
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.4.0
+CLI Using tsup config: /home/runner/work/javascript/javascript/packages/monocle-react/tsup.config.ts
+CLI Target: es2019
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     5.09 KB
+CJS dist/index.js.map 7.55 KB
+CJS ⚡️ Build success in 40ms
+ESM dist/index.mjs     3.29 KB
+ESM dist/index.mjs.map 7.42 KB
+ESM ⚡️ Build success in 40ms
+DTS Build start
+DTS ⚡️ Build success in 1853ms
+DTS dist/index.d.ts  432.00 B
+DTS dist/index.d.mts 432.00 B

package/CHANGELOG.md

@@ -0,0 +1,25 @@
+# @spur.us/monocle-react
+
+## 1.0.0
+
+### Major Changes
+
+- a2b3919: - Rename `bundle` to `assessment` in `useMonocle` hook
+
+### Patch Changes
+
+- d377c8a: Remove 'use client' directive.
+- Updated dependencies [a2b3919]
+- Updated dependencies [d7071af]
+  - @spur.us/types@0.2.0
+
+## 0.1.0
+
+### Minor Changes
+
+- 14d0ff0: Rename `token` prop to `publishableKey` in `MonocleProvider`.
+
+### Patch Changes
+
+- Updated dependencies [14d0ff0]
+  - @spur.us/types@0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Spur Intelligence Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,33 @@
-# Monocle-React
+<div align="center">
+  <a href="https://spur.us">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="../../docs/images/logo-dark-mode.svg">
+      <img alt="Spur logo" src="../../docs/images/logo-light-mode.svg" height="128">
+    </picture>
+  </a>
+  <br />
+  <h1>@spur.us/monocle-react</h1>
+</div>
+<br />
 
-The `monocle-react` package is currently in closed beta.
+A React library for integrating Monocle into your React applications. This package provides a context provider and hooks for managing Monocle's functionality in your React components.
+
+## Installation
+
+```bash
+npm install @spur.us/monocle-react
+# or
+yarn add @spur.us/monocle-react
+# or
+pnpm add @spur.us/monocle-react
+```
+
+## Contributing
+
+We welcome all contributors!
+
+Please read our [contributing guidelines](https://github.com/spurintel/javascript/blob/main/docs/CONTRIBUTING.md) to learn how to submit issues or open pull requests.
+
+## License
+
+This project is licensed under the [MIT license](https://github.com/spurintel/javascript/blob/main/packages/monocle-react/LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import React from 'react';
+
+interface MonocleContextType {
+    assessment: string | undefined;
+    refresh: () => void;
+    isLoading: boolean;
+    error: Error | null;
+}
+interface MonocleProviderProps {
+    children: React.ReactNode;
+    publishableKey: string;
+}
+declare const MonocleProvider: React.ComponentType<MonocleProviderProps>;
+declare const useMonocle: () => MonocleContextType;
+
+export { MonocleProvider, useMonocle };

package/dist/index.d.ts

@@ -1,7 +1,16 @@
-import MonocleContext from "./MonocleContext";
-import withMonocle from "./withMonocle";
-import { useMonocle } from "./hooks";
-import MonocleProvider from "./MonocleProvider";
-declare const MonocleConsumer: import("react").Consumer<{}>;
-export { MonocleProvider, MonocleConsumer, MonocleContext, useMonocle, withMonocle, };
-export default useMonocle;
+import React from 'react';
+
+interface MonocleContextType {
+    assessment: string | undefined;
+    refresh: () => void;
+    isLoading: boolean;
+    error: Error | null;
+}
+interface MonocleProviderProps {
+    children: React.ReactNode;
+    publishableKey: string;
+}
+declare const MonocleProvider: React.ComponentType<MonocleProviderProps>;
+declare const useMonocle: () => MonocleContextType;
+
+export { MonocleProvider, useMonocle };

package/dist/index.js

@@ -1,8 +1,146 @@
-import MonocleContext from "./MonocleContext";
-import withMonocle from "./withMonocle";
-import { useMonocle } from "./hooks";
-import MonocleProvider from "./MonocleProvider";
-var MonocleConsumer = MonocleContext.Consumer;
-export { MonocleProvider, MonocleConsumer, MonocleContext, useMonocle, withMonocle, };
-export default useMonocle;
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  MonocleProvider: () => MonocleProvider,
+  useMonocle: () => useMonocle
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/contexts/MonocleProvider.tsx
+var import_react2 = require("react");
+
+// src/utils/useMaxAllowedInstancesGuard.tsx
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var instanceCounter = /* @__PURE__ */ new Map();
+function useMaxAllowedInstancesGuard(name, error, maxCount = 1) {
+  import_react.default.useEffect(() => {
+    const count = instanceCounter.get(name) || 0;
+    if (count === maxCount) {
+      throw new Error(error);
+    }
+    instanceCounter.set(name, count + 1);
+    return () => {
+      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);
+    };
+  }, []);
+}
+function withMaxAllowedInstancesGuard(WrappedComponent, name, error) {
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || name || "Component";
+  const Hoc = (props) => {
+    useMaxAllowedInstancesGuard(name, error);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrappedComponent, { ...props });
+  };
+  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;
+  return Hoc;
+}
+
+// src/contexts/MonocleProvider.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var MonocleContext = (0, import_react2.createContext)(null);
+var MonocleProviderComponent = ({
+  children,
+  publishableKey
+}) => {
+  const [assessment, setAssessment] = (0, import_react2.useState)(void 0);
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const loadScript = () => {
+    return new Promise((resolve, reject) => {
+      const existingScript = document.getElementById("_mcl");
+      if (existingScript) {
+        if (!window.MCL) {
+          existingScript.onload = () => resolve();
+          existingScript.onerror = () => reject(new Error("Failed to load Monocle script"));
+        } else {
+          resolve();
+        }
+        return;
+      }
+      const script = document.createElement("script");
+      script.id = "_mcl";
+      script.async = true;
+      script.src = `https://mcl.spur.us/d/mcl.js?tk=${publishableKey}`;
+      script.onload = () => {
+        resolve();
+      };
+      script.onerror = (_e) => {
+        console.error("MonocleProvider: Script failed to load");
+        reject(new Error("Failed to load Monocle script"));
+      };
+      document.head.appendChild(script);
+    });
+  };
+  const refresh = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await loadScript();
+      if (window.MCL) {
+        const newAssessment = window.MCL.getAssessment();
+        setAssessment(newAssessment);
+      } else {
+        throw new Error("MCL object not found on window");
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Unknown error occurred")
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!assessment) {
+      refresh();
+    }
+  }, [publishableKey]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MonocleContext.Provider, { value: { assessment, refresh, isLoading, error }, children });
+};
+var MonocleProvider = withMaxAllowedInstancesGuard(
+  MonocleProviderComponent,
+  "MonocleProvider",
+  "Only one instance of MonocleProvider is allowed"
+);
+var useMonocle = () => {
+  const context = (0, import_react2.useContext)(MonocleContext);
+  if (!context) {
+    throw new Error("useMonocle must be used within a MonocleProvider");
+  }
+  return context;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MonocleProvider,
+  useMonocle
+});
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,IAAM,eAAe,GAAG,cAAc,CAAC,QAAQ,CAAC;AAEhD,OAAO,EACL,eAAe,EACf,eAAe,EACf,cAAc,EACd,UAAU,EACV,WAAW,GACZ,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"sources":["../src/index.ts","../src/contexts/MonocleProvider.tsx","../src/utils/useMaxAllowedInstancesGuard.tsx"],"sourcesContent":["export * from './contexts';\n","import React, { createContext, useContext, useEffect, useState } from 'react';\nimport { withMaxAllowedInstancesGuard } from '../utils';\n\ninterface MonocleContextType {\n  assessment: string | undefined;\n  refresh: () => void;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nconst MonocleContext = createContext<MonocleContextType | null>(null);\n\ninterface MonocleProviderProps {\n  children: React.ReactNode;\n  publishableKey: string;\n}\n\nconst MonocleProviderComponent: React.FC<MonocleProviderProps> = ({\n  children,\n  publishableKey,\n}) => {\n  const [assessment, setAssessment] = useState<string | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const loadScript = () => {\n    return new Promise<void>((resolve, reject) => {\n      const existingScript = document.getElementById('_mcl');\n      if (existingScript) {\n        // If script exists but hasn't loaded yet, wait for it\n        if (!window.MCL) {\n          existingScript.onload = () => resolve();\n          existingScript.onerror = () =>\n            reject(new Error('Failed to load Monocle script'));\n        } else {\n          resolve();\n        }\n        return;\n      }\n\n      const script = document.createElement('script');\n      script.id = '_mcl';\n      script.async = true;\n      script.src = `https://mcl.spur.us/d/mcl.js?tk=${publishableKey}`;\n      script.onload = () => {\n        resolve();\n      };\n      script.onerror = (_e) => {\n        console.error('MonocleProvider: Script failed to load');\n        reject(new Error('Failed to load Monocle script'));\n      };\n      document.head.appendChild(script);\n    });\n  };\n\n  const refresh = async () => {\n    try {\n      setIsLoading(true);\n      setError(null);\n      await loadScript();\n      if (window.MCL) {\n        const newAssessment = window.MCL.getAssessment();\n        setAssessment(newAssessment);\n      } else {\n        throw new Error('MCL object not found on window');\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Unknown error occurred')\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    // Only refresh if the publishableKey changes and we don't already have an assessment\n    if (!assessment) {\n      refresh();\n    }\n  }, [publishableKey]);\n\n  return (\n    <MonocleContext.Provider value={{ assessment, refresh, isLoading, error }}>\n      {children}\n    </MonocleContext.Provider>\n  );\n};\n\nexport const MonocleProvider = withMaxAllowedInstancesGuard(\n  MonocleProviderComponent,\n  'MonocleProvider',\n  'Only one instance of MonocleProvider is allowed'\n);\n\nexport const useMonocle = () => {\n  const context = useContext(MonocleContext);\n  if (!context) {\n    throw new Error('useMonocle must be used within a MonocleProvider');\n  }\n  return context;\n};\n","import React from 'react';\n\nconst instanceCounter = new Map<string, number>();\n\n/**\n * A React hook that ensures a component is not instantiated more than a specified number of times.\n * Throws an error if the maximum number of instances is exceeded.\n *\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @param maxCount - The maximum number of allowed instances (defaults to 1)\n * @throws Error when the maximum number of instances is exceeded\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   useMaxAllowedInstancesGuard('MyComponent', 'Only one instance of MyComponent is allowed');\n *   return <div>My Component</div>;\n * };\n * ```\n */\nexport function useMaxAllowedInstancesGuard(\n  name: string,\n  error: string,\n  maxCount = 1\n): void {\n  React.useEffect(() => {\n    const count = instanceCounter.get(name) || 0;\n    if (count === maxCount) {\n      throw new Error(error);\n    }\n    instanceCounter.set(name, count + 1);\n\n    return () => {\n      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);\n    };\n  }, []);\n}\n\n/**\n * A higher-order component that wraps a component with instance count protection.\n * This HOC ensures that the wrapped component cannot be instantiated more than once\n * (or a specified number of times) in the application.\n *\n * @param WrappedComponent - The component to wrap with instance count protection\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @returns A new component with instance count protection\n *\n * @example\n * ```tsx\n * const ProtectedComponent = withMaxAllowedInstancesGuard(\n *   MyComponent,\n *   'MyComponent',\n *   'Only one instance of MyComponent is allowed'\n * );\n * ```\n */\nexport function withMaxAllowedInstancesGuard<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  name: string,\n  error: string\n): React.ComponentType<P> {\n  const displayName =\n    WrappedComponent.displayName ||\n    WrappedComponent.name ||\n    name ||\n    'Component';\n\n  const Hoc: React.FC<P> = (props) => {\n    useMaxAllowedInstancesGuard(name, error);\n    return <WrappedComponent {...props} />;\n  };\n\n  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;\n  return Hoc;\n}\n"],"mappings":"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","names":["import_react","React","import_jsx_runtime"]}

package/dist/index.mjs

@@ -0,0 +1,108 @@
+// src/contexts/MonocleProvider.tsx
+import { createContext, useContext, useEffect, useState } from "react";
+
+// src/utils/useMaxAllowedInstancesGuard.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var instanceCounter = /* @__PURE__ */ new Map();
+function useMaxAllowedInstancesGuard(name, error, maxCount = 1) {
+  React.useEffect(() => {
+    const count = instanceCounter.get(name) || 0;
+    if (count === maxCount) {
+      throw new Error(error);
+    }
+    instanceCounter.set(name, count + 1);
+    return () => {
+      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);
+    };
+  }, []);
+}
+function withMaxAllowedInstancesGuard(WrappedComponent, name, error) {
+  const displayName = WrappedComponent.displayName || WrappedComponent.name || name || "Component";
+  const Hoc = (props) => {
+    useMaxAllowedInstancesGuard(name, error);
+    return /* @__PURE__ */ jsx(WrappedComponent, { ...props });
+  };
+  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;
+  return Hoc;
+}
+
+// src/contexts/MonocleProvider.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var MonocleContext = createContext(null);
+var MonocleProviderComponent = ({
+  children,
+  publishableKey
+}) => {
+  const [assessment, setAssessment] = useState(void 0);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const loadScript = () => {
+    return new Promise((resolve, reject) => {
+      const existingScript = document.getElementById("_mcl");
+      if (existingScript) {
+        if (!window.MCL) {
+          existingScript.onload = () => resolve();
+          existingScript.onerror = () => reject(new Error("Failed to load Monocle script"));
+        } else {
+          resolve();
+        }
+        return;
+      }
+      const script = document.createElement("script");
+      script.id = "_mcl";
+      script.async = true;
+      script.src = `https://mcl.spur.us/d/mcl.js?tk=${publishableKey}`;
+      script.onload = () => {
+        resolve();
+      };
+      script.onerror = (_e) => {
+        console.error("MonocleProvider: Script failed to load");
+        reject(new Error("Failed to load Monocle script"));
+      };
+      document.head.appendChild(script);
+    });
+  };
+  const refresh = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await loadScript();
+      if (window.MCL) {
+        const newAssessment = window.MCL.getAssessment();
+        setAssessment(newAssessment);
+      } else {
+        throw new Error("MCL object not found on window");
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Unknown error occurred")
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (!assessment) {
+      refresh();
+    }
+  }, [publishableKey]);
+  return /* @__PURE__ */ jsx2(MonocleContext.Provider, { value: { assessment, refresh, isLoading, error }, children });
+};
+var MonocleProvider = withMaxAllowedInstancesGuard(
+  MonocleProviderComponent,
+  "MonocleProvider",
+  "Only one instance of MonocleProvider is allowed"
+);
+var useMonocle = () => {
+  const context = useContext(MonocleContext);
+  if (!context) {
+    throw new Error("useMonocle must be used within a MonocleProvider");
+  }
+  return context;
+};
+export {
+  MonocleProvider,
+  useMonocle
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/MonocleProvider.tsx","../src/utils/useMaxAllowedInstancesGuard.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState } from 'react';\nimport { withMaxAllowedInstancesGuard } from '../utils';\n\ninterface MonocleContextType {\n  assessment: string | undefined;\n  refresh: () => void;\n  isLoading: boolean;\n  error: Error | null;\n}\n\nconst MonocleContext = createContext<MonocleContextType | null>(null);\n\ninterface MonocleProviderProps {\n  children: React.ReactNode;\n  publishableKey: string;\n}\n\nconst MonocleProviderComponent: React.FC<MonocleProviderProps> = ({\n  children,\n  publishableKey,\n}) => {\n  const [assessment, setAssessment] = useState<string | undefined>(undefined);\n  const [isLoading, setIsLoading] = useState(true);\n  const [error, setError] = useState<Error | null>(null);\n\n  const loadScript = () => {\n    return new Promise<void>((resolve, reject) => {\n      const existingScript = document.getElementById('_mcl');\n      if (existingScript) {\n        // If script exists but hasn't loaded yet, wait for it\n        if (!window.MCL) {\n          existingScript.onload = () => resolve();\n          existingScript.onerror = () =>\n            reject(new Error('Failed to load Monocle script'));\n        } else {\n          resolve();\n        }\n        return;\n      }\n\n      const script = document.createElement('script');\n      script.id = '_mcl';\n      script.async = true;\n      script.src = `https://mcl.spur.us/d/mcl.js?tk=${publishableKey}`;\n      script.onload = () => {\n        resolve();\n      };\n      script.onerror = (_e) => {\n        console.error('MonocleProvider: Script failed to load');\n        reject(new Error('Failed to load Monocle script'));\n      };\n      document.head.appendChild(script);\n    });\n  };\n\n  const refresh = async () => {\n    try {\n      setIsLoading(true);\n      setError(null);\n      await loadScript();\n      if (window.MCL) {\n        const newAssessment = window.MCL.getAssessment();\n        setAssessment(newAssessment);\n      } else {\n        throw new Error('MCL object not found on window');\n      }\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Unknown error occurred')\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  useEffect(() => {\n    // Only refresh if the publishableKey changes and we don't already have an assessment\n    if (!assessment) {\n      refresh();\n    }\n  }, [publishableKey]);\n\n  return (\n    <MonocleContext.Provider value={{ assessment, refresh, isLoading, error }}>\n      {children}\n    </MonocleContext.Provider>\n  );\n};\n\nexport const MonocleProvider = withMaxAllowedInstancesGuard(\n  MonocleProviderComponent,\n  'MonocleProvider',\n  'Only one instance of MonocleProvider is allowed'\n);\n\nexport const useMonocle = () => {\n  const context = useContext(MonocleContext);\n  if (!context) {\n    throw new Error('useMonocle must be used within a MonocleProvider');\n  }\n  return context;\n};\n","import React from 'react';\n\nconst instanceCounter = new Map<string, number>();\n\n/**\n * A React hook that ensures a component is not instantiated more than a specified number of times.\n * Throws an error if the maximum number of instances is exceeded.\n *\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @param maxCount - The maximum number of allowed instances (defaults to 1)\n * @throws Error when the maximum number of instances is exceeded\n *\n * @example\n * ```tsx\n * const MyComponent = () => {\n *   useMaxAllowedInstancesGuard('MyComponent', 'Only one instance of MyComponent is allowed');\n *   return <div>My Component</div>;\n * };\n * ```\n */\nexport function useMaxAllowedInstancesGuard(\n  name: string,\n  error: string,\n  maxCount = 1\n): void {\n  React.useEffect(() => {\n    const count = instanceCounter.get(name) || 0;\n    if (count === maxCount) {\n      throw new Error(error);\n    }\n    instanceCounter.set(name, count + 1);\n\n    return () => {\n      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);\n    };\n  }, []);\n}\n\n/**\n * A higher-order component that wraps a component with instance count protection.\n * This HOC ensures that the wrapped component cannot be instantiated more than once\n * (or a specified number of times) in the application.\n *\n * @param WrappedComponent - The component to wrap with instance count protection\n * @param name - A unique identifier for the component type\n * @param error - The error message to display if the maximum count is exceeded\n * @returns A new component with instance count protection\n *\n * @example\n * ```tsx\n * const ProtectedComponent = withMaxAllowedInstancesGuard(\n *   MyComponent,\n *   'MyComponent',\n *   'Only one instance of MyComponent is allowed'\n * );\n * ```\n */\nexport function withMaxAllowedInstancesGuard<P extends object>(\n  WrappedComponent: React.ComponentType<P>,\n  name: string,\n  error: string\n): React.ComponentType<P> {\n  const displayName =\n    WrappedComponent.displayName ||\n    WrappedComponent.name ||\n    name ||\n    'Component';\n\n  const Hoc: React.FC<P> = (props) => {\n    useMaxAllowedInstancesGuard(name, error);\n    return <WrappedComponent {...props} />;\n  };\n\n  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;\n  return Hoc;\n}\n"],"mappings":"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","names":["jsx"]}

package/package.json

@@ -1,87 +1,38 @@
 {
   "name": "@spur.us/monocle-react",
-  "version": "0.0.18",
-  "description": "",
-  "author": "Spur <support@spur.us> (https://spur.us/)",
-  "main": "./dist/index.js",
-  "browser": "./dist/index.js",
-  "module": "./dist/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "dist"
+  "version": "1.0.0",
+  "description": "Monocle React library",
+  "keywords": [
+    "spur",
+    "monocle",
+    "react"
   ],
-  "typings": "dist/index.d.ts",
-  "scripts": {
-    "build": "tsc",
-    "lint": "eslint ./src --ext .ts",
-    "test": "jest"
+  "homepage": "https://spur.us",
+  "bugs": {
+    "url": "https://github.com/spurintel/javascript/issues"
   },
-  "peerDependencies": {
-    "react": ">=16"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/spurintel/javascript.git",
+    "directory": "packages/monocle-react"
   },
+  "main": "./dist/index.js",
+  "author": "Spur",
+  "license": "MIT",
   "dependencies": {
-    "@spur.us/monocle-types": "^1.0.0",
-    "hoist-non-react-statics": "^3.3.2",
-    "tiny-invariant": "^1.2.0"
-  },
-  "devDependencies": {
-    "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/react": "^17.0.37",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/eslint-plugin-tslint": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "eslint": "^8.3.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "jest": "^27.5.1",
-    "terser-webpack-plugin": "^5.2.5",
-    "ts-jest": "^27.1.4",
-    "ts-loader": "^9.2.6",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.5.2",
-    "webpack": "^5.64.2",
-    "webpack-cli": "^4.9.1"
+    "@spur.us/types": "^0.2.0"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0 || ^19.0.0-0",
+    "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-0"
   },
-  "jest": {
-    "preset": "ts-jest",
-    "testEnvironment": "jsdom",
-    "globals": {
-      "MCL_CORE_URL": "https://localhost:8443/d/mcl.js",
-      "MCL_LDR_VERSION": "jest",
-      "MCL_TYPE": "jest-jsldr"
-    },
-    "transform": {
-      "^.+\\.ts?$": "ts-jest"
-    },
-    "testRegex": "(\\.test)\\.(jsx?|tsx?)$",
-    "testPathIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "ts",
-      "tsx"
-    ],
-    "collectCoverage": true
+  "scripts": {
+    "build": "tsup",
+    "build:declarations": "tsc -p tsconfig.declarations.json",
+    "clean": "rimraf ./dist",
+    "dev": "tsup --watch",
+    "lint": "eslint src",
+    "publish:local": "pnpm yalc push --replace --sig",
+    "test": "vitest"
   }
-}
+}

package/src/contexts/MonocleProvider.tsx

@@ -0,0 +1,102 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { withMaxAllowedInstancesGuard } from '../utils';
+
+interface MonocleContextType {
+  assessment: string | undefined;
+  refresh: () => void;
+  isLoading: boolean;
+  error: Error | null;
+}
+
+const MonocleContext = createContext<MonocleContextType | null>(null);
+
+interface MonocleProviderProps {
+  children: React.ReactNode;
+  publishableKey: string;
+}
+
+const MonocleProviderComponent: React.FC<MonocleProviderProps> = ({
+  children,
+  publishableKey,
+}) => {
+  const [assessment, setAssessment] = useState<string | undefined>(undefined);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const loadScript = () => {
+    return new Promise<void>((resolve, reject) => {
+      const existingScript = document.getElementById('_mcl');
+      if (existingScript) {
+        // If script exists but hasn't loaded yet, wait for it
+        if (!window.MCL) {
+          existingScript.onload = () => resolve();
+          existingScript.onerror = () =>
+            reject(new Error('Failed to load Monocle script'));
+        } else {
+          resolve();
+        }
+        return;
+      }
+
+      const script = document.createElement('script');
+      script.id = '_mcl';
+      script.async = true;
+      script.src = `https://mcl.spur.us/d/mcl.js?tk=${publishableKey}`;
+      script.onload = () => {
+        resolve();
+      };
+      script.onerror = (_e) => {
+        console.error('MonocleProvider: Script failed to load');
+        reject(new Error('Failed to load Monocle script'));
+      };
+      document.head.appendChild(script);
+    });
+  };
+
+  const refresh = async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      await loadScript();
+      if (window.MCL) {
+        const newAssessment = window.MCL.getAssessment();
+        setAssessment(newAssessment);
+      } else {
+        throw new Error('MCL object not found on window');
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error('Unknown error occurred')
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    // Only refresh if the publishableKey changes and we don't already have an assessment
+    if (!assessment) {
+      refresh();
+    }
+  }, [publishableKey]);
+
+  return (
+    <MonocleContext.Provider value={{ assessment, refresh, isLoading, error }}>
+      {children}
+    </MonocleContext.Provider>
+  );
+};
+
+export const MonocleProvider = withMaxAllowedInstancesGuard(
+  MonocleProviderComponent,
+  'MonocleProvider',
+  'Only one instance of MonocleProvider is allowed'
+);
+
+export const useMonocle = () => {
+  const context = useContext(MonocleContext);
+  if (!context) {
+    throw new Error('useMonocle must be used within a MonocleProvider');
+  }
+  return context;
+};

package/src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './MonocleProvider';

package/src/global.d.ts

@@ -0,0 +1,8 @@
+import { Monocle } from '@spur.us/types';
+
+declare global {
+  interface Window {
+    /** Monocle client instance */
+    MCL?: Monocle;
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './contexts';

package/src/utils/__tests__/useMaxAllowedInstancesGuard.test.tsx

@@ -0,0 +1,117 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import {
+  useMaxAllowedInstancesGuard,
+  withMaxAllowedInstancesGuard,
+} from '../useMaxAllowedInstancesGuard';
+
+describe('useMaxAllowedInstancesGuard', () => {
+  it('should allow a single instance of a component', () => {
+    const TestComponent = () => {
+      useMaxAllowedInstancesGuard('TestComponent', 'Only one instance allowed');
+      return <div>Test Component</div>;
+    };
+
+    expect(() => render(<TestComponent />)).not.toThrow();
+  });
+
+  it('should throw an error when exceeding max instances', () => {
+    const TestComponent = () => {
+      useMaxAllowedInstancesGuard('TestComponent', 'Only one instance allowed');
+      return <div>Test Component</div>;
+    };
+
+    // First instance should work
+    render(<TestComponent />);
+
+    // Second instance should throw
+    expect(() => render(<TestComponent />)).toThrow(
+      'Only one instance allowed'
+    );
+  });
+
+  it('should allow multiple instances when maxCount is greater than 1', () => {
+    const TestComponent = () => {
+      useMaxAllowedInstancesGuard(
+        'TestComponent',
+        'Only two instances allowed',
+        2
+      );
+      return <div>Test Component</div>;
+    };
+
+    // First instance
+    render(<TestComponent />);
+
+    // Second instance should work
+    expect(() => render(<TestComponent />)).not.toThrow();
+
+    // Third instance should throw
+    expect(() => render(<TestComponent />)).toThrow(
+      'Only two instances allowed'
+    );
+  });
+
+  it('should decrement count when component unmounts', () => {
+    const TestComponent = () => {
+      useMaxAllowedInstancesGuard('TestComponent', 'Only one instance allowed');
+      return <div>Test Component</div>;
+    };
+
+    const { unmount } = render(<TestComponent />);
+    unmount();
+
+    // After unmounting, we should be able to render again
+    expect(() => render(<TestComponent />)).not.toThrow();
+  });
+});
+
+describe('withMaxAllowedInstancesGuard', () => {
+  interface TestComponentProps {
+    text: string;
+  }
+
+  const TestComponent: React.FC<TestComponentProps> = ({ text }) => (
+    <div>{text}</div>
+  );
+  TestComponent.displayName = 'TestComponent';
+
+  it('should wrap a component with instance count protection', () => {
+    const ProtectedComponent = withMaxAllowedInstancesGuard(
+      TestComponent,
+      'TestComponent',
+      'Only one instance allowed'
+    );
+
+    render(<ProtectedComponent text="First Instance" />);
+    expect(screen.getByText('First Instance')).toBeInTheDocument();
+
+    expect(() => render(<ProtectedComponent text="Second Instance" />)).toThrow(
+      'Only one instance allowed'
+    );
+  });
+
+  it('should preserve component props', () => {
+    const ProtectedComponent = withMaxAllowedInstancesGuard(
+      TestComponent,
+      'TestComponent',
+      'Only one instance allowed'
+    );
+
+    render(<ProtectedComponent text="Test Text" />);
+    expect(screen.getByText('Test Text')).toBeInTheDocument();
+  });
+
+  it('should use component displayName if available', () => {
+    const ProtectedComponent = withMaxAllowedInstancesGuard(
+      TestComponent,
+      'TestComponent',
+      'Only one instance allowed'
+    );
+
+    expect(ProtectedComponent.displayName).toBe(
+      'withMaxAllowedInstancesGuard(TestComponent)'
+    );
+  });
+});

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './useMaxAllowedInstancesGuard';

package/src/utils/useMaxAllowedInstancesGuard.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+
+const instanceCounter = new Map<string, number>();
+
+/**
+ * A React hook that ensures a component is not instantiated more than a specified number of times.
+ * Throws an error if the maximum number of instances is exceeded.
+ *
+ * @param name - A unique identifier for the component type
+ * @param error - The error message to display if the maximum count is exceeded
+ * @param maxCount - The maximum number of allowed instances (defaults to 1)
+ * @throws Error when the maximum number of instances is exceeded
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *   useMaxAllowedInstancesGuard('MyComponent', 'Only one instance of MyComponent is allowed');
+ *   return <div>My Component</div>;
+ * };
+ * ```
+ */
+export function useMaxAllowedInstancesGuard(
+  name: string,
+  error: string,
+  maxCount = 1
+): void {
+  React.useEffect(() => {
+    const count = instanceCounter.get(name) || 0;
+    if (count === maxCount) {
+      throw new Error(error);
+    }
+    instanceCounter.set(name, count + 1);
+
+    return () => {
+      instanceCounter.set(name, (instanceCounter.get(name) || 1) - 1);
+    };
+  }, []);
+}
+
+/**
+ * A higher-order component that wraps a component with instance count protection.
+ * This HOC ensures that the wrapped component cannot be instantiated more than once
+ * (or a specified number of times) in the application.
+ *
+ * @param WrappedComponent - The component to wrap with instance count protection
+ * @param name - A unique identifier for the component type
+ * @param error - The error message to display if the maximum count is exceeded
+ * @returns A new component with instance count protection
+ *
+ * @example
+ * ```tsx
+ * const ProtectedComponent = withMaxAllowedInstancesGuard(
+ *   MyComponent,
+ *   'MyComponent',
+ *   'Only one instance of MyComponent is allowed'
+ * );
+ * ```
+ */
+export function withMaxAllowedInstancesGuard<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  name: string,
+  error: string
+): React.ComponentType<P> {
+  const displayName =
+    WrappedComponent.displayName ||
+    WrappedComponent.name ||
+    name ||
+    'Component';
+
+  const Hoc: React.FC<P> = (props) => {
+    useMaxAllowedInstancesGuard(name, error);
+    return <WrappedComponent {...props} />;
+  };
+
+  Hoc.displayName = `withMaxAllowedInstancesGuard(${displayName})`;
+  return Hoc;
+}

package/tsconfig.declarations.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "./dist",
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "skipLibCheck": true
+  },
+  "exclude": ["**/__tests__/**/*"]
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2019",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"]
+}

package/tsup.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'tsup';
+
+import { name, version } from './package.json';
+
+export default defineConfig((overrideOptions) => {
+  const shouldPublish = !!overrideOptions.env?.publish;
+
+  return {
+    entry: {
+      index: 'src/index.ts',
+    },
+    dts: true,
+    onSuccess: shouldPublish ? 'pnpm publish:local' : undefined,
+    format: ['cjs', 'esm'],
+    bundle: true,
+    clean: true,
+    minify: false,
+    sourcemap: true,
+    external: ['react', 'react-dom'],
+    define: {
+      PACKAGE_NAME: `"${name}"`,
+      PACKAGE_VERSION: `"${version}"`,
+    },
+  };
+});

package/vitest.config.mts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./vitest.setup.mts'],
+    globals: true,
+  },
+});

package/vitest.setup.mts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom';
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+
+// Automatically cleanup after each test
+afterEach(() => {
+  cleanup();
+});

package/dist/MonocleContext.d.ts

@@ -1,2 +0,0 @@
-declare const context: import("react").Context<{}>;
-export default context;

package/dist/MonocleContext.js

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-var createNamedContext = function (name) {
-    var context = createContext({});
-    context.displayName = name;
-    return context;
-};
-var context = createNamedContext("monocle");
-export default context;
-//# sourceMappingURL=MonocleContext.js.map

package/dist/MonocleContext.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MonocleContext.js","sourceRoot":"","sources":["../src/MonocleContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,IAAM,kBAAkB,GAAG,UAAC,IAAwB;IAClD,IAAM,OAAO,GAAG,aAAa,CAAC,EAAE,CAAC,CAAC;IAClC,OAAO,CAAC,WAAW,GAAG,IAAI,CAAC;IAC3B,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,IAAM,OAAO,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}

package/dist/MonocleProvider.d.ts

@@ -1,8 +0,0 @@
-import React from "react";
-import { Monocle } from "@spur.us/monocle-types";
-interface MonocoleProviderProps {
-    children: React.ReactNode;
-    instance?: Monocle;
-}
-declare const MonocleProvider: ({ children, instance }: MonocoleProviderProps) => JSX.Element;
-export default MonocleProvider;

package/dist/MonocleProvider.js

@@ -1,10 +0,0 @@
-import React from "react";
-import MonocleContext from "./MonocleContext";
-import invariant from "tiny-invariant";
-var MonocleProvider = function (_a) {
-    var children = _a.children, instance = _a.instance;
-    invariant(instance, "Monocle instance not provided to <MonocleProvider />");
-    return (React.createElement(MonocleContext.Provider, { value: instance, children: children || null }));
-};
-export default MonocleProvider;
-//# sourceMappingURL=MonocleProvider.js.map

package/dist/MonocleProvider.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MonocleProvider.js","sourceRoot":"","sources":["../src/MonocleProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAQvC,IAAM,eAAe,GAAG,UAAC,EAA6C;QAA3C,QAAQ,cAAA,EAAE,QAAQ,cAAA;IAC3C,SAAS,CAAC,QAAQ,EAAE,sDAAsD,CAAC,CAAC;IAC5E,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,IAAI,IAAI,GAAI,CACzE,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/hooks.d.ts

@@ -1,2 +0,0 @@
-import { Monocle } from "@spur.us/monocle-types";
-export declare const useMonocle: () => Monocle;

package/dist/hooks.js

@@ -1,6 +0,0 @@
-import { useContext } from "react";
-import MonocleContext from "./MonocleContext";
-export var useMonocle = function () {
-    return useContext(MonocleContext);
-};
-//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,IAAM,UAAU,GAAG;IACxB,OAAO,UAAU,CAAC,cAAc,CAAY,CAAC;AAC/C,CAAC,CAAC"}

package/dist/index.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/index.test.js

@@ -1,27 +0,0 @@
-import { describe, expect, test, it } from "@jest/globals";
-import * as MonocleReact from "./index";
-describe("Monocle React Library", function () {
-    test("Library is loadable", function () {
-        expect(MonocleReact).not.toBeUndefined();
-    });
-    test("Core library is exported when initialized", function () {
-        expect(MonocleReact.MonocleConsumer).toBeDefined();
-        expect(MonocleReact.MonocleContext).toBeDefined();
-        expect(MonocleReact.MonocleProvider).toBeDefined();
-        expect(MonocleReact.useMonocle).toBeDefined();
-        expect(MonocleReact.withMonocle).toBeDefined();
-    });
-});
-describe("Monocle React hooks", function () {
-    it.todo("useMonocle return null when unavailable");
-    it.todo("useMonocle should return our monocle instanace when available");
-    it.todo("withMonocle return null when unavailable");
-    it.todo("withMonocle should return our monocle instanace when available");
-});
-describe("Monocle React components", function () {
-    it.todo("MonocleContext should be loadable");
-    it.todo("MonocleContext should fail gracefully");
-    it.todo("MonocleProvider should be loadable");
-    it.todo("MonocleProvider should fail gracefully");
-});
-//# sourceMappingURL=index.test.js.map

package/dist/index.test.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.test.js","sourceRoot":"","sources":["../src/index.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,KAAK,YAAY,MAAM,SAAS,CAAC;AAExC,QAAQ,CAAC,uBAAuB,EAAE;IAChC,IAAI,CAAC,qBAAqB,EAAE;QAC1B,MAAM,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,2CAA2C,EAAE;QAChD,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAC;QACnD,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC,CAAC,WAAW,EAAE,CAAC;QAClD,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,CAAC;QACnD,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC,WAAW,EAAE,CAAC;QAC9C,MAAM,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,WAAW,EAAE,CAAC;IACjD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,qBAAqB,EAAE;IAC9B,EAAE,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAC;IACnD,EAAE,CAAC,IAAI,CAAC,+DAA+D,CAAC,CAAC;IACzE,EAAE,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;IACpD,EAAE,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;AAC5E,CAAC,CAAC,CAAC;AAEH,QAAQ,CAAC,0BAA0B,EAAE;IACnC,EAAE,CAAC,IAAI,CAAC,mCAAmC,CAAC,CAAC;IAC7C,EAAE,CAAC,IAAI,CAAC,uCAAuC,CAAC,CAAC;IACjD,EAAE,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;IAC9C,EAAE,CAAC,IAAI,CAAC,wCAAwC,CAAC,CAAC;AACpD,CAAC,CAAC,CAAC"}

package/dist/withMonocle.d.ts

@@ -1,7 +0,0 @@
-import hoistStatics from "hoist-non-react-statics";
-declare const withMonocle: (Component: any) => {
-    (props: any): JSX.Element;
-    displayName: string;
-    WrappedComponent: any;
-} & hoistStatics.NonReactStatics<any, {}>;
-export default withMonocle;

package/dist/withMonocle.js

@@ -1,22 +0,0 @@
-import { __assign, __rest } from "tslib";
-import React from "react";
-import MonocleContext from "./MonocleContext";
-import hoistStatics from "hoist-non-react-statics";
-import invariant from "tiny-invariant";
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-var withMonocle = function (Component) {
-    var displayName = "withMonocle(".concat(Component.displayName || Component.name, ")");
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    var C = function (props) {
-        var wrappedComponentRef = props.wrappedComponentRef, remainingProps = __rest(props, ["wrappedComponentRef"]);
-        return (React.createElement(MonocleContext.Consumer, null, function (context) {
-            invariant(context, "You should not use ".concat(displayName, " outside of a <MonocleProvider>"));
-            return (React.createElement(Component, __assign({}, remainingProps, { analytics: context, ref: wrappedComponentRef })));
-        }));
-    };
-    C.displayName = displayName;
-    C.WrappedComponent = Component;
-    return hoistStatics(C, Component);
-};
-export default withMonocle;
-//# sourceMappingURL=withMonocle.js.map

package/dist/withMonocle.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"withMonocle.js","sourceRoot":"","sources":["../src/withMonocle.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,YAAY,MAAM,yBAAyB,CAAC;AACnD,OAAO,SAAS,MAAM,gBAAgB,CAAC;AAEvC,8DAA8D;AAC9D,IAAM,WAAW,GAAG,UAAC,SAAc;IACjC,IAAM,WAAW,GAAG,sBAAe,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,MAAG,CAAC;IAE9E,8DAA8D;IAC9D,IAAM,CAAC,GAAG,UAAC,KAAU;QACX,IAAA,mBAAmB,GAAwB,KAAK,oBAA7B,EAAK,cAAc,UAAK,KAAK,EAAlD,uBAA0C,CAAF,CAAW;QAEzD,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,QACrB,UAAC,OAAO;YACP,SAAS,CACP,OAAO,EACP,6BAAsB,WAAW,oCAAiC,CACnE,CAAC;YAEF,OAAO,CACL,oBAAC,SAAS,eACJ,cAAc,IAClB,SAAS,EAAE,OAAO,EAClB,GAAG,EAAE,mBAAmB,IACxB,CACH,CAAC;QACJ,CAAC,CACuB,CAC3B,CAAC;IACJ,CAAC,CAAC;IAEF,CAAC,CAAC,WAAW,GAAG,WAAW,CAAC;IAC5B,CAAC,CAAC,gBAAgB,GAAG,SAAS,CAAC;IAC/B,OAAO,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AACpC,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}