npm - @xyo-network/react-access-gate - Versions diffs - 7.6.2 → 8.0.0 - Mend

@xyo-network/react-access-gate 7.6.2 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/browser/components/AccessCodeGateFlexbox.d.ts.map +1 -1
package/dist/browser/index.mjs +34 -18
package/dist/browser/index.mjs.map +1 -1
package/package.json +39 -39

package/dist/browser/components/AccessCodeGateFlexbox.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AccessCodeGateFlexbox.d.ts","sourceRoot":"","sources":["../../../src/components/AccessCodeGateFlexbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAEN,MAAM,OAAO,CAAA;AAId,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,EAAE,YAAY;IAC5E,mBAAmB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,gBAAgB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;CACnD;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,~~CA4FjE~~,CAAA"}
1	+ {"version":3,"file":"AccessCodeGateFlexbox.d.ts","sourceRoot":"","sources":["../../../src/components/AccessCodeGateFlexbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAEN,MAAM,OAAO,CAAA;AAId,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,EAAE,YAAY;IAC5E,mBAAmB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,gBAAgB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;CACnD;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoGjE,CAAA"}

package/dist/browser/index.mjs CHANGED Viewed

@@ -9,7 +9,7 @@ import {
 } from "react";
 // src/components/CodeTextField.tsx
-import { CheckCircleOutline, ErrorOutline } from "@mui/icons-material";
+import { CheckCircleOutlined, ErrorOutlined } from "@mui/icons-material";
 import {
   InputAdornment,
   styled,
@@ -29,16 +29,16 @@ var CodeTextField = ({
     slotProps: {
       input: {
         endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "start", children: [
-          /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { display: validCode === null ? "block" : "hidden", visibility: "hidden" } }),
+          /* @__PURE__ */ jsx(CheckCircleOutlined, { sx: { display: validCode === null ? "block" : "hidden", visibility: "hidden" } }),
           /* @__PURE__ */ jsx(
-            CheckCircleOutline,
+            CheckCircleOutlined,
             {
               color: "success",
               fontSize: "medium",
               sx: { position: "absolute", visibility: validCode === true ? "visible" : "hidden" }
             }
           ),
-          /* @__PURE__ */ jsx(ErrorOutline, { color: "error", fontSize: "medium", sx: { position: "absolute", visibility: validCode === false ? "visible" : "hidden" } })
+          /* @__PURE__ */ jsx(ErrorOutlined, { color: "error", fontSize: "medium", sx: { position: "absolute", visibility: validCode === false ? "visible" : "hidden" } })
         ] })
       }
     },
@@ -103,20 +103,36 @@ var AccessCodeGateFlexbox = ({
     }
     setInitialized(true);
   }, [userAccessCodes, validateCode]);
-  return /* @__PURE__ */ jsx2(Fragment, { children: initialized ? accessGranted ? children : /* @__PURE__ */ jsx2(FlexGrowCol, { gap: 2, ...props, children: /* @__PURE__ */ jsxs2(FlexGrowRow, { gap: 2, alignItems: "start", children: [
-    /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(
-      CodeTextField,
-      {
-        codeInput,
-        disabled,
-        label: "Enter Access Code",
-        setCodeInput,
-        validCode,
-        onEnter
-      }
-    ) }),
-    /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(ButtonEx, { disabled, onClick: onEnter, variant: "contained", children: "Enter" }) })
-  ] }) }) : null });
+  return /* @__PURE__ */ jsx2(Fragment, { children: initialized ? accessGranted ? children : /* @__PURE__ */ jsx2(
+    FlexGrowCol,
+    {
+      ...props,
+      sx: [{ gap: 2 }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: /* @__PURE__ */ jsxs2(
+        FlexGrowRow,
+        {
+          sx: {
+            gap: 2,
+            alignItems: "start"
+          },
+          children: [
+            /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(
+              CodeTextField,
+              {
+                codeInput,
+                disabled,
+                label: "Enter Access Code",
+                setCodeInput,
+                validCode,
+                onEnter
+              }
+            ) }),
+            /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(ButtonEx, { disabled, onClick: onEnter, variant: "contained", children: "Enter" }) })
+          ]
+        }
+      )
+    }
+  ) : null });
 };
 // src/hooks/useAccessCodes.ts

package/dist/browser/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/components/AccessCodeGateFlexbox.tsx","../../src/components/CodeTextField.tsx","../../src/hooks/useAccessCodes.ts"],"sourcesContent":["import { FormControl } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, {\n useCallback, useEffect, useState,\n} from 'react'\n\nimport { CodeTextField } from './CodeTextField.tsx'\n\nexport interface AccessCodeGateFlexbox extends PropsWithChildren, FlexBoxProps {\n onAccessCodeSuccess?: (code?: string) => void\n onCodeInputChange?: (codeInput?: string) => void\n successRedirectDelay?: number\n textFieldHelperText?: string\n userAccessCodes?: string[]\n validAccessCodes?: string[]\n validateFunction?: (codeInput?: string) => boolean\n}\n\nexport const AccessCodeGateFlexbox: React.FC<AccessCodeGateFlexbox> = ({\n children,\n onCodeInputChange,\n onAccessCodeSuccess,\n successRedirectDelay = 1500,\n userAccessCodes,\n validAccessCodes,\n validateFunction,\n ...props\n}) => {\n const [initialized, setInitialized] = useState(false)\n const [accessGranted, setAccessGranted] = useState(false)\n const [codeInput, setCodeInput] = useState<string>()\n const [validCode, setValidCode] = useState<boolean \| null>(null)\n\n const disabled = validateFunction ? !validateFunction(codeInput) : !codeInput\n const validateCode = useCallback((accessCode: string) => (accessCode ? validAccessCodes?.includes(accessCode) : false), [validAccessCodes])\n\n // keep the parent informed of the code input\n useEffect(() => {\n if (onCodeInputChange) {\n onCodeInputChange(codeInput)\n }\n }, [codeInput, onCodeInputChange])\n\n const onEnter = () => {\n onCodeInputChange?.(codeInput)\n if (codeInput) {\n const granted = validateCode(codeInput)\n if (granted) {\n setValidCode(true)\n // delay success callback to ensure the ui shows success before next action\n setTimeout(() => {\n setAccessGranted(granted)\n onAccessCodeSuccess?.(codeInput)\n }, successRedirectDelay)\n } else {\n setValidCode(false)\n }\n }\n }\n\n useEffect(() => {\n // whenever a code changes, reset the success/failure warning\n // eslint-disable-next-line react-hooks/set-state-in-effect, react-x/set-state-in-effect\n setValidCode(null)\n }, [codeInput])\n\n useEffect(() => {\n if (userAccessCodes) {\n const granted = userAccessCodes.some(code => validateCode(code))\n if (granted) {\n // eslint-disable-next-line react-hooks/set-state-in-effect, react-x/set-state-in-effect\n setAccessGranted(true)\n onAccessCodeSuccess?.()\n }\n }\n // eslint-disable-next-line react-x/set-state-in-effect\n setInitialized(true)\n // eslint-disable-next-line react-hooks/exhaustive-deps, react-x/exhaustive-deps\n }, [userAccessCodes, validateCode])\n\n return (\n <>\n {initialized\n ? accessGranted\n ? children\n : (\n <FlexGrowCol gap={2} {...props}>\n <FlexGrowRow gap={2} alignItems=\"start\">\n <FormControl>\n <CodeTextField\n codeInput={codeInput}\n disabled={disabled}\n label=\"Enter Access Code\"\n setCodeInput={setCodeInput}\n validCode={validCode}\n onEnter={onEnter}\n />\n </FormControl>\n <FormControl>\n <ButtonEx disabled={disabled} onClick={onEnter} variant=\"contained\">\n Enter\n </ButtonEx>\n </FormControl>\n </FlexGrowRow>\n </FlexGrowCol>\n )\n\n : null}\n </>\n )\n}\n","import { CheckCircleOutline, ErrorOutline } from '@mui/icons-material'\nimport type { TextFieldProps } from '@mui/material'\nimport {\n InputAdornment, styled, TextField,\n} from '@mui/material'\nimport type { KeyboardEvent } from 'react'\nimport React from 'react'\n\nexport type CodeTextFieldProps = TextFieldProps & {\n codeInput?: string\n disabled?: boolean\n onEnter?: () => void\n setCodeInput?: (code?: string) => void\n validCode?: boolean \| null\n}\n\nexport const CodeTextField: React.FC<CodeTextFieldProps> = ({\n codeInput, disabled, onEnter, setCodeInput, validCode, ...props\n}) => (\n <StyledTextField\n slotProps={{\n input: {\n endAdornment: (\n <InputAdornment position=\"start\">\n {/* Having a display block element for all 3 states (null, false, true) means the icon coming in and out\n does not affect the overall width */}\n <CheckCircleOutline sx={{ display: validCode === null ? 'block' : 'hidden', visibility: 'hidden' }} />\n <CheckCircleOutline\n color=\"success\"\n fontSize=\"medium\"\n sx={{ position: 'absolute', visibility: validCode === true ? 'visible' : 'hidden' }}\n />\n <ErrorOutline color=\"error\" fontSize=\"medium\" sx={{ position: 'absolute', visibility: validCode === false ? 'visible' : 'hidden' }} />\n </InputAdornment>\n ),\n },\n }}\n onKeyUp={(event: KeyboardEvent) => (event.key === 'Enter' && !disabled ? onEnter?.() : null)}\n autoFocus\n size=\"small\"\n value={codeInput ?? ''}\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => setCodeInput?.(event.target.value)}\n {...props}\n />\n)\n\nconst StyledTextField = styled(TextField, { name: 'StyledTextField' })(() => ({ '& .MuiInputBase-root': { paddingRight: 0 } }))\n","import { useMemo, useState } from 'react'\n\nexport const useAccessCodes = (localStorageKey: string, validCodeLength = 6) => {\n const [validated, setValidated] = useState(false)\n const [codeInput, setCodeInput] = useState('')\n\n const onAccessCodeSuccess = () => {\n // Save the access code to local storage\n if (codeInput) {\n localStorage.setItem(localStorageKey, JSON.stringify([codeInput]))\n setValidated(true)\n } else {\n // If the codeInput is empty, but we have success, do nothing since the successful code is already saved\n setValidated(true)\n }\n }\n const validateCodeInput = (code?: string) => {\n return code?.length === validCodeLength\n }\n const onCodeInputChange = (code?: string) => {\n setCodeInput(code ?? '')\n }\n const userAccessCodes = useMemo(() => {\n const storedCodes = localStorage.getItem(localStorageKey)\n if (storedCodes) {\n const parsedResult = JSON.parse(storedCodes ?? '')\n if (Array.isArray(parsedResult)) return parsedResult\n }\n }, [localStorageKey])\n\n return {\n codeInput, validated, userAccessCodes, onAccessCodeSuccess, onCodeInputChange, validateCodeInput,\n }\n}\n"],"mappings":"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","names":["jsx","jsxs","useState"]}
1	+ {"version":3,"sources":["../../src/components/AccessCodeGateFlexbox.tsx","../../src/components/CodeTextField.tsx","../../src/hooks/useAccessCodes.ts"],"sourcesContent":["import { FormControl } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, {\n useCallback, useEffect, useState,\n} from 'react'\n\nimport { CodeTextField } from './CodeTextField.tsx'\n\nexport interface AccessCodeGateFlexbox extends PropsWithChildren, FlexBoxProps {\n onAccessCodeSuccess?: (code?: string) => void\n onCodeInputChange?: (codeInput?: string) => void\n successRedirectDelay?: number\n textFieldHelperText?: string\n userAccessCodes?: string[]\n validAccessCodes?: string[]\n validateFunction?: (codeInput?: string) => boolean\n}\n\nexport const AccessCodeGateFlexbox: React.FC<AccessCodeGateFlexbox> = ({\n children,\n onCodeInputChange,\n onAccessCodeSuccess,\n successRedirectDelay = 1500,\n userAccessCodes,\n validAccessCodes,\n validateFunction,\n ...props\n}) => {\n const [initialized, setInitialized] = useState(false)\n const [accessGranted, setAccessGranted] = useState(false)\n const [codeInput, setCodeInput] = useState<string>()\n const [validCode, setValidCode] = useState<boolean \| null>(null)\n\n const disabled = validateFunction ? !validateFunction(codeInput) : !codeInput\n const validateCode = useCallback((accessCode: string) => (accessCode ? validAccessCodes?.includes(accessCode) : false), [validAccessCodes])\n\n // keep the parent informed of the code input\n useEffect(() => {\n if (onCodeInputChange) {\n onCodeInputChange(codeInput)\n }\n }, [codeInput, onCodeInputChange])\n\n const onEnter = () => {\n onCodeInputChange?.(codeInput)\n if (codeInput) {\n const granted = validateCode(codeInput)\n if (granted) {\n setValidCode(true)\n // delay success callback to ensure the ui shows success before next action\n setTimeout(() => {\n setAccessGranted(granted)\n onAccessCodeSuccess?.(codeInput)\n }, successRedirectDelay)\n } else {\n setValidCode(false)\n }\n }\n }\n\n useEffect(() => {\n // whenever a code changes, reset the success/failure warning\n // eslint-disable-next-line react-hooks/set-state-in-effect, react-x/set-state-in-effect\n setValidCode(null)\n }, [codeInput])\n\n useEffect(() => {\n if (userAccessCodes) {\n const granted = userAccessCodes.some(code => validateCode(code))\n if (granted) {\n // eslint-disable-next-line react-hooks/set-state-in-effect, react-x/set-state-in-effect\n setAccessGranted(true)\n onAccessCodeSuccess?.()\n }\n }\n // eslint-disable-next-line react-x/set-state-in-effect\n setInitialized(true)\n // eslint-disable-next-line react-hooks/exhaustive-deps, react-x/exhaustive-deps\n }, [userAccessCodes, validateCode])\n\n return (\n <>\n {initialized\n ? accessGranted\n ? children\n : (\n <FlexGrowCol\n {...props}\n sx={[{ gap: 2 }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n >\n <FlexGrowRow\n sx={{\n gap: 2,\n alignItems: 'start',\n }}\n >\n <FormControl>\n <CodeTextField\n codeInput={codeInput}\n disabled={disabled}\n label=\"Enter Access Code\"\n setCodeInput={setCodeInput}\n validCode={validCode}\n onEnter={onEnter}\n />\n </FormControl>\n <FormControl>\n <ButtonEx disabled={disabled} onClick={onEnter} variant=\"contained\">\n Enter\n </ButtonEx>\n </FormControl>\n </FlexGrowRow>\n </FlexGrowCol>\n )\n\n : null}\n </>\n )\n}\n","import { CheckCircleOutlined, ErrorOutlined } from '@mui/icons-material'\nimport type { TextFieldProps } from '@mui/material'\nimport {\n InputAdornment, styled, TextField,\n} from '@mui/material'\nimport type { KeyboardEvent } from 'react'\nimport React from 'react'\n\nexport type CodeTextFieldProps = TextFieldProps & {\n codeInput?: string\n disabled?: boolean\n onEnter?: () => void\n setCodeInput?: (code?: string) => void\n validCode?: boolean \| null\n}\n\nexport const CodeTextField: React.FC<CodeTextFieldProps> = ({\n codeInput, disabled, onEnter, setCodeInput, validCode, ...props\n}) => (\n <StyledTextField\n slotProps={{\n input: {\n endAdornment: (\n <InputAdornment position=\"start\">\n {/* Having a display block element for all 3 states (null, false, true) means the icon coming in and out\n does not affect the overall width */}\n <CheckCircleOutlined sx={{ display: validCode === null ? 'block' : 'hidden', visibility: 'hidden' }} />\n <CheckCircleOutlined\n color=\"success\"\n fontSize=\"medium\"\n sx={{ position: 'absolute', visibility: validCode === true ? 'visible' : 'hidden' }}\n />\n <ErrorOutlined color=\"error\" fontSize=\"medium\" sx={{ position: 'absolute', visibility: validCode === false ? 'visible' : 'hidden' }} />\n </InputAdornment>\n ),\n },\n }}\n onKeyUp={(event: KeyboardEvent) => (event.key === 'Enter' && !disabled ? onEnter?.() : null)}\n autoFocus\n size=\"small\"\n value={codeInput ?? ''}\n onChange={(event: React.ChangeEvent<HTMLInputElement>) => setCodeInput?.(event.target.value)}\n {...props}\n />\n)\n\nconst StyledTextField = styled(TextField, { name: 'StyledTextField' })(() => ({ '& .MuiInputBase-root': { paddingRight: 0 } }))\n","import { useMemo, useState } from 'react'\n\nexport const useAccessCodes = (localStorageKey: string, validCodeLength = 6) => {\n const [validated, setValidated] = useState(false)\n const [codeInput, setCodeInput] = useState('')\n\n const onAccessCodeSuccess = () => {\n // Save the access code to local storage\n if (codeInput) {\n localStorage.setItem(localStorageKey, JSON.stringify([codeInput]))\n setValidated(true)\n } else {\n // If the codeInput is empty, but we have success, do nothing since the successful code is already saved\n setValidated(true)\n }\n }\n const validateCodeInput = (code?: string) => {\n return code?.length === validCodeLength\n }\n const onCodeInputChange = (code?: string) => {\n setCodeInput(code ?? '')\n }\n const userAccessCodes = useMemo(() => {\n const storedCodes = localStorage.getItem(localStorageKey)\n if (storedCodes) {\n const parsedResult = JSON.parse(storedCodes ?? '')\n if (Array.isArray(parsedResult)) return parsedResult\n }\n }, [localStorageKey])\n\n return {\n codeInput, validated, userAccessCodes, onAccessCodeSuccess, onCodeInputChange, validateCodeInput,\n }\n}\n"],"mappings":"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","names":["jsx","jsxs","useState"]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-access-gate",
-  "version": "7.6.2",
+  "version": "8.0.0",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -41,20 +41,20 @@
     "README.md"
   ],
   "devDependencies": {
-    "@mui/icons-material": "^7.3.10",
-    "@mui/material": "^7.3.10",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/sdk-trace-base": "^2.7.1",
     "@storybook/react-vite": "~10.3.6",
     "@types/react": "^19.2.14",
-    "@xylabs/pixel": "~5.1.1",
-    "@xylabs/react-button": "~7.2.3",
-    "@xylabs/react-flexbox": "~7.2.3",
-    "@xylabs/sdk-js": "^5.1.1",
-    "@xylabs/toolchain": "~7.13.7",
-    "@xylabs/tsconfig": "^7.13.7",
-    "@xylabs/tsconfig-dom": "^7.13.7",
-    "@xylabs/tsconfig-react": "~7.13.7",
+    "@xylabs/pixel": "~5.1.2",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/sdk-js": "^5.1.2",
+    "@xylabs/toolchain": "~7.13.22",
+    "@xylabs/tsconfig": "^7.13.22",
+    "@xylabs/tsconfig-dom": "^7.13.22",
+    "@xylabs/tsconfig-react": "~7.13.22",
     "async-mutex": "^0.5.0",
     "bn.js": "^5.2.3",
     "bowser": "^2.14.1",
@@ -67,41 +67,41 @@
     "mixpanel-browser": "~2.78.0",
     "pako": "^2.1.0",
     "query-string": "~9.3.1",
-    "react": "^19.2.5",
-    "react-dom": "^19.2.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
     "react-router-dom": "^7.15.0",
     "spark-md5": "~3.0.2",
     "storybook": "^10.3.6",
     "typescript": "^5.9.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.11",
     "zod": "^4.4.3"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=7.3.10 <8",
-    "@mui/material": ">=7.3.10 <8",
-    "@opentelemetry/api": ">=1.9.1 <2",
-    "@opentelemetry/sdk-trace-base": ">=2.7.1 <3",
-    "@types/react": ">=19.2.14 <20",
-    "@xylabs/pixel": ">=5.1.1 <5.2",
-    "@xylabs/react-button": ">=7.2.3 <7.3",
-    "@xylabs/react-flexbox": ">=7.2.3 <7.3",
-    "@xylabs/sdk-js": ">=5.1.1 <6",
-    "async-mutex": ">=0.5.0 <1",
-    "bn.js": ">=5.2.3 <6",
-    "bowser": ">=2.14.1 <3",
-    "buffer": ">=6.0.3 <7",
-    "chalk": ">=5.6.2 <6",
-    "ethers": ">=6.16.0 <7",
-    "fast-deep-equal": ">=3.1.3 <3.2",
-    "js-cookie": ">=3.0.5 <3.1",
-    "mixpanel-browser": ">=2.78.0 <2.79",
-    "pako": ">=2.1.0 <3",
-    "query-string": ">=9.3.1 <9.4",
-    "react": ">=19.2.5 <20",
-    "react-dom": ">=19.2.5 <20",
-    "react-router-dom": ">=7.15.0 <8",
-    "spark-md5": ">=3.0.2 <3.1",
-    "zod": ">=4.4.3 <5"
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
+    "@opentelemetry/api": "^1.9",
+    "@opentelemetry/sdk-trace-base": "^2.7",
+    "@types/react": "^19.2",
+    "@xylabs/pixel": "~5.1",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/sdk-js": "^5.1",
+    "async-mutex": "^0.5",
+    "bn.js": "^5.2",
+    "bowser": "^2.14",
+    "buffer": "^6.0",
+    "chalk": "^5.6",
+    "ethers": "^6.16",
+    "fast-deep-equal": "~3.1",
+    "js-cookie": "~3.0",
+    "mixpanel-browser": "~2.78",
+    "pako": "^2.1",
+    "query-string": "~9.3",
+    "react": "^19.2",
+    "react-dom": "^19.2",
+    "react-router-dom": "^7.15",
+    "spark-md5": "~3.0",
+    "zod": "^4.4"
   },
   "publishConfig": {
     "access": "public"