@xyo-network/react-xns 7.6.3 → 8.0.0

package/dist/browser/components/XnsNameCapture/SecondaryLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryLink.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/SecondaryLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAIrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,0BAA0B,EAAE,0BAA0B,EAAE,2BAA2B,EACpF,MAAM,YAAY,CAAA;AAEnB,MAAM,MAAM,4BAA4B,GAAG,2BAA2B,GAAG,0BAA0B,GAAG,0BAA0B,GAAG,WAAW,GAAG;IAC/I,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAyC1E,CAAA"}
+{"version":3,"file":"SecondaryLink.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/SecondaryLink.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAIrD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EACV,0BAA0B,EAAE,0BAA0B,EAAE,2BAA2B,EACpF,MAAM,YAAY,CAAA;AAEnB,MAAM,MAAM,4BAA4B,GAAG,2BAA2B,GAAG,0BAA0B,GAAG,0BAA0B,GAAG,WAAW,GAAG;IAC/I,QAAQ,CAAC,EAAE,QAAQ,CAAC,KAAK,GAAG,SAAS,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CAkD1E,CAAA"}

package/dist/browser/components/XnsNameCapture/XnsNameCapture.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"XnsNameCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/XnsNameCapture.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAKpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGrD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoGxD,CAAA"}
+{"version":3,"file":"XnsNameCapture.d.ts","sourceRoot":"","sources":["../../../../src/components/XnsNameCapture/XnsNameCapture.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAgC,MAAM,OAAO,CAAA;AAKpD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAA;AAGrD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0GxD,CAAA"}

package/dist/browser/index.mjs

@@ -96,7 +96,7 @@ var XnsNameCaptureErrors = ({
       )
     }
   ) : (() => {
-    return /* @__PURE__ */ jsx2(FlexRow, { alignSelf: "stretch", children: /* @__PURE__ */ jsx2(
+    return /* @__PURE__ */ jsx2(FlexRow, { sx: { alignSelf: "stretch" }, children: /* @__PURE__ */ jsx2(
       Alert,
       {
         severity: "error",
@@ -172,8 +172,6 @@ var XnsCaptureSecondaryLink = ({
   return /* @__PURE__ */ jsx3(
     LinkEx,
     {
-      paddingX: 0,
-      color: "inherit",
       style: { textDecoration: "underline", textUnderlineOffset: "5px" },
       onClick: async () => {
         const formattedXnsName = `${xnsName}.xyo`;
@@ -192,10 +190,25 @@ var XnsCaptureSecondaryLink = ({
         }
       },
       ...props,
-      children: /* @__PURE__ */ jsxs(Stack, { flexDirection: "row", gap: 0.5, alignItems: "center", sx: { cursor: "pointer" }, children: [
-        text,
-        /* @__PURE__ */ jsx3(ArrowForwardRounded, {})
-      ] })
+      sx: [{
+        paddingX: 0,
+        color: "inherit"
+      }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          sx: {
+            flexDirection: "row",
+            gap: 0.5,
+            alignItems: "center",
+            cursor: "pointer"
+          },
+          children: [
+            text,
+            /* @__PURE__ */ jsx3(ArrowForwardRounded, {})
+          ]
+        }
+      )
     }
   );
 };
@@ -275,51 +288,61 @@ var XnsNameCapture = ({
       await onCaptureName?.();
     }
   }, [captureDisabled, onCaptureName]);
-  return /* @__PURE__ */ jsxs2(FlexCol, { gap: showSecondary ? 1.5 : 0, alignItems: "center", ...props, children: [
-    /* @__PURE__ */ jsxs2(FlexRow2, { gap: 1, children: [
-      /* @__PURE__ */ jsx4(
-        XnsEstimateNameTextField,
-        {
-          autoFocus,
-          disabled,
-          label: "xNS Name",
-          variant: "outlined",
-          size: "small",
-          value: xnsName ?? "",
-          onKeyDown,
-          onChange: handleChange,
-          onBlur: handleChange
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        ButtonEx,
-        {
-          disabled: captureDisabled,
-          funnel,
-          intent,
-          placement,
-          variant: "contained",
-          color: "success",
-          endIcon: /* @__PURE__ */ jsx4(KeyboardArrowRightRounded, {}),
-          onClick: onCaptureName,
-          children: isMobile ? mobileButtonText : buttonText
-        }
-      )
-    ] }),
-    showSecondary === true ? /* @__PURE__ */ jsx4(
-      XnsCaptureSecondaryLink,
-      {
-        xnsName,
-        placement,
-        funnel,
-        setError
-      }
-    ) : null,
-    // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary
-    showSecondary ? showSecondary : null,
-    children,
-    /* @__PURE__ */ jsx4(XnsNameCaptureErrors, { error, errorUi, resetError: () => setError(void 0) })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    FlexCol,
+    {
+      ...props,
+      sx: [{
+        gap: showSecondary ? 1.5 : 0,
+        alignItems: "center"
+      }, ...Array.isArray(props.sx) ? props.sx : [props.sx]],
+      children: [
+        /* @__PURE__ */ jsxs2(FlexRow2, { sx: { gap: 1 }, children: [
+          /* @__PURE__ */ jsx4(
+            XnsEstimateNameTextField,
+            {
+              autoFocus,
+              disabled,
+              label: "xNS Name",
+              variant: "outlined",
+              size: "small",
+              value: xnsName ?? "",
+              onKeyDown,
+              onChange: handleChange,
+              onBlur: handleChange
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            ButtonEx,
+            {
+              disabled: captureDisabled,
+              funnel,
+              intent,
+              placement,
+              variant: "contained",
+              endIcon: /* @__PURE__ */ jsx4(KeyboardArrowRightRounded, {}),
+              onClick: onCaptureName,
+              sx: { color: "success" },
+              children: isMobile ? mobileButtonText : buttonText
+            }
+          )
+        ] }),
+        showSecondary === true ? /* @__PURE__ */ jsx4(
+          XnsCaptureSecondaryLink,
+          {
+            xnsName,
+            placement,
+            funnel,
+            setError
+          }
+        ) : null,
+        // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary
+        showSecondary ? showSecondary : null,
+        children,
+        /* @__PURE__ */ jsx4(XnsNameCaptureErrors, { error, errorUi, resetError: () => setError(void 0) })
+      ]
+    }
+  );
 };
 
 // src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/EstimateName/EstimateNameTextField.tsx","../../src/components/XnsNameCapture/Errors.tsx","../../src/components/XnsNameCapture/hooks/routing/useXnsNameCaptureRouting.ts","../../src/components/XnsNameCapture/hooks/routing/useXnsNameFromLocation.ts","../../src/components/XnsNameCapture/SecondaryLink.tsx","../../src/components/XnsNameCapture/XnsNameCapture.tsx","../../src/components/XnsNameCapture/lib/navigateWithUsername.ts","../../src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx"],"sourcesContent":["import type { StandardTextFieldProps, TextFieldProps } from '@mui/material'\nimport { TextField, useTheme } from '@mui/material'\nimport { alphaCss } from '@xylabs/react-theme'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport React, {\n  useLayoutEffect,\n  useRef, useState,\n} from 'react'\n\nexport interface XnsEstimateNameTextFieldProps {\n  maskOutput?: boolean\n}\n\nexport const XnsEstimateNameTextField: React.FC<XnsEstimateNameTextFieldProps & TextFieldProps> = ({\n  maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, value, ...props\n}) => {\n  const theme = useTheme()\n  const [validLength, setValidLength] = useState(false)\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // watch for external changes to the value and update the validLength state\n  const [previousValue, setPreviousValue] = useState<unknown>(value)\n  if (value !== previousValue) {\n    setPreviousValue(value)\n    const validValueLength = !!(value && typeof value === 'string' && value.length >= MIN_DOMAIN_LENGTH)\n    setValidLength(validValueLength)\n  }\n\n  // Update the input value when the value prop changes\n  // The intent of this component is to remain uncontrolled to avoid the need to manage the value state\n  // Therefore, we use useLayoutEffect to update the input value directly.\n  useLayoutEffect(() => {\n    if (inputRef.current && typeof value === 'string') {\n      inputRef.current.value = value\n    }\n  }, [value])\n\n  // override onChange to mask the input and update the event value\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value)\n    }\n    onChangeProp?.(event)\n\n    if (inputRef.current) {\n      setValidLength(inputRef.current.value.length >= MIN_DOMAIN_LENGTH)\n    }\n  }\n\n  // override onBlur to do a final mask of the input and update the event value\n  const handleBlur: StandardTextFieldProps['onBlur'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value, { maskStartEndHyphens: true })\n    }\n    onBlurProp?.(event)\n  }\n\n  return (\n    <TextField\n      inputRef={inputRef}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      {...props}\n      slotProps={{ htmlInput: { style: { color: validLength ? theme.vars.palette.text.primary : alphaCss(theme.vars.palette.text.primary, 0.5) } } }}\n    />\n  )\n}\n","import {\n  Alert, Snackbar, useMediaQuery, useTheme,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface XnsNameCaptureErrorsProps {\n  error?: Error\n  errorUi?: 'alert' | 'toast'\n  resetError?: () => void\n}\n\nexport const XnsNameCaptureErrors: React.FC<XnsNameCaptureErrorsProps> = ({\n  error, errorUi, resetError,\n}) => {\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  return (\n    <>\n      {(errorUi === 'toast')\n        ? (\n            <Snackbar\n              open={!!error}\n              message={error?.toString()}\n              autoHideDuration={3000}\n              onClose={() => resetError?.()}\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n            >\n              <Alert\n                severity=\"error\"\n                sx={{\n                  width: '100%', display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden',\n                }}\n              >\n                {error?.message}\n              </Alert>\n            </Snackbar>\n          )\n        // eslint-disable-next-line react-x/unsupported-syntax\n        : (() => {\n            // setTimeout(() => setError(undefined), 1500)\n            return (\n              <FlexRow alignSelf=\"stretch\">\n                <Alert\n                  severity=\"error\"\n                  sx={{ display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden' }}\n                >\n                  {error?.message}\n                </Alert>\n              </FlexRow>\n            )\n          })()}\n    </>\n  )\n}\n","import { useMemo } from 'react'\nimport { useNavigate, useSearchParams } from 'react-router-dom'\n\nimport type { XnsNameCaptureProps } from '../../Props.ts'\nimport { useXnsNameFromLocation } from './useXnsNameFromLocation.ts'\n\nexport const useXnsNameCaptureRouting = (props: XnsNameCaptureProps): XnsNameCaptureProps => {\n  const [params] = useSearchParams()\n\n  const navigate = useNavigate()\n\n  const [name, error] = useXnsNameFromLocation()\n\n  return useMemo(() => ({\n    ...props,\n    defaultXnsName: name,\n    routingError: error,\n    navigate: props.navigate ?? ((to: string) => navigate(to)),\n    paramsString: props.paramsString ? `${props.paramsString}${params.toString()}` : params.toString(),\n  }), [props, name, error, params, navigate])\n}\n","import { useLocation } from 'react-router-dom'\n\n/**\n * Assumes the user was redirected with a link that contains a username query parameter.\n * @returns The xNS name from the URI username query parameter.\n */\nexport const useXnsNameFromLocation = (): [name: string | undefined, error: Error | undefined] => {\n  const location = useLocation()\n  const search = new URLSearchParams(location.search)\n  const rawName = (search.get('xnsname') ?? search.get('name') ?? search.get('username') ?? '').toLowerCase()\n  switch (rawName?.split('.').length) {\n    case 1: {\n      return [rawName, undefined]\n    }\n    case 2: {\n      const rawNameParts = rawName.split('.')\n      if (rawNameParts[1] !== 'xyo') {\n        return [undefined, new Error('Invalid xNS name [Bad root]')]\n      }\n      return [rawNameParts[0], undefined]\n    }\n    default: {\n      return [undefined, new Error('Invalid xNS name [Too many parts]')]\n    }\n  }\n}\n","import { ArrowForwardRounded } from '@mui/icons-material'\nimport { Stack } from '@mui/material'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { Dispatch } from 'react'\nimport React from 'react'\n\nimport type {\n  XnsNameCaptureBuyCallbacks, XnsNameCaptureRoutingProps, XnsNameCaptureTrackingProps,\n} from './Props.ts'\n\nexport type XnsCaptureSecondaryLinkProps = XnsNameCaptureTrackingProps & XnsNameCaptureRoutingProps & XnsNameCaptureBuyCallbacks & LinkExProps & {\n  setError?: Dispatch<Error | undefined>\n  text?: string\n  xnsName: string\n}\n\nexport const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = ({\n  funnel = 'xns',\n  navigate,\n  onCaptureName,\n  paramsString = '',\n  intent,\n  placement = '',\n  setError,\n  text = 'Or make a free reservation',\n  to = '/xns/reservation',\n  xnsName,\n  ...props\n}) => {\n  const userEvents = useUserEvents('warn')\n  return (\n    <LinkEx\n      paddingX={0}\n      color=\"inherit\"\n      style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}\n      onClick={async () => {\n        const formattedXnsName = `${xnsName}.xyo`\n        const helper = XnsNameHelper.fromString(formattedXnsName)\n        const [valid, errors] = await helper.validate()\n        if (valid) {\n          await userEvents?.userClick({\n            funnel, placement, intent,\n          })\n          navigate?.(`${to}?username=${xnsName}${paramsString}`)\n          await onCaptureName?.(xnsName)\n        } else {\n          setError?.(new Error(errors.join(', ')))\n        }\n      }}\n      {...props}\n    >\n      <Stack flexDirection=\"row\" gap={0.5} alignItems=\"center\" sx={{ cursor: 'pointer' }}>\n        {text}\n        <ArrowForwardRounded />\n      </Stack>\n    </LinkEx>\n  )\n}\n","import { KeyboardArrowRightRounded } from '@mui/icons-material'\nimport type { StandardTextFieldProps } from '@mui/material'\nimport { useMediaQuery, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { KeyboardEventHandler } from 'react'\nimport React, { useCallback, useState } from 'react'\n\nimport { XnsEstimateNameTextField } from '../EstimateName/index.ts'\nimport { XnsNameCaptureErrors } from './Errors.tsx'\nimport { navigateWithUsername } from './lib/index.ts'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsCaptureSecondaryLink } from './SecondaryLink.js'\n\nexport const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({\n  autoFocus = false,\n  buttonText = 'Buy My Name',\n  children,\n  defaultXnsName,\n  disabled,\n  errorUi = 'alert',\n  funnel = 'xns',\n  intent = 'unset',\n  mobileButtonText = 'Buy',\n  navigate,\n  onCaptureName: onCaptureNameProp,\n  onNameChange,\n  paramsString = '',\n  placement = '',\n  routingError,\n  showSecondary = false,\n  to = '/xns/estimation',\n  ...props\n}) => {\n  const [xnsName, setXnsName] = useState<string>(() => defaultXnsName ?? '')\n  const [error, setError] = useState<Error | undefined>(routingError)\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  const captureDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH\n\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    const NsName = XnsNameHelper.mask(event.target.value)\n    onNameChange?.(NsName)\n    setXnsName(NsName)\n    setError(undefined)\n  }\n\n  const onCaptureName = useCallback(async () => {\n    if (captureDisabled) return\n    const formattedXnsName = `${xnsName}.xyo`\n    const helper = XnsNameHelper.fromString(formattedXnsName)\n    const [valid, errors] = await helper.validate()\n    if (valid) {\n      await onCaptureNameProp?.(xnsName)\n\n      navigateWithUsername(xnsName, paramsString, navigate, to)\n    } else {\n      setError(new Error(errors.join(', ')))\n    }\n  }, [captureDisabled, xnsName, onCaptureNameProp, paramsString, navigate, to])\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {\n    if (event.key === 'Enter' && !captureDisabled) {\n      await onCaptureName?.()\n    }\n  }, [captureDisabled, onCaptureName])\n\n  return (\n    <FlexCol gap={showSecondary ? 1.5 : 0} alignItems=\"center\" {...props}>\n      <FlexRow gap={1}>\n        <XnsEstimateNameTextField\n          autoFocus={autoFocus}\n          disabled={disabled}\n          label=\"xNS Name\"\n          variant=\"outlined\"\n          size=\"small\"\n          value={xnsName ?? ''}\n          onKeyDown={onKeyDown}\n          onChange={handleChange}\n          onBlur={handleChange}\n        />\n        <ButtonEx\n          disabled={captureDisabled}\n          funnel={funnel}\n          intent={intent}\n          placement={placement}\n          variant=\"contained\"\n          color=\"success\"\n          endIcon={<KeyboardArrowRightRounded />}\n          onClick={onCaptureName}\n        >\n          {isMobile ? mobileButtonText : buttonText}\n        </ButtonEx>\n      </FlexRow>\n      {(showSecondary === true)\n        ? (\n            <XnsCaptureSecondaryLink\n              xnsName={xnsName}\n              placement={placement}\n              funnel={funnel}\n              setError={setError}\n            />\n          )\n        : null}\n      {\n        // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary\n        showSecondary ? showSecondary : null\n      }\n      {children}\n      <XnsNameCaptureErrors error={error} errorUi={errorUi} resetError={() => setError(undefined)} />\n    </FlexCol>\n  )\n}\n","import type { To } from 'react-router-dom'\n\nexport const navigateWithUsername = (xnsName: string, paramsString: string, navigate?: ((to: string) => void), to?: To) => {\n  // avoid duplicating the username param\n  const params = new URLSearchParams(paramsString)\n  const usernameParam = params.get('username')\n  if (usernameParam) {\n    // if username param is the same as the xnsName, navigate\n    if (usernameParam === xnsName) {\n      navigate?.(`${to}?${paramsString}`)\n    }\n    if (usernameParam !== xnsName) {\n      // if username param is different, replace it\n      params.set('username', xnsName)\n      navigate?.(`${to}?${params.toString()}`)\n    }\n  } else {\n    // if no username param, include it\n    navigate?.(`${to}?username=${xnsName}&${paramsString}`)\n  }\n}\n","import React, { useMemo } from 'react'\n\nimport { useXnsNameCaptureRouting } from './hooks/index.ts'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsNameCapture } from './XnsNameCapture.tsx'\n\nexport const XnsNameCaptureWithContext: React.FC<XnsNameCaptureProps> = (props) => {\n  const routingProps = useXnsNameCaptureRouting(props)\n\n  const updatedProps = useMemo<XnsNameCaptureProps>(() => ({\n    ...props,\n    ...routingProps,\n  }), [routingProps, props])\n\n  return (\n    <XnsNameCapture {...updatedProps} />\n  )\n}\n"],"mappings":"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","names":["value","useTheme","jsx","XnsNameHelper","jsx","useMediaQuery","useTheme","FlexRow","MIN_DOMAIN_LENGTH","XnsNameHelper","useState","jsx","jsxs","useState","useTheme","useMediaQuery","MIN_DOMAIN_LENGTH","XnsNameHelper","FlexRow","useMemo","jsx","useMemo"]}
+{"version":3,"sources":["../../src/components/EstimateName/EstimateNameTextField.tsx","../../src/components/XnsNameCapture/Errors.tsx","../../src/components/XnsNameCapture/hooks/routing/useXnsNameCaptureRouting.ts","../../src/components/XnsNameCapture/hooks/routing/useXnsNameFromLocation.ts","../../src/components/XnsNameCapture/SecondaryLink.tsx","../../src/components/XnsNameCapture/XnsNameCapture.tsx","../../src/components/XnsNameCapture/lib/navigateWithUsername.ts","../../src/components/XnsNameCapture/XnsNameCaptureWithContext.tsx"],"sourcesContent":["import type { StandardTextFieldProps, TextFieldProps } from '@mui/material'\nimport { TextField, useTheme } from '@mui/material'\nimport { alphaCss } from '@xylabs/react-theme'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport React, {\n  useLayoutEffect,\n  useRef, useState,\n} from 'react'\n\nexport interface XnsEstimateNameTextFieldProps {\n  maskOutput?: boolean\n}\n\nexport const XnsEstimateNameTextField: React.FC<XnsEstimateNameTextFieldProps & TextFieldProps> = ({\n  maskOutput = true, onChange: onChangeProp, onBlur: onBlurProp, value, ...props\n}) => {\n  const theme = useTheme()\n  const [validLength, setValidLength] = useState(false)\n\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // watch for external changes to the value and update the validLength state\n  const [previousValue, setPreviousValue] = useState<unknown>(value)\n  if (value !== previousValue) {\n    setPreviousValue(value)\n    const validValueLength = !!(value && typeof value === 'string' && value.length >= MIN_DOMAIN_LENGTH)\n    setValidLength(validValueLength)\n  }\n\n  // Update the input value when the value prop changes\n  // The intent of this component is to remain uncontrolled to avoid the need to manage the value state\n  // Therefore, we use useLayoutEffect to update the input value directly.\n  useLayoutEffect(() => {\n    if (inputRef.current && typeof value === 'string') {\n      inputRef.current.value = value\n    }\n  }, [value])\n\n  // override onChange to mask the input and update the event value\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value)\n    }\n    onChangeProp?.(event)\n\n    if (inputRef.current) {\n      setValidLength(inputRef.current.value.length >= MIN_DOMAIN_LENGTH)\n    }\n  }\n\n  // override onBlur to do a final mask of the input and update the event value\n  const handleBlur: StandardTextFieldProps['onBlur'] = (event) => {\n    if (maskOutput) {\n      const value = event.target.value\n      event.target.value = XnsNameHelper.mask(value, { maskStartEndHyphens: true })\n    }\n    onBlurProp?.(event)\n  }\n\n  return (\n    <TextField\n      inputRef={inputRef}\n      onBlur={handleBlur}\n      onChange={handleChange}\n      {...props}\n      slotProps={{ htmlInput: { style: { color: validLength ? theme.vars.palette.text.primary : alphaCss(theme.vars.palette.text.primary, 0.5) } } }}\n    />\n  )\n}\n","import {\n  Alert, Snackbar, useMediaQuery, useTheme,\n} from '@mui/material'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React from 'react'\n\nexport interface XnsNameCaptureErrorsProps {\n  error?: Error\n  errorUi?: 'alert' | 'toast'\n  resetError?: () => void\n}\n\nexport const XnsNameCaptureErrors: React.FC<XnsNameCaptureErrorsProps> = ({\n  error, errorUi, resetError,\n}) => {\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  return (\n    <>\n      {(errorUi === 'toast')\n        ? (\n            <Snackbar\n              open={!!error}\n              message={error?.toString()}\n              autoHideDuration={3000}\n              onClose={() => resetError?.()}\n              anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n            >\n              <Alert\n                severity=\"error\"\n                sx={{\n                  width: '100%', display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden',\n                }}\n              >\n                {error?.message}\n              </Alert>\n            </Snackbar>\n          )\n        // eslint-disable-next-line react-x/unsupported-syntax\n        : (() => {\n            // setTimeout(() => setError(undefined), 1500)\n            return (\n              <FlexRow sx={{ alignSelf: 'stretch' }}>\n                <Alert\n                  severity=\"error\"\n                  sx={{ display: (isMobile && !error) ? 'none' : undefined, visibility: error ? 'visible' : 'hidden' }}\n                >\n                  {error?.message}\n                </Alert>\n              </FlexRow>\n            )\n          })()}\n    </>\n  )\n}\n","import { useMemo } from 'react'\nimport { useNavigate, useSearchParams } from 'react-router-dom'\n\nimport type { XnsNameCaptureProps } from '../../Props.ts'\nimport { useXnsNameFromLocation } from './useXnsNameFromLocation.ts'\n\nexport const useXnsNameCaptureRouting = (props: XnsNameCaptureProps): XnsNameCaptureProps => {\n  const [params] = useSearchParams()\n\n  const navigate = useNavigate()\n\n  const [name, error] = useXnsNameFromLocation()\n\n  return useMemo(() => ({\n    ...props,\n    defaultXnsName: name,\n    routingError: error,\n    navigate: props.navigate ?? ((to: string) => navigate(to)),\n    paramsString: props.paramsString ? `${props.paramsString}${params.toString()}` : params.toString(),\n  }), [props, name, error, params, navigate])\n}\n","import { useLocation } from 'react-router-dom'\n\n/**\n * Assumes the user was redirected with a link that contains a username query parameter.\n * @returns The xNS name from the URI username query parameter.\n */\nexport const useXnsNameFromLocation = (): [name: string | undefined, error: Error | undefined] => {\n  const location = useLocation()\n  const search = new URLSearchParams(location.search)\n  const rawName = (search.get('xnsname') ?? search.get('name') ?? search.get('username') ?? '').toLowerCase()\n  switch (rawName?.split('.').length) {\n    case 1: {\n      return [rawName, undefined]\n    }\n    case 2: {\n      const rawNameParts = rawName.split('.')\n      if (rawNameParts[1] !== 'xyo') {\n        return [undefined, new Error('Invalid xNS name [Bad root]')]\n      }\n      return [rawNameParts[0], undefined]\n    }\n    default: {\n      return [undefined, new Error('Invalid xNS name [Too many parts]')]\n    }\n  }\n}\n","import { ArrowForwardRounded } from '@mui/icons-material'\nimport { Stack } from '@mui/material'\nimport type { LinkExProps } from '@xylabs/react-link'\nimport { LinkEx } from '@xylabs/react-link'\nimport { useUserEvents } from '@xylabs/react-pixel'\nimport { XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { Dispatch } from 'react'\nimport React from 'react'\n\nimport type {\n  XnsNameCaptureBuyCallbacks, XnsNameCaptureRoutingProps, XnsNameCaptureTrackingProps,\n} from './Props.ts'\n\nexport type XnsCaptureSecondaryLinkProps = XnsNameCaptureTrackingProps & XnsNameCaptureRoutingProps & XnsNameCaptureBuyCallbacks & LinkExProps & {\n  setError?: Dispatch<Error | undefined>\n  text?: string\n  xnsName: string\n}\n\nexport const XnsCaptureSecondaryLink: React.FC<XnsCaptureSecondaryLinkProps> = ({\n  funnel = 'xns',\n  navigate,\n  onCaptureName,\n  paramsString = '',\n  intent,\n  placement = '',\n  setError,\n  text = 'Or make a free reservation',\n  to = '/xns/reservation',\n  xnsName,\n  ...props\n}) => {\n  const userEvents = useUserEvents('warn')\n  return (\n    <LinkEx\n      style={{ textDecoration: 'underline', textUnderlineOffset: '5px' }}\n      onClick={async () => {\n        const formattedXnsName = `${xnsName}.xyo`\n        const helper = XnsNameHelper.fromString(formattedXnsName)\n        const [valid, errors] = await helper.validate()\n        if (valid) {\n          await userEvents?.userClick({\n            funnel, placement, intent,\n          })\n          navigate?.(`${to}?username=${xnsName}${paramsString}`)\n          await onCaptureName?.(xnsName)\n        } else {\n          setError?.(new Error(errors.join(', ')))\n        }\n      }}\n      {...props}\n      sx={[{\n        paddingX: 0,\n        color: 'inherit',\n      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n    >\n      <Stack\n        sx={{\n          flexDirection: 'row',\n          gap: 0.5,\n          alignItems: 'center',\n          cursor: 'pointer',\n        }}\n      >\n        {text}\n        <ArrowForwardRounded />\n      </Stack>\n    </LinkEx>\n  )\n}\n","import { KeyboardArrowRightRounded } from '@mui/icons-material'\nimport type { StandardTextFieldProps } from '@mui/material'\nimport { useMediaQuery, useTheme } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { MIN_DOMAIN_LENGTH, XnsNameHelper } from '@xyo-network/xns-record-payloadset-plugins'\nimport type { KeyboardEventHandler } from 'react'\nimport React, { useCallback, useState } from 'react'\n\nimport { XnsEstimateNameTextField } from '../EstimateName/index.ts'\nimport { XnsNameCaptureErrors } from './Errors.tsx'\nimport { navigateWithUsername } from './lib/index.ts'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsCaptureSecondaryLink } from './SecondaryLink.js'\n\nexport const XnsNameCapture: React.FC<XnsNameCaptureProps> = ({\n  autoFocus = false,\n  buttonText = 'Buy My Name',\n  children,\n  defaultXnsName,\n  disabled,\n  errorUi = 'alert',\n  funnel = 'xns',\n  intent = 'unset',\n  mobileButtonText = 'Buy',\n  navigate,\n  onCaptureName: onCaptureNameProp,\n  onNameChange,\n  paramsString = '',\n  placement = '',\n  routingError,\n  showSecondary = false,\n  to = '/xns/estimation',\n  ...props\n}) => {\n  const [xnsName, setXnsName] = useState<string>(() => defaultXnsName ?? '')\n  const [error, setError] = useState<Error | undefined>(routingError)\n\n  const theme = useTheme()\n  const isMobile = useMediaQuery(theme.breakpoints.down('md'))\n\n  const captureDisabled = !xnsName || xnsName.length < MIN_DOMAIN_LENGTH\n\n  const handleChange: StandardTextFieldProps['onChange'] = (event) => {\n    const NsName = XnsNameHelper.mask(event.target.value)\n    onNameChange?.(NsName)\n    setXnsName(NsName)\n    setError(undefined)\n  }\n\n  const onCaptureName = useCallback(async () => {\n    if (captureDisabled) return\n    const formattedXnsName = `${xnsName}.xyo`\n    const helper = XnsNameHelper.fromString(formattedXnsName)\n    const [valid, errors] = await helper.validate()\n    if (valid) {\n      await onCaptureNameProp?.(xnsName)\n\n      navigateWithUsername(xnsName, paramsString, navigate, to)\n    } else {\n      setError(new Error(errors.join(', ')))\n    }\n  }, [captureDisabled, xnsName, onCaptureNameProp, paramsString, navigate, to])\n\n  const onKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(async (event) => {\n    if (event.key === 'Enter' && !captureDisabled) {\n      await onCaptureName?.()\n    }\n  }, [captureDisabled, onCaptureName])\n\n  return (\n    <FlexCol\n      {...props}\n      sx={[{\n        gap: showSecondary ? 1.5 : 0,\n        alignItems: 'center',\n      }, ...(Array.isArray(props.sx) ? props.sx : [props.sx])]}\n    >\n      <FlexRow sx={{ gap: 1 }}>\n        <XnsEstimateNameTextField\n          autoFocus={autoFocus}\n          disabled={disabled}\n          label=\"xNS Name\"\n          variant=\"outlined\"\n          size=\"small\"\n          value={xnsName ?? ''}\n          onKeyDown={onKeyDown}\n          onChange={handleChange}\n          onBlur={handleChange}\n        />\n        <ButtonEx\n          disabled={captureDisabled}\n          funnel={funnel}\n          intent={intent}\n          placement={placement}\n          variant=\"contained\"\n          endIcon={<KeyboardArrowRightRounded />}\n          onClick={onCaptureName}\n          sx={{ color: 'success' }}\n        >\n          {isMobile ? mobileButtonText : buttonText}\n        </ButtonEx>\n      </FlexRow>\n      {(showSecondary === true)\n        ? (\n            <XnsCaptureSecondaryLink\n              xnsName={xnsName}\n              placement={placement}\n              funnel={funnel}\n              setError={setError}\n            />\n          )\n        : null}\n      {\n        // eslint-disable-next-line unicorn/prefer-logical-operator-over-ternary\n        showSecondary ? showSecondary : null\n      }\n      {children}\n      <XnsNameCaptureErrors error={error} errorUi={errorUi} resetError={() => setError(undefined)} />\n    </FlexCol>\n  )\n}\n","import type { To } from 'react-router-dom'\n\nexport const navigateWithUsername = (xnsName: string, paramsString: string, navigate?: ((to: string) => void), to?: To) => {\n  // avoid duplicating the username param\n  const params = new URLSearchParams(paramsString)\n  const usernameParam = params.get('username')\n  if (usernameParam) {\n    // if username param is the same as the xnsName, navigate\n    if (usernameParam === xnsName) {\n      navigate?.(`${to}?${paramsString}`)\n    }\n    if (usernameParam !== xnsName) {\n      // if username param is different, replace it\n      params.set('username', xnsName)\n      navigate?.(`${to}?${params.toString()}`)\n    }\n  } else {\n    // if no username param, include it\n    navigate?.(`${to}?username=${xnsName}&${paramsString}`)\n  }\n}\n","import React, { useMemo } from 'react'\n\nimport { useXnsNameCaptureRouting } from './hooks/index.ts'\nimport type { XnsNameCaptureProps } from './Props.ts'\nimport { XnsNameCapture } from './XnsNameCapture.tsx'\n\nexport const XnsNameCaptureWithContext: React.FC<XnsNameCaptureProps> = (props) => {\n  const routingProps = useXnsNameCaptureRouting(props)\n\n  const updatedProps = useMemo<XnsNameCaptureProps>(() => ({\n    ...props,\n    ...routingProps,\n  }), [routingProps, props])\n\n  return (\n    <XnsNameCapture {...updatedProps} />\n  )\n}\n"],"mappings":";AACA,SAAS,WAAW,gBAAgB;AACpC,SAAS,gBAAgB;AACzB,SAAS,mBAAmB,qBAAqB;AACjD;AAAA,EACE;AAAA,EACA;AAAA,EAAQ;AAAA,OACH;AAsDH;AAhDG,IAAM,2BAAqF,CAAC;AAAA,EACjG,aAAa;AAAA,EAAM,UAAU;AAAA,EAAc,QAAQ;AAAA,EAAY;AAAA,EAAO,GAAG;AAC3E,MAAM;AACJ,QAAM,QAAQ,SAAS;AACvB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,WAAW,OAAyB,IAAI;AAG9C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAkB,KAAK;AACjE,MAAI,UAAU,eAAe;AAC3B,qBAAiB,KAAK;AACtB,UAAM,mBAAmB,CAAC,EAAE,SAAS,OAAO,UAAU,YAAY,MAAM,UAAU;AAClF,mBAAe,gBAAgB;AAAA,EACjC;AAKA,kBAAgB,MAAM;AACpB,QAAI,SAAS,WAAW,OAAO,UAAU,UAAU;AACjD,eAAS,QAAQ,QAAQ;AAAA,IAC3B;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAGV,QAAM,eAAmD,CAAC,UAAU;AAClE,QAAI,YAAY;AACd,YAAMA,SAAQ,MAAM,OAAO;AAC3B,YAAM,OAAO,QAAQ,cAAc,KAAKA,MAAK;AAAA,IAC/C;AACA,mBAAe,KAAK;AAEpB,QAAI,SAAS,SAAS;AACpB,qBAAe,SAAS,QAAQ,MAAM,UAAU,iBAAiB;AAAA,IACnE;AAAA,EACF;AAGA,QAAM,aAA+C,CAAC,UAAU;AAC9D,QAAI,YAAY;AACd,YAAMA,SAAQ,MAAM,OAAO;AAC3B,YAAM,OAAO,QAAQ,cAAc,KAAKA,QAAO,EAAE,qBAAqB,KAAK,CAAC;AAAA,IAC9E;AACA,iBAAa,KAAK;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,QAAQ;AAAA,MACR,UAAU;AAAA,MACT,GAAG;AAAA,MACJ,WAAW,EAAE,WAAW,EAAE,OAAO,EAAE,OAAO,cAAc,MAAM,KAAK,QAAQ,KAAK,UAAU,SAAS,MAAM,KAAK,QAAQ,KAAK,SAAS,GAAG,EAAE,EAAE,EAAE;AAAA;AAAA,EAC/I;AAEJ;;;ACrEA;AAAA,EACE;AAAA,EAAO;AAAA,EAAU;AAAA,EAAe,YAAAC;AAAA,OAC3B;AACP,SAAS,eAAe;AAgBpB,mBAUU,OAAAC,YAVV;AAPG,IAAM,uBAA4D,CAAC;AAAA,EACxE;AAAA,EAAO;AAAA,EAAS;AAClB,MAAM;AACJ,QAAM,QAAQD,UAAS;AACvB,QAAM,WAAW,cAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAE3D,SACE,gBAAAC,KAAA,YACI,sBAAY,UAER,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,CAAC,CAAC;AAAA,MACR,SAAS,OAAO,SAAS;AAAA,MACzB,kBAAkB;AAAA,MAClB,SAAS,MAAM,aAAa;AAAA,MAC5B,cAAc,EAAE,UAAU,UAAU,YAAY,SAAS;AAAA,MAEzD,0BAAAA;AAAA,QAAC;AAAA;AAAA,UACC,UAAS;AAAA,UACT,IAAI;AAAA,YACF,OAAO;AAAA,YAAQ,SAAU,YAAY,CAAC,QAAS,SAAS;AAAA,YAAW,YAAY,QAAQ,YAAY;AAAA,UACrG;AAAA,UAEC,iBAAO;AAAA;AAAA,MACV;AAAA;AAAA,EACF,KAGD,MAAM;AAEL,WACE,gBAAAA,KAAC,WAAQ,IAAI,EAAE,WAAW,UAAU,GAClC,0BAAAA;AAAA,MAAC;AAAA;AAAA,QACC,UAAS;AAAA,QACT,IAAI,EAAE,SAAU,YAAY,CAAC,QAAS,SAAS,QAAW,YAAY,QAAQ,YAAY,SAAS;AAAA,QAElG,iBAAO;AAAA;AAAA,IACV,GACF;AAAA,EAEJ,GAAG,GACT;AAEJ;;;ACvDA,SAAS,eAAe;AACxB,SAAS,aAAa,uBAAuB;;;ACD7C,SAAS,mBAAmB;AAMrB,IAAM,yBAAyB,MAA4D;AAChG,QAAM,WAAW,YAAY;AAC7B,QAAM,SAAS,IAAI,gBAAgB,SAAS,MAAM;AAClD,QAAM,WAAW,OAAO,IAAI,SAAS,KAAK,OAAO,IAAI,MAAM,KAAK,OAAO,IAAI,UAAU,KAAK,IAAI,YAAY;AAC1G,UAAQ,SAAS,MAAM,GAAG,EAAE,QAAQ;AAAA,IAClC,KAAK,GAAG;AACN,aAAO,CAAC,SAAS,MAAS;AAAA,IAC5B;AAAA,IACA,KAAK,GAAG;AACN,YAAM,eAAe,QAAQ,MAAM,GAAG;AACtC,UAAI,aAAa,CAAC,MAAM,OAAO;AAC7B,eAAO,CAAC,QAAW,IAAI,MAAM,6BAA6B,CAAC;AAAA,MAC7D;AACA,aAAO,CAAC,aAAa,CAAC,GAAG,MAAS;AAAA,IACpC;AAAA,IACA,SAAS;AACP,aAAO,CAAC,QAAW,IAAI,MAAM,mCAAmC,CAAC;AAAA,IACnE;AAAA,EACF;AACF;;;ADnBO,IAAM,2BAA2B,CAAC,UAAoD;AAC3F,QAAM,CAAC,MAAM,IAAI,gBAAgB;AAEjC,QAAM,WAAW,YAAY;AAE7B,QAAM,CAAC,MAAM,KAAK,IAAI,uBAAuB;AAE7C,SAAO,QAAQ,OAAO;AAAA,IACpB,GAAG;AAAA,IACH,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,UAAU,MAAM,aAAa,CAAC,OAAe,SAAS,EAAE;AAAA,IACxD,cAAc,MAAM,eAAe,GAAG,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,KAAK,OAAO,SAAS;AAAA,EACnG,IAAI,CAAC,OAAO,MAAM,OAAO,QAAQ,QAAQ,CAAC;AAC5C;;;AEpBA,SAAS,2BAA2B;AACpC,SAAS,aAAa;AAEtB,SAAS,cAAc;AACvB,SAAS,qBAAqB;AAC9B,SAAS,iBAAAC,sBAAqB;AAmDxB,SASE,OAAAC,MATF;AArCC,IAAM,0BAAkE,CAAC;AAAA,EAC9E,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,MAAM;AACJ,QAAM,aAAa,cAAc,MAAM;AACvC,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,gBAAgB,aAAa,qBAAqB,MAAM;AAAA,MACjE,SAAS,YAAY;AACnB,cAAM,mBAAmB,GAAG,OAAO;AACnC,cAAM,SAASD,eAAc,WAAW,gBAAgB;AACxD,cAAM,CAAC,OAAO,MAAM,IAAI,MAAM,OAAO,SAAS;AAC9C,YAAI,OAAO;AACT,gBAAM,YAAY,UAAU;AAAA,YAC1B;AAAA,YAAQ;AAAA,YAAW;AAAA,UACrB,CAAC;AACD,qBAAW,GAAG,EAAE,aAAa,OAAO,GAAG,YAAY,EAAE;AACrD,gBAAM,gBAAgB,OAAO;AAAA,QAC/B,OAAO;AACL,qBAAW,IAAI,MAAM,OAAO,KAAK,IAAI,CAAC,CAAC;AAAA,QACzC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,IAAI,CAAC;AAAA,QACH,UAAU;AAAA,QACV,OAAO;AAAA,MACT,GAAG,GAAI,MAAM,QAAQ,MAAM,EAAE,IAAI,MAAM,KAAK,CAAC,MAAM,EAAE,CAAE;AAAA,MAEvD;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,YACF,eAAe;AAAA,YACf,KAAK;AAAA,YACL,YAAY;AAAA,YACZ,QAAQ;AAAA,UACV;AAAA,UAEC;AAAA;AAAA,YACD,gBAAAC,KAAC,uBAAoB;AAAA;AAAA;AAAA,MACvB;AAAA;AAAA,EACF;AAEJ;;;ACrEA,SAAS,iCAAiC;AAE1C,SAAS,iBAAAC,gBAAe,YAAAC,iBAAgB;AACxC,SAAS,gBAAgB;AACzB,SAAS,SAAS,WAAAC,gBAAe;AACjC,SAAS,qBAAAC,oBAAmB,iBAAAC,sBAAqB;AAEjD,SAAgB,aAAa,YAAAC,iBAAgB;;;ACLtC,IAAM,uBAAuB,CAAC,SAAiB,cAAsB,UAAmC,OAAY;AAEzH,QAAM,SAAS,IAAI,gBAAgB,YAAY;AAC/C,QAAM,gBAAgB,OAAO,IAAI,UAAU;AAC3C,MAAI,eAAe;AAEjB,QAAI,kBAAkB,SAAS;AAC7B,iBAAW,GAAG,EAAE,IAAI,YAAY,EAAE;AAAA,IACpC;AACA,QAAI,kBAAkB,SAAS;AAE7B,aAAO,IAAI,YAAY,OAAO;AAC9B,iBAAW,GAAG,EAAE,IAAI,OAAO,SAAS,CAAC,EAAE;AAAA,IACzC;AAAA,EACF,OAAO;AAEL,eAAW,GAAG,EAAE,aAAa,OAAO,IAAI,YAAY,EAAE;AAAA,EACxD;AACF;;;AD0DM,SACE,OAAAC,MADF,QAAAC,aAAA;AA/DC,IAAM,iBAAgD,CAAC;AAAA,EAC5D,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,eAAe;AAAA,EACf,YAAY;AAAA,EACZ;AAAA,EACA,gBAAgB;AAAA,EAChB,KAAK;AAAA,EACL,GAAG;AACL,MAAM;AACJ,QAAM,CAAC,SAAS,UAAU,IAAIC,UAAiB,MAAM,kBAAkB,EAAE;AACzE,QAAM,CAAC,OAAO,QAAQ,IAAIA,UAA4B,YAAY;AAElE,QAAM,QAAQC,UAAS;AACvB,QAAM,WAAWC,eAAc,MAAM,YAAY,KAAK,IAAI,CAAC;AAE3D,QAAM,kBAAkB,CAAC,WAAW,QAAQ,SAASC;AAErD,QAAM,eAAmD,CAAC,UAAU;AAClE,UAAM,SAASC,eAAc,KAAK,MAAM,OAAO,KAAK;AACpD,mBAAe,MAAM;AACrB,eAAW,MAAM;AACjB,aAAS,MAAS;AAAA,EACpB;AAEA,QAAM,gBAAgB,YAAY,YAAY;AAC5C,QAAI,gBAAiB;AACrB,UAAM,mBAAmB,GAAG,OAAO;AACnC,UAAM,SAASA,eAAc,WAAW,gBAAgB;AACxD,UAAM,CAAC,OAAO,MAAM,IAAI,MAAM,OAAO,SAAS;AAC9C,QAAI,OAAO;AACT,YAAM,oBAAoB,OAAO;AAEjC,2BAAqB,SAAS,cAAc,UAAU,EAAE;AAAA,IAC1D,OAAO;AACL,eAAS,IAAI,MAAM,OAAO,KAAK,IAAI,CAAC,CAAC;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,iBAAiB,SAAS,mBAAmB,cAAc,UAAU,EAAE,CAAC;AAE5E,QAAM,YAAkD,YAAY,OAAO,UAAU;AACnF,QAAI,MAAM,QAAQ,WAAW,CAAC,iBAAiB;AAC7C,YAAM,gBAAgB;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,iBAAiB,aAAa,CAAC;AAEnC,SACE,gBAAAL;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI,CAAC;AAAA,QACH,KAAK,gBAAgB,MAAM;AAAA,QAC3B,YAAY;AAAA,MACd,GAAG,GAAI,MAAM,QAAQ,MAAM,EAAE,IAAI,MAAM,KAAK,CAAC,MAAM,EAAE,CAAE;AAAA,MAEvD;AAAA,wBAAAA,MAACM,UAAA,EAAQ,IAAI,EAAE,KAAK,EAAE,GACpB;AAAA,0BAAAP;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA,OAAM;AAAA,cACN,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,OAAO,WAAW;AAAA,cAClB;AAAA,cACA,UAAU;AAAA,cACV,QAAQ;AAAA;AAAA,UACV;AAAA,UACA,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,UAAU;AAAA,cACV;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAQ;AAAA,cACR,SAAS,gBAAAA,KAAC,6BAA0B;AAAA,cACpC,SAAS;AAAA,cACT,IAAI,EAAE,OAAO,UAAU;AAAA,cAEtB,qBAAW,mBAAmB;AAAA;AAAA,UACjC;AAAA,WACF;AAAA,QACE,kBAAkB,OAEd,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF,IAEF;AAAA;AAAA,QAGF,gBAAgB,gBAAgB;AAAA,QAEjC;AAAA,QACD,gBAAAA,KAAC,wBAAqB,OAAc,SAAkB,YAAY,MAAM,SAAS,MAAS,GAAG;AAAA;AAAA;AAAA,EAC/F;AAEJ;;;AEzHA,SAAgB,WAAAQ,gBAAe;AAe3B,gBAAAC,YAAA;AATG,IAAM,4BAA2D,CAAC,UAAU;AACjF,QAAM,eAAe,yBAAyB,KAAK;AAEnD,QAAM,eAAeC,SAA6B,OAAO;AAAA,IACvD,GAAG;AAAA,IACH,GAAG;AAAA,EACL,IAAI,CAAC,cAAc,KAAK,CAAC;AAEzB,SACE,gBAAAD,KAAC,kBAAgB,GAAG,cAAc;AAEtC;","names":["value","useTheme","jsx","XnsNameHelper","jsx","useMediaQuery","useTheme","FlexRow","MIN_DOMAIN_LENGTH","XnsNameHelper","useState","jsx","jsxs","useState","useTheme","useMediaQuery","MIN_DOMAIN_LENGTH","XnsNameHelper","FlexRow","useMemo","jsx","useMemo"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-xns",
-  "version": "7.6.3",
+  "version": "8.0.0",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -43,8 +43,8 @@
   "devDependencies": {
     "@bitauth/libauth": "~3.0.0",
     "@metamask/providers": "^22.1.1",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/sdk-trace-base": "^2.7.1",
     "@react-spring/web": "~10.0.3",
@@ -54,17 +54,17 @@
     "@types/react": "^19.2.14",
     "@xylabs/geo": "^5.1.2",
     "@xylabs/pixel": "~5.1.2",
-    "@xylabs/react-button": "~7.2.4",
-    "@xylabs/react-flexbox": "~7.2.4",
-    "@xylabs/react-link": "~7.2.4",
-    "@xylabs/react-pixel": "~7.2.4",
-    "@xylabs/react-theme": "~7.2.4",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-pixel": "~8.0",
+    "@xylabs/react-theme": "~8.0",
     "@xylabs/sdk-js": "^5.1.2",
     "@xylabs/threads": "~5.1.2",
-    "@xylabs/toolchain": "~7.13.15",
-    "@xylabs/tsconfig": "^7.13.15",
-    "@xylabs/tsconfig-dom": "^7.13.15",
-    "@xylabs/tsconfig-react": "~7.13.15",
+    "@xylabs/toolchain": "~7.13.22",
+    "@xylabs/tsconfig": "^7.13.22",
+    "@xylabs/tsconfig-dom": "^7.13.22",
+    "@xylabs/tsconfig-react": "~7.13.22",
     "@xyo-network/account": "~5.6.2",
     "@xyo-network/account-model": "^5.6.3",
     "@xyo-network/api": "~5.6.2",
@@ -88,7 +88,7 @@
     "@xyo-network/wallet": "~5.6.2",
     "@xyo-network/wallet-model": "^5.6.3",
     "@xyo-network/witness-model": "^5.6.4",
-    "@xyo-network/xns-record-payloadset-plugins": "~5.5.1",
+    "@xyo-network/xns-record-payloadset-plugins": "~5.5.2",
     "ajv": "^8.20.0",
     "async-mutex": "^0.5.0",
     "bn.js": "^5.2.3",
@@ -117,7 +117,7 @@
     "store2": "~2.14.4",
     "storybook": "^10.3.6",
     "typescript": "^5.9.3",
-    "vite": "^8.0.10",
+    "vite": "^8.0.11",
     "wasm-feature-detect": "~1.8.0",
     "webextension-polyfill": "^0.12.0",
     "zod": "^4.4.3"
@@ -125,8 +125,8 @@
   "peerDependencies": {
     "@bitauth/libauth": "~3.0",
     "@metamask/providers": "^22.1",
-    "@mui/icons-material": "^7.3",
-    "@mui/material": "^7.3",
+    "@mui/icons-material": "~9.0",
+    "@mui/material": "~9.0",
     "@opentelemetry/api": "^1.9",
     "@opentelemetry/sdk-trace-base": "^2.7",
     "@react-spring/web": "~10.0",
@@ -134,11 +134,11 @@
     "@scure/bip39": "~2.2",
     "@xylabs/geo": "^5.1",
     "@xylabs/pixel": "~5.1",
-    "@xylabs/react-button": "~7.2",
-    "@xylabs/react-flexbox": "~7.2",
-    "@xylabs/react-link": "~7.2",
-    "@xylabs/react-pixel": "~7.2",
-    "@xylabs/react-theme": "~7.2",
+    "@xylabs/react-button": "~8.0",
+    "@xylabs/react-flexbox": "~8.0",
+    "@xylabs/react-link": "~8.0",
+    "@xylabs/react-pixel": "~8.0",
+    "@xylabs/react-theme": "~8.0",
     "@xylabs/sdk-js": "^5.1",
     "@xylabs/threads": "~5.1",
     "@xyo-network/account": "~5.6",