droplinked-chatbot-next 1.0.2 → 1.0.3

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.
package/dist/index.esm.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
2
  import * as Chakra from '@chakra-ui/react';
3
- import { VStack, Text, Box, Input, Button, HStack, Image as Image$1, Spacer, IconButton, Link, Grid, Flex, Tooltip as Tooltip$1, Center, DrawerHeader, useDisclosure, DrawerBody } from '@chakra-ui/react';
4
- import * as React from 'react';
5
- import React__default, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
3
+ import { VStack, Text, Box, Input, Button, HStack, Image as Image$1, Spacer, IconButton, Link as Link$1, Grid, Flex, Tooltip as Tooltip$1, Center, DrawerHeader, useDisclosure, DrawerBody } from '@chakra-ui/react';
4
+ import * as React3 from 'react';
5
+ import React3__default, { useState, useMemo, useRef, useEffect, useCallback } from 'react';
6
6
 
7
7
  function _arrayLikeToArray(r, a) {
8
8
  (null == a || a > r.length) && (a = r.length);
@@ -4730,31 +4730,59 @@ var useChatbot = function useChatbot(_ref) {
4730
4730
  };
4731
4731
  };
4732
4732
 
4733
- var _excluded$a = ["color"];
4734
- var SendSm = function SendSm(_ref) {
4733
+ var _excluded$b = ["color"];
4734
+ var SendMd = function SendMd(_ref) {
4735
4735
  var _ref$color = _ref.color,
4736
4736
  color = _ref$color === void 0 ? "black" : _ref$color,
4737
- props = _objectWithoutProperties(_ref, _excluded$a);
4737
+ props = _objectWithoutProperties(_ref, _excluded$b);
4738
4738
  return jsxs("svg", _objectSpread2(_objectSpread2({
4739
- width: "16",
4740
- height: "16",
4741
- viewBox: "0 0 16 16",
4739
+ width: "20",
4740
+ height: "20",
4741
+ viewBox: "0 0 20 20",
4742
4742
  fill: "none",
4743
4743
  xmlns: "http://www.w3.org/2000/svg"
4744
4744
  }, props), {}, {
4745
4745
  children: [jsx("path", {
4746
- d: "M4.29963 2.79051L12.7242 7.00511C12.9077 7.0989 13.0618 7.24144 13.1693 7.41707C13.2769 7.59258 13.3337 7.79437 13.3337 8.00007C13.3337 8.20588 13.2769 8.40756 13.1693 8.58319C13.0618 8.7587 12.9077 8.90124 12.7242 8.99503L4.29963 13.2096C4.08923 13.3176 3.84998 13.3563 3.61616 13.3203C3.38235 13.2842 3.16598 13.1752 2.99807 13.0089C2.83016 12.8426 2.71932 12.6275 2.68144 12.3945C2.64357 12.1614 2.6806 11.9223 2.78723 11.7116L4.40045 8.50314C4.47924 8.34708 4.52029 8.1748 4.52029 8.00007C4.52029 7.82534 4.47924 7.65306 4.40045 7.497L2.78723 4.28854C2.6806 4.07778 2.64357 3.83876 2.68144 3.60571C2.71932 3.37267 2.83016 3.15757 2.99807 2.99125C3.16598 2.82494 3.38235 2.71593 3.61616 2.67986C3.84998 2.64381 4.08923 2.68254 4.29963 2.79051Z",
4746
+ d: "M5.3738 3.48795L15.9045 8.7562C16.1339 8.87345 16.3265 9.05162 16.4609 9.27115C16.5953 9.49055 16.6663 9.74278 16.6663 9.99991C16.6663 10.2572 16.5953 10.5093 16.4609 10.7288C16.3265 10.9482 16.1339 11.1264 15.9045 11.2436L5.3738 16.5119C5.1108 16.6469 4.81174 16.6952 4.51947 16.6502C4.22721 16.6051 3.95674 16.4688 3.74686 16.2609C3.53697 16.0531 3.39842 15.7842 3.35107 15.4929C3.30372 15.2015 3.35002 14.9027 3.48331 14.6393L5.49983 10.6287C5.59832 10.4337 5.64963 10.2183 5.64963 9.99991C5.64963 9.78149 5.59832 9.56615 5.49983 9.37107L3.48331 5.36049C3.35002 5.09705 3.30372 4.79827 3.35107 4.50696C3.39842 4.21565 3.53697 3.94678 3.74686 3.73888C3.95674 3.53099 4.22721 3.39473 4.51947 3.34965C4.81174 3.30458 5.1108 3.35299 5.3738 3.48795Z",
4747
4747
  stroke: color,
4748
+ strokeWidth: "1.5",
4748
4749
  "stroke-miterlimit": "10"
4749
4750
  }), jsx("path", {
4750
- d: "M4.66699 8H7.33366",
4751
+ d: "M5.83301 10H9.16634",
4751
4752
  stroke: color,
4753
+ strokeWidth: "1.5",
4752
4754
  "stroke-miterlimit": "10",
4753
4755
  strokeLinecap: "round"
4754
4756
  })]
4755
4757
  }));
4756
4758
  };
4757
4759
 
4760
+ var _excluded$a = ["color"];
4761
+ var LetterMd = function LetterMd(_ref) {
4762
+ var _ref$color = _ref.color,
4763
+ color = _ref$color === void 0 ? "black" : _ref$color,
4764
+ props = _objectWithoutProperties(_ref, _excluded$a);
4765
+ return jsxs("svg", _objectSpread2(_objectSpread2({
4766
+ width: "20",
4767
+ height: "20",
4768
+ viewBox: "0 0 20 20",
4769
+ fill: "none",
4770
+ xmlns: "http://www.w3.org/2000/svg"
4771
+ }, props), {}, {
4772
+ children: [jsx("path", {
4773
+ d: "M5.83301 7.5L9.99967 10.4167L14.1663 7.5",
4774
+ stroke: color,
4775
+ strokeWidth: "1.5",
4776
+ strokeLinecap: "round",
4777
+ strokeLinejoin: "round"
4778
+ }), jsx("path", {
4779
+ d: "M1.66699 14.1667V5.83334C1.66699 4.91286 2.41318 4.16667 3.33366 4.16667H16.667C17.5875 4.16667 18.3337 4.91286 18.3337 5.83334V14.1667C18.3337 15.0872 17.5875 15.8333 16.667 15.8333H3.33366C2.41318 15.8333 1.66699 15.0872 1.66699 14.1667Z",
4780
+ stroke: color,
4781
+ strokeWidth: "1.5"
4782
+ })]
4783
+ }));
4784
+ };
4785
+
4758
4786
  function EmailCapture(_ref) {
4759
4787
  var onSubmit = _ref.onSubmit,
4760
4788
  _ref$isSubmitting = _ref.isSubmitting,
@@ -4788,7 +4816,9 @@ function EmailCapture(_ref) {
4788
4816
  border: "1px solid",
4789
4817
  borderColor: "#27272A",
4790
4818
  overflow: "hidden",
4791
- children: [jsx(Input, {
4819
+ children: [jsx(LetterMd, {
4820
+ color: "#7B7B7B"
4821
+ }), jsx(Input, {
4792
4822
  value: email,
4793
4823
  onChange: function onChange(e) {
4794
4824
  return setEmail(e.target.value);
@@ -4834,8 +4864,8 @@ function EmailCapture(_ref) {
4834
4864
  color: "#525252",
4835
4865
  cursor: "not-allowed"
4836
4866
  },
4837
- px: 2,
4838
- py: 1,
4867
+ px: 3,
4868
+ py: 2,
4839
4869
  borderRadius: "md",
4840
4870
  height: "auto",
4841
4871
  minHeight: "auto",
@@ -4877,6 +4907,8 @@ function SuggestionChips(_ref) {
4877
4907
  fontSize: "sm",
4878
4908
  fontWeight: "normal",
4879
4909
  lineHeight: "tight",
4910
+ _hover: "none",
4911
+ _active: "none",
4880
4912
  children: s.text
4881
4913
  }, s.id);
4882
4914
  })
@@ -4954,7 +4986,7 @@ function MessageInput(_ref) {
4954
4986
  onKeyDown: function onKeyDown(e) {
4955
4987
  return e.key === "Enter" && handleSend();
4956
4988
  },
4957
- placeholder: " Send a message",
4989
+ placeholder: "Send a message",
4958
4990
  bg: "transparent",
4959
4991
  color: "white",
4960
4992
  border: "none",
@@ -4976,7 +5008,6 @@ function MessageInput(_ref) {
4976
5008
  fontSize: "sm"
4977
5009
  })
4978
5010
  }), jsxs(HStack, {
4979
- p: 2,
4980
5011
  align: "center",
4981
5012
  w: "full",
4982
5013
  children: [user.logoUrl && jsx(HStack, {
@@ -4994,7 +5025,7 @@ function MessageInput(_ref) {
4994
5025
  onClick: handleSend,
4995
5026
  isDisabled: !input.trim() || isLoading,
4996
5027
  isLoading: isLoading,
4997
- size: "sm",
5028
+ size: "md",
4998
5029
  bg: !input.trim() || isLoading ? "#262626" : "#2BCFA1",
4999
5030
  _hover: {
5000
5031
  bg: !input.trim() || isLoading ? "#262626" : "#22B890"
@@ -5005,7 +5036,7 @@ function MessageInput(_ref) {
5005
5036
  },
5006
5037
  borderRadius: "lg",
5007
5038
  border: "none",
5008
- children: jsx(SendSm, {
5039
+ children: jsx(SendMd, {
5009
5040
  color: !input.trim() || isLoading ? "#525252" : "white"
5010
5041
  })
5011
5042
  })]
@@ -5023,14 +5054,10 @@ if (typeof document !== "undefined" && !document.getElementById("typing-indicato
5023
5054
  styleElement.textContent = typingIndicatorStyles;
5024
5055
  document.head.appendChild(styleElement);
5025
5056
  }
5026
- var TypingIndicator = /*#__PURE__*/React__default.memo(function TypingIndicator(_ref) {
5027
- var isVisible = _ref.isVisible,
5028
- _ref$size = _ref.size,
5029
- size = _ref$size === void 0 ? "normal" : _ref$size,
5030
- _ref$state = _ref.state,
5031
- state = _ref$state === void 0 ? "typing" : _ref$state;
5032
- var getDotStyle = React__default.useMemo(function () {
5033
- return function (index, delay, small) {
5057
+ var TypingIndicator = /*#__PURE__*/React3__default.memo(function TypingIndicator(_ref) {
5058
+ var isVisible = _ref.isVisible;
5059
+ var getDotStyle = React3__default.useMemo(function () {
5060
+ return function (index, delay) {
5034
5061
  var animationDelay = "".concat(index * 0.2 + delay * 0.5, "s");
5035
5062
  return {
5036
5063
  animation: "typingDotBounce 1.6s ease-in-out infinite",
@@ -5043,11 +5070,11 @@ var TypingIndicator = /*#__PURE__*/React__default.memo(function TypingIndicator(
5043
5070
  animation: isVisible ? 'scaleIn 0.5s ease-out forwards' : 'scaleOut 0.5s ease-in forwards',
5044
5071
  transformOrigin: 'bottom left'
5045
5072
  };
5046
- var _React$useState = React__default.useState(isVisible),
5073
+ var _React$useState = React3__default.useState(isVisible),
5047
5074
  _React$useState2 = _slicedToArray(_React$useState, 2),
5048
5075
  shouldRender = _React$useState2[0],
5049
5076
  setShouldRender = _React$useState2[1];
5050
- React__default.useEffect(function () {
5077
+ React3__default.useEffect(function () {
5051
5078
  var timer = null;
5052
5079
  if (isVisible) {
5053
5080
  setShouldRender(true);
@@ -5063,85 +5090,40 @@ var TypingIndicator = /*#__PURE__*/React__default.memo(function TypingIndicator(
5063
5090
  };
5064
5091
  }, [isVisible]);
5065
5092
  if (!shouldRender) return null;
5066
- var isSmall = size === "small";
5067
- var dotSize = isSmall ? "6px" : "8px";
5068
- var smallDotSize = isSmall ? "5px" : "6px";
5069
- var containerPadding = isSmall ? "8px 12px" : "12px 16px";
5070
- var smallContainerPadding = isSmall ? "6px 10px" : "8px 12px";
5071
- var isCompleted = state === "completed";
5072
- var TypingDots = React__default.useMemo(function () {
5073
- return /*#__PURE__*/React__default.memo(function (_ref2) {
5093
+ var TypingDots = React3__default.useMemo(function () {
5094
+ return /*#__PURE__*/React3__default.memo(function (_ref2) {
5074
5095
  var _ref2$delay = _ref2.delay,
5075
- delay = _ref2$delay === void 0 ? 0 : _ref2$delay,
5076
- _ref2$small = _ref2.small,
5077
- small = _ref2$small === void 0 ? false : _ref2$small;
5096
+ delay = _ref2$delay === void 0 ? 0 : _ref2$delay;
5078
5097
  return jsx(HStack, {
5079
- gap: small ? "4px" : "6px",
5098
+ gap: "4px",
5080
5099
  justify: "center",
5081
5100
  children: [0, 1, 2].map(function (index) {
5082
5101
  return jsx(Box, {
5083
- w: small ? smallDotSize : dotSize,
5084
- h: small ? smallDotSize : dotSize,
5102
+ boxSize: "8px",
5085
5103
  bg: "#2BCFA1",
5086
5104
  borderRadius: "full",
5087
- style: getDotStyle(index, delay, small)
5105
+ style: getDotStyle(index, delay)
5088
5106
  }, index);
5089
5107
  })
5090
5108
  });
5091
5109
  });
5092
- }, [getDotStyle, dotSize, smallDotSize]);
5093
- if (isCompleted) {
5094
- return jsx(Box, {
5095
- alignSelf: "flex-start",
5096
- maxW: "80%",
5097
- mb: isSmall ? 2 : 4,
5098
- style: containerAnimationStyle,
5099
- children: jsx(Box, {
5100
- bg: "rgba(43, 207, 161, 0.15)",
5101
- p: smallContainerPadding,
5102
- borderRadius: "16px",
5103
- w: "fit-content",
5104
- border: "1px solid rgba(43, 207, 161, 0.2)",
5105
- backdropFilter: "blur(10px)",
5106
- boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
5107
- children: jsx(TypingDots, {
5108
- delay: 0.1,
5109
- small: true
5110
- })
5111
- })
5112
- });
5113
- }
5110
+ }, [getDotStyle]);
5114
5111
  return jsx(Box, {
5115
5112
  alignSelf: "flex-start",
5116
5113
  maxW: "80%",
5117
- mb: isSmall ? 2 : 4,
5114
+ mb: 2,
5118
5115
  style: containerAnimationStyle,
5119
- children: jsxs(Box, {
5120
- display: "flex",
5121
- flexDirection: "column",
5122
- gap: 2,
5123
- children: [jsx(Box, {
5124
- bg: "rgba(34, 197, 94, 0.2)",
5125
- p: containerPadding,
5126
- borderRadius: "20px",
5127
- w: "fit-content",
5128
- border: "1px solid rgba(34, 197, 94, 0.3)",
5129
- backdropFilter: "blur(10px)",
5130
- boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
5131
- children: jsx(TypingDots, {})
5132
- }), jsx(Box, {
5133
- bg: "rgba(34, 197, 94, 0.2)",
5134
- p: smallContainerPadding,
5135
- borderRadius: "16px",
5136
- w: "fit-content",
5137
- border: "1px solid rgba(34, 197, 94, 0.3)",
5138
- backdropFilter: "blur(10px)",
5139
- boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
5140
- children: jsx(TypingDots, {
5141
- delay: 0.1,
5142
- small: true
5143
- })
5144
- })]
5116
+ children: jsx(Box, {
5117
+ bg: "rgba(34, 197, 94, 0.2)",
5118
+ p: "10px 14px",
5119
+ borderRadius: "16px",
5120
+ w: "fit-content",
5121
+ border: "1px solid rgba(34, 197, 94, 0.3)",
5122
+ backdropFilter: "blur(10px)",
5123
+ boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
5124
+ children: jsx(TypingDots, {
5125
+ delay: 0.1
5126
+ })
5145
5127
  })
5146
5128
  });
5147
5129
  });
@@ -41386,7 +41368,7 @@ function MarkdownRenderer(_ref) {
41386
41368
  a: function a(_ref3) {
41387
41369
  var href = _ref3.href,
41388
41370
  children = _ref3.children;
41389
- return jsx(Link, {
41371
+ return jsx(Link$1, {
41390
41372
  href: href,
41391
41373
  color: "#179EF8",
41392
41374
  textDecoration: "underline",
@@ -41625,38 +41607,36 @@ function GradualMessageDisplay(_ref) {
41625
41607
  flexDirection: "column",
41626
41608
  gap: 2,
41627
41609
  children: [(phase === "typing" || phase === "revealing") && jsx(TypingIndicator, {
41628
- isVisible: true,
41629
- size: "normal",
41630
- state: phase === "typing" ? "typing" : "completed"
41610
+ isVisible: true
41631
41611
  }), (phase === "revealing" || phase === "complete") && jsx(Box, {
41632
41612
  position: "relative",
41633
41613
  borderRadius: "12px",
41634
41614
  _before: {
41635
41615
  content: '""',
41636
- position: 'absolute',
41616
+ position: "absolute",
41637
41617
  zIndex: -1,
41638
- width: 'calc(100% + 1px)',
41639
- height: 'calc(100% + 1px)',
41618
+ width: "calc(100% + 1px)",
41619
+ height: "calc(100% + 1px)",
41640
41620
  top: 0,
41641
41621
  left: 0,
41642
- borderRadius: '12px',
41643
- backgroundSize: '400% 400%',
41622
+ borderRadius: "12px",
41623
+ backgroundSize: "400% 400%",
41644
41624
  opacity: phase === "revealing" ? 1 : 0,
41645
- transition: 'opacity 0.3s ease'
41625
+ transition: "opacity 0.3s ease"
41646
41626
  },
41647
41627
  _after: {
41648
41628
  content: '""',
41649
- position: 'absolute',
41629
+ position: "absolute",
41650
41630
  zIndex: -1,
41651
- width: 'calc(100% + 1px)',
41652
- height: 'calc(100% + 1px)',
41631
+ width: "calc(100% + 1px)",
41632
+ height: "calc(100% + 1px)",
41653
41633
  top: 0,
41654
41634
  left: 0,
41655
- borderRadius: '12px',
41656
- backgroundSize: '400% 400%',
41635
+ borderRadius: "12px",
41636
+ backgroundSize: "400% 400%",
41657
41637
  opacity: phase === "revealing" ? 1 : 0,
41658
- transition: 'opacity 0.3s ease',
41659
- filter: 'blur(100px)'
41638
+ transition: "opacity 0.3s ease",
41639
+ filter: "blur(100px)"
41660
41640
  },
41661
41641
  children: jsx(Box, {
41662
41642
  borderRadius: "11px",
@@ -58963,7 +58943,7 @@ function requireIndex_umd () {
58963
58943
  hasRequiredIndex_umd = 1;
58964
58944
  (function (module, exports) {
58965
58945
  (function (global, factory) {
58966
- factory(exports, /*@__PURE__*/ requireLottie(), React__default) ;
58946
+ factory(exports, /*@__PURE__*/ requireLottie(), React3__default) ;
58967
58947
  })(index_umd, (function (exports, lottie, React) {
58968
58948
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
58969
58949
 
@@ -65762,8 +65742,7 @@ function MessageList(_ref) {
65762
65742
  clearProcessingMessageId: clearProcessingMessageId
65763
65743
  }, message.id);
65764
65744
  }), isTyping && !currentlyDisplayingMessage && jsx(TypingIndicator, {
65765
- isVisible: true,
65766
- size: "normal"
65745
+ isVisible: true
65767
65746
  })]
65768
65747
  })
65769
65748
  })
@@ -65814,6 +65793,1735 @@ function ChatPage(_ref) {
65814
65793
  });
65815
65794
  }
65816
65795
 
65796
+ /**
65797
+ * react-router v7.8.2
65798
+ *
65799
+ * Copyright (c) Remix Software Inc.
65800
+ *
65801
+ * This source code is licensed under the MIT license found in the
65802
+ * LICENSE.md file in the root directory of this source tree.
65803
+ *
65804
+ * @license MIT
65805
+ */
65806
+ function invariant(value, message) {
65807
+ if (value === false || value === null || typeof value === "undefined") {
65808
+ throw new Error(message);
65809
+ }
65810
+ }
65811
+ function warning(cond, message) {
65812
+ if (!cond) {
65813
+ if (typeof console !== "undefined") console.warn(message);
65814
+ try {
65815
+ throw new Error(message);
65816
+ } catch (e) {
65817
+ }
65818
+ }
65819
+ }
65820
+ function createPath({
65821
+ pathname = "/",
65822
+ search = "",
65823
+ hash = ""
65824
+ }) {
65825
+ if (search && search !== "?")
65826
+ pathname += search.charAt(0) === "?" ? search : "?" + search;
65827
+ if (hash && hash !== "#")
65828
+ pathname += hash.charAt(0) === "#" ? hash : "#" + hash;
65829
+ return pathname;
65830
+ }
65831
+ function parsePath(path) {
65832
+ let parsedPath = {};
65833
+ if (path) {
65834
+ let hashIndex = path.indexOf("#");
65835
+ if (hashIndex >= 0) {
65836
+ parsedPath.hash = path.substring(hashIndex);
65837
+ path = path.substring(0, hashIndex);
65838
+ }
65839
+ let searchIndex = path.indexOf("?");
65840
+ if (searchIndex >= 0) {
65841
+ parsedPath.search = path.substring(searchIndex);
65842
+ path = path.substring(0, searchIndex);
65843
+ }
65844
+ if (path) {
65845
+ parsedPath.pathname = path;
65846
+ }
65847
+ }
65848
+ return parsedPath;
65849
+ }
65850
+ function matchRoutes(routes, locationArg, basename = "/") {
65851
+ return matchRoutesImpl(routes, locationArg, basename, false);
65852
+ }
65853
+ function matchRoutesImpl(routes, locationArg, basename, allowPartial) {
65854
+ let location = typeof locationArg === "string" ? parsePath(locationArg) : locationArg;
65855
+ let pathname = stripBasename(location.pathname || "/", basename);
65856
+ if (pathname == null) {
65857
+ return null;
65858
+ }
65859
+ let branches = flattenRoutes(routes);
65860
+ rankRouteBranches(branches);
65861
+ let matches = null;
65862
+ for (let i = 0; matches == null && i < branches.length; ++i) {
65863
+ let decoded = decodePath(pathname);
65864
+ matches = matchRouteBranch(
65865
+ branches[i],
65866
+ decoded,
65867
+ allowPartial
65868
+ );
65869
+ }
65870
+ return matches;
65871
+ }
65872
+ function flattenRoutes(routes, branches = [], parentsMeta = [], parentPath = "", _hasParentOptionalSegments = false) {
65873
+ let flattenRoute = (route, index, hasParentOptionalSegments = _hasParentOptionalSegments, relativePath) => {
65874
+ let meta = {
65875
+ relativePath: relativePath === void 0 ? route.path || "" : relativePath,
65876
+ caseSensitive: route.caseSensitive === true,
65877
+ childrenIndex: index,
65878
+ route
65879
+ };
65880
+ if (meta.relativePath.startsWith("/")) {
65881
+ if (!meta.relativePath.startsWith(parentPath) && hasParentOptionalSegments) {
65882
+ return;
65883
+ }
65884
+ invariant(
65885
+ meta.relativePath.startsWith(parentPath),
65886
+ `Absolute route path "${meta.relativePath}" nested under path "${parentPath}" is not valid. An absolute child route path must start with the combined path of all its parent routes.`
65887
+ );
65888
+ meta.relativePath = meta.relativePath.slice(parentPath.length);
65889
+ }
65890
+ let path = joinPaths([parentPath, meta.relativePath]);
65891
+ let routesMeta = parentsMeta.concat(meta);
65892
+ if (route.children && route.children.length > 0) {
65893
+ invariant(
65894
+ // Our types know better, but runtime JS may not!
65895
+ // @ts-expect-error
65896
+ route.index !== true,
65897
+ `Index routes must not have child routes. Please remove all child routes from route path "${path}".`
65898
+ );
65899
+ flattenRoutes(
65900
+ route.children,
65901
+ branches,
65902
+ routesMeta,
65903
+ path,
65904
+ hasParentOptionalSegments
65905
+ );
65906
+ }
65907
+ if (route.path == null && !route.index) {
65908
+ return;
65909
+ }
65910
+ branches.push({
65911
+ path,
65912
+ score: computeScore(path, route.index),
65913
+ routesMeta
65914
+ });
65915
+ };
65916
+ routes.forEach((route, index) => {
65917
+ if (route.path === "" || !route.path?.includes("?")) {
65918
+ flattenRoute(route, index);
65919
+ } else {
65920
+ for (let exploded of explodeOptionalSegments(route.path)) {
65921
+ flattenRoute(route, index, true, exploded);
65922
+ }
65923
+ }
65924
+ });
65925
+ return branches;
65926
+ }
65927
+ function explodeOptionalSegments(path) {
65928
+ let segments = path.split("/");
65929
+ if (segments.length === 0) return [];
65930
+ let [first, ...rest] = segments;
65931
+ let isOptional = first.endsWith("?");
65932
+ let required = first.replace(/\?$/, "");
65933
+ if (rest.length === 0) {
65934
+ return isOptional ? [required, ""] : [required];
65935
+ }
65936
+ let restExploded = explodeOptionalSegments(rest.join("/"));
65937
+ let result = [];
65938
+ result.push(
65939
+ ...restExploded.map(
65940
+ (subpath) => subpath === "" ? required : [required, subpath].join("/")
65941
+ )
65942
+ );
65943
+ if (isOptional) {
65944
+ result.push(...restExploded);
65945
+ }
65946
+ return result.map(
65947
+ (exploded) => path.startsWith("/") && exploded === "" ? "/" : exploded
65948
+ );
65949
+ }
65950
+ function rankRouteBranches(branches) {
65951
+ branches.sort(
65952
+ (a, b) => a.score !== b.score ? b.score - a.score : compareIndexes(
65953
+ a.routesMeta.map((meta) => meta.childrenIndex),
65954
+ b.routesMeta.map((meta) => meta.childrenIndex)
65955
+ )
65956
+ );
65957
+ }
65958
+ var paramRe = /^:[\w-]+$/;
65959
+ var dynamicSegmentValue = 3;
65960
+ var indexRouteValue = 2;
65961
+ var emptySegmentValue = 1;
65962
+ var staticSegmentValue = 10;
65963
+ var splatPenalty = -2;
65964
+ var isSplat = (s) => s === "*";
65965
+ function computeScore(path, index) {
65966
+ let segments = path.split("/");
65967
+ let initialScore = segments.length;
65968
+ if (segments.some(isSplat)) {
65969
+ initialScore += splatPenalty;
65970
+ }
65971
+ if (index) {
65972
+ initialScore += indexRouteValue;
65973
+ }
65974
+ return segments.filter((s) => !isSplat(s)).reduce(
65975
+ (score, segment) => score + (paramRe.test(segment) ? dynamicSegmentValue : segment === "" ? emptySegmentValue : staticSegmentValue),
65976
+ initialScore
65977
+ );
65978
+ }
65979
+ function compareIndexes(a, b) {
65980
+ let siblings = a.length === b.length && a.slice(0, -1).every((n, i) => n === b[i]);
65981
+ return siblings ? (
65982
+ // If two routes are siblings, we should try to match the earlier sibling
65983
+ // first. This allows people to have fine-grained control over the matching
65984
+ // behavior by simply putting routes with identical paths in the order they
65985
+ // want them tried.
65986
+ a[a.length - 1] - b[b.length - 1]
65987
+ ) : (
65988
+ // Otherwise, it doesn't really make sense to rank non-siblings by index,
65989
+ // so they sort equally.
65990
+ 0
65991
+ );
65992
+ }
65993
+ function matchRouteBranch(branch, pathname, allowPartial = false) {
65994
+ let { routesMeta } = branch;
65995
+ let matchedParams = {};
65996
+ let matchedPathname = "/";
65997
+ let matches = [];
65998
+ for (let i = 0; i < routesMeta.length; ++i) {
65999
+ let meta = routesMeta[i];
66000
+ let end = i === routesMeta.length - 1;
66001
+ let remainingPathname = matchedPathname === "/" ? pathname : pathname.slice(matchedPathname.length) || "/";
66002
+ let match = matchPath(
66003
+ { path: meta.relativePath, caseSensitive: meta.caseSensitive, end },
66004
+ remainingPathname
66005
+ );
66006
+ let route = meta.route;
66007
+ if (!match && end && allowPartial && !routesMeta[routesMeta.length - 1].route.index) {
66008
+ match = matchPath(
66009
+ {
66010
+ path: meta.relativePath,
66011
+ caseSensitive: meta.caseSensitive,
66012
+ end: false
66013
+ },
66014
+ remainingPathname
66015
+ );
66016
+ }
66017
+ if (!match) {
66018
+ return null;
66019
+ }
66020
+ Object.assign(matchedParams, match.params);
66021
+ matches.push({
66022
+ // TODO: Can this as be avoided?
66023
+ params: matchedParams,
66024
+ pathname: joinPaths([matchedPathname, match.pathname]),
66025
+ pathnameBase: normalizePathname(
66026
+ joinPaths([matchedPathname, match.pathnameBase])
66027
+ ),
66028
+ route
66029
+ });
66030
+ if (match.pathnameBase !== "/") {
66031
+ matchedPathname = joinPaths([matchedPathname, match.pathnameBase]);
66032
+ }
66033
+ }
66034
+ return matches;
66035
+ }
66036
+ function matchPath(pattern, pathname) {
66037
+ if (typeof pattern === "string") {
66038
+ pattern = { path: pattern, caseSensitive: false, end: true };
66039
+ }
66040
+ let [matcher, compiledParams] = compilePath(
66041
+ pattern.path,
66042
+ pattern.caseSensitive,
66043
+ pattern.end
66044
+ );
66045
+ let match = pathname.match(matcher);
66046
+ if (!match) return null;
66047
+ let matchedPathname = match[0];
66048
+ let pathnameBase = matchedPathname.replace(/(.)\/+$/, "$1");
66049
+ let captureGroups = match.slice(1);
66050
+ let params = compiledParams.reduce(
66051
+ (memo2, { paramName, isOptional }, index) => {
66052
+ if (paramName === "*") {
66053
+ let splatValue = captureGroups[index] || "";
66054
+ pathnameBase = matchedPathname.slice(0, matchedPathname.length - splatValue.length).replace(/(.)\/+$/, "$1");
66055
+ }
66056
+ const value = captureGroups[index];
66057
+ if (isOptional && !value) {
66058
+ memo2[paramName] = void 0;
66059
+ } else {
66060
+ memo2[paramName] = (value || "").replace(/%2F/g, "/");
66061
+ }
66062
+ return memo2;
66063
+ },
66064
+ {}
66065
+ );
66066
+ return {
66067
+ params,
66068
+ pathname: matchedPathname,
66069
+ pathnameBase,
66070
+ pattern
66071
+ };
66072
+ }
66073
+ function compilePath(path, caseSensitive = false, end = true) {
66074
+ warning(
66075
+ path === "*" || !path.endsWith("*") || path.endsWith("/*"),
66076
+ `Route path "${path}" will be treated as if it were "${path.replace(/\*$/, "/*")}" because the \`*\` character must always follow a \`/\` in the pattern. To get rid of this warning, please change the route path to "${path.replace(/\*$/, "/*")}".`
66077
+ );
66078
+ let params = [];
66079
+ let regexpSource = "^" + path.replace(/\/*\*?$/, "").replace(/^\/*/, "/").replace(/[\\.*+^${}|()[\]]/g, "\\$&").replace(
66080
+ /\/:([\w-]+)(\?)?/g,
66081
+ (_, paramName, isOptional) => {
66082
+ params.push({ paramName, isOptional: isOptional != null });
66083
+ return isOptional ? "/?([^\\/]+)?" : "/([^\\/]+)";
66084
+ }
66085
+ ).replace(/\/([\w-]+)\?(\/|$)/g, "(/$1)?$2");
66086
+ if (path.endsWith("*")) {
66087
+ params.push({ paramName: "*" });
66088
+ regexpSource += path === "*" || path === "/*" ? "(.*)$" : "(?:\\/(.+)|\\/*)$";
66089
+ } else if (end) {
66090
+ regexpSource += "\\/*$";
66091
+ } else if (path !== "" && path !== "/") {
66092
+ regexpSource += "(?:(?=\\/|$))";
66093
+ } else ;
66094
+ let matcher = new RegExp(regexpSource, caseSensitive ? void 0 : "i");
66095
+ return [matcher, params];
66096
+ }
66097
+ function decodePath(value) {
66098
+ try {
66099
+ return value.split("/").map((v) => decodeURIComponent(v).replace(/\//g, "%2F")).join("/");
66100
+ } catch (error) {
66101
+ warning(
66102
+ false,
66103
+ `The URL path "${value}" could not be decoded because it is a malformed URL segment. This is probably due to a bad percent encoding (${error}).`
66104
+ );
66105
+ return value;
66106
+ }
66107
+ }
66108
+ function stripBasename(pathname, basename) {
66109
+ if (basename === "/") return pathname;
66110
+ if (!pathname.toLowerCase().startsWith(basename.toLowerCase())) {
66111
+ return null;
66112
+ }
66113
+ let startIndex = basename.endsWith("/") ? basename.length - 1 : basename.length;
66114
+ let nextChar = pathname.charAt(startIndex);
66115
+ if (nextChar && nextChar !== "/") {
66116
+ return null;
66117
+ }
66118
+ return pathname.slice(startIndex) || "/";
66119
+ }
66120
+ function resolvePath(to, fromPathname = "/") {
66121
+ let {
66122
+ pathname: toPathname,
66123
+ search = "",
66124
+ hash = ""
66125
+ } = typeof to === "string" ? parsePath(to) : to;
66126
+ let pathname = toPathname ? toPathname.startsWith("/") ? toPathname : resolvePathname(toPathname, fromPathname) : fromPathname;
66127
+ return {
66128
+ pathname,
66129
+ search: normalizeSearch(search),
66130
+ hash: normalizeHash(hash)
66131
+ };
66132
+ }
66133
+ function resolvePathname(relativePath, fromPathname) {
66134
+ let segments = fromPathname.replace(/\/+$/, "").split("/");
66135
+ let relativeSegments = relativePath.split("/");
66136
+ relativeSegments.forEach((segment) => {
66137
+ if (segment === "..") {
66138
+ if (segments.length > 1) segments.pop();
66139
+ } else if (segment !== ".") {
66140
+ segments.push(segment);
66141
+ }
66142
+ });
66143
+ return segments.length > 1 ? segments.join("/") : "/";
66144
+ }
66145
+ function getInvalidPathError(char, field, dest, path) {
66146
+ return `Cannot include a '${char}' character in a manually specified \`to.${field}\` field [${JSON.stringify(
66147
+ path
66148
+ )}]. Please separate it out to the \`to.${dest}\` field. Alternatively you may provide the full path as a string in <Link to="..."> and the router will parse it for you.`;
66149
+ }
66150
+ function getPathContributingMatches(matches) {
66151
+ return matches.filter(
66152
+ (match, index) => index === 0 || match.route.path && match.route.path.length > 0
66153
+ );
66154
+ }
66155
+ function getResolveToMatches(matches) {
66156
+ let pathMatches = getPathContributingMatches(matches);
66157
+ return pathMatches.map(
66158
+ (match, idx) => idx === pathMatches.length - 1 ? match.pathname : match.pathnameBase
66159
+ );
66160
+ }
66161
+ function resolveTo(toArg, routePathnames, locationPathname, isPathRelative = false) {
66162
+ let to;
66163
+ if (typeof toArg === "string") {
66164
+ to = parsePath(toArg);
66165
+ } else {
66166
+ to = { ...toArg };
66167
+ invariant(
66168
+ !to.pathname || !to.pathname.includes("?"),
66169
+ getInvalidPathError("?", "pathname", "search", to)
66170
+ );
66171
+ invariant(
66172
+ !to.pathname || !to.pathname.includes("#"),
66173
+ getInvalidPathError("#", "pathname", "hash", to)
66174
+ );
66175
+ invariant(
66176
+ !to.search || !to.search.includes("#"),
66177
+ getInvalidPathError("#", "search", "hash", to)
66178
+ );
66179
+ }
66180
+ let isEmptyPath = toArg === "" || to.pathname === "";
66181
+ let toPathname = isEmptyPath ? "/" : to.pathname;
66182
+ let from;
66183
+ if (toPathname == null) {
66184
+ from = locationPathname;
66185
+ } else {
66186
+ let routePathnameIndex = routePathnames.length - 1;
66187
+ if (!isPathRelative && toPathname.startsWith("..")) {
66188
+ let toSegments = toPathname.split("/");
66189
+ while (toSegments[0] === "..") {
66190
+ toSegments.shift();
66191
+ routePathnameIndex -= 1;
66192
+ }
66193
+ to.pathname = toSegments.join("/");
66194
+ }
66195
+ from = routePathnameIndex >= 0 ? routePathnames[routePathnameIndex] : "/";
66196
+ }
66197
+ let path = resolvePath(to, from);
66198
+ let hasExplicitTrailingSlash = toPathname && toPathname !== "/" && toPathname.endsWith("/");
66199
+ let hasCurrentTrailingSlash = (isEmptyPath || toPathname === ".") && locationPathname.endsWith("/");
66200
+ if (!path.pathname.endsWith("/") && (hasExplicitTrailingSlash || hasCurrentTrailingSlash)) {
66201
+ path.pathname += "/";
66202
+ }
66203
+ return path;
66204
+ }
66205
+ var joinPaths = (paths) => paths.join("/").replace(/\/\/+/g, "/");
66206
+ var normalizePathname = (pathname) => pathname.replace(/\/+$/, "").replace(/^\/*/, "/");
66207
+ var normalizeSearch = (search) => !search || search === "?" ? "" : search.startsWith("?") ? search : "?" + search;
66208
+ var normalizeHash = (hash) => !hash || hash === "#" ? "" : hash.startsWith("#") ? hash : "#" + hash;
66209
+ function isRouteErrorResponse(error) {
66210
+ return error != null && typeof error.status === "number" && typeof error.statusText === "string" && typeof error.internal === "boolean" && "data" in error;
66211
+ }
66212
+
66213
+ // lib/router/router.ts
66214
+ var validMutationMethodsArr = [
66215
+ "POST",
66216
+ "PUT",
66217
+ "PATCH",
66218
+ "DELETE"
66219
+ ];
66220
+ new Set(
66221
+ validMutationMethodsArr
66222
+ );
66223
+ var validRequestMethodsArr = [
66224
+ "GET",
66225
+ ...validMutationMethodsArr
66226
+ ];
66227
+ new Set(validRequestMethodsArr);
66228
+ var DataRouterContext = React3.createContext(null);
66229
+ DataRouterContext.displayName = "DataRouter";
66230
+ var DataRouterStateContext = React3.createContext(null);
66231
+ DataRouterStateContext.displayName = "DataRouterState";
66232
+ React3.createContext(false);
66233
+ var ViewTransitionContext = React3.createContext({
66234
+ isTransitioning: false
66235
+ });
66236
+ ViewTransitionContext.displayName = "ViewTransition";
66237
+ var FetchersContext = React3.createContext(
66238
+ /* @__PURE__ */ new Map()
66239
+ );
66240
+ FetchersContext.displayName = "Fetchers";
66241
+ var AwaitContext = React3.createContext(null);
66242
+ AwaitContext.displayName = "Await";
66243
+ var NavigationContext = React3.createContext(
66244
+ null
66245
+ );
66246
+ NavigationContext.displayName = "Navigation";
66247
+ var LocationContext = React3.createContext(
66248
+ null
66249
+ );
66250
+ LocationContext.displayName = "Location";
66251
+ var RouteContext = React3.createContext({
66252
+ outlet: null,
66253
+ matches: [],
66254
+ isDataRoute: false
66255
+ });
66256
+ RouteContext.displayName = "Route";
66257
+ var RouteErrorContext = React3.createContext(null);
66258
+ RouteErrorContext.displayName = "RouteError";
66259
+ function useHref(to, { relative } = {}) {
66260
+ invariant(
66261
+ useInRouterContext(),
66262
+ // TODO: This error is probably because they somehow have 2 versions of the
66263
+ // router loaded. We can help them understand how to avoid that.
66264
+ `useHref() may be used only in the context of a <Router> component.`
66265
+ );
66266
+ let { basename, navigator } = React3.useContext(NavigationContext);
66267
+ let { hash, pathname, search } = useResolvedPath(to, { relative });
66268
+ let joinedPathname = pathname;
66269
+ if (basename !== "/") {
66270
+ joinedPathname = pathname === "/" ? basename : joinPaths([basename, pathname]);
66271
+ }
66272
+ return navigator.createHref({ pathname: joinedPathname, search, hash });
66273
+ }
66274
+ function useInRouterContext() {
66275
+ return React3.useContext(LocationContext) != null;
66276
+ }
66277
+ function useLocation() {
66278
+ invariant(
66279
+ useInRouterContext(),
66280
+ // TODO: This error is probably because they somehow have 2 versions of the
66281
+ // router loaded. We can help them understand how to avoid that.
66282
+ `useLocation() may be used only in the context of a <Router> component.`
66283
+ );
66284
+ return React3.useContext(LocationContext).location;
66285
+ }
66286
+ var navigateEffectWarning = `You should call navigate() in a React.useEffect(), not when your component is first rendered.`;
66287
+ function useIsomorphicLayoutEffect(cb) {
66288
+ let isStatic = React3.useContext(NavigationContext).static;
66289
+ if (!isStatic) {
66290
+ React3.useLayoutEffect(cb);
66291
+ }
66292
+ }
66293
+ function useNavigate() {
66294
+ let { isDataRoute } = React3.useContext(RouteContext);
66295
+ return isDataRoute ? useNavigateStable() : useNavigateUnstable();
66296
+ }
66297
+ function useNavigateUnstable() {
66298
+ invariant(
66299
+ useInRouterContext(),
66300
+ // TODO: This error is probably because they somehow have 2 versions of the
66301
+ // router loaded. We can help them understand how to avoid that.
66302
+ `useNavigate() may be used only in the context of a <Router> component.`
66303
+ );
66304
+ let dataRouterContext = React3.useContext(DataRouterContext);
66305
+ let { basename, navigator } = React3.useContext(NavigationContext);
66306
+ let { matches } = React3.useContext(RouteContext);
66307
+ let { pathname: locationPathname } = useLocation();
66308
+ let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
66309
+ let activeRef = React3.useRef(false);
66310
+ useIsomorphicLayoutEffect(() => {
66311
+ activeRef.current = true;
66312
+ });
66313
+ let navigate = React3.useCallback(
66314
+ (to, options = {}) => {
66315
+ warning(activeRef.current, navigateEffectWarning);
66316
+ if (!activeRef.current) return;
66317
+ if (typeof to === "number") {
66318
+ navigator.go(to);
66319
+ return;
66320
+ }
66321
+ let path = resolveTo(
66322
+ to,
66323
+ JSON.parse(routePathnamesJson),
66324
+ locationPathname,
66325
+ options.relative === "path"
66326
+ );
66327
+ if (dataRouterContext == null && basename !== "/") {
66328
+ path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
66329
+ }
66330
+ (!!options.replace ? navigator.replace : navigator.push)(
66331
+ path,
66332
+ options.state,
66333
+ options
66334
+ );
66335
+ },
66336
+ [
66337
+ basename,
66338
+ navigator,
66339
+ routePathnamesJson,
66340
+ locationPathname,
66341
+ dataRouterContext
66342
+ ]
66343
+ );
66344
+ return navigate;
66345
+ }
66346
+ React3.createContext(null);
66347
+ function useResolvedPath(to, { relative } = {}) {
66348
+ let { matches } = React3.useContext(RouteContext);
66349
+ let { pathname: locationPathname } = useLocation();
66350
+ let routePathnamesJson = JSON.stringify(getResolveToMatches(matches));
66351
+ return React3.useMemo(
66352
+ () => resolveTo(
66353
+ to,
66354
+ JSON.parse(routePathnamesJson),
66355
+ locationPathname,
66356
+ relative === "path"
66357
+ ),
66358
+ [to, routePathnamesJson, locationPathname, relative]
66359
+ );
66360
+ }
66361
+ function useRoutesImpl(routes, locationArg, dataRouterState, unstable_onError, future) {
66362
+ invariant(
66363
+ useInRouterContext(),
66364
+ // TODO: This error is probably because they somehow have 2 versions of the
66365
+ // router loaded. We can help them understand how to avoid that.
66366
+ `useRoutes() may be used only in the context of a <Router> component.`
66367
+ );
66368
+ let { navigator } = React3.useContext(NavigationContext);
66369
+ let { matches: parentMatches } = React3.useContext(RouteContext);
66370
+ let routeMatch = parentMatches[parentMatches.length - 1];
66371
+ let parentParams = routeMatch ? routeMatch.params : {};
66372
+ let parentPathname = routeMatch ? routeMatch.pathname : "/";
66373
+ let parentPathnameBase = routeMatch ? routeMatch.pathnameBase : "/";
66374
+ let parentRoute = routeMatch && routeMatch.route;
66375
+ {
66376
+ let parentPath = parentRoute && parentRoute.path || "";
66377
+ warningOnce(
66378
+ parentPathname,
66379
+ !parentRoute || parentPath.endsWith("*") || parentPath.endsWith("*?"),
66380
+ `You rendered descendant <Routes> (or called \`useRoutes()\`) at "${parentPathname}" (under <Route path="${parentPath}">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
66381
+
66382
+ Please change the parent <Route path="${parentPath}"> to <Route path="${parentPath === "/" ? "*" : `${parentPath}/*`}">.`
66383
+ );
66384
+ }
66385
+ let locationFromContext = useLocation();
66386
+ let location;
66387
+ {
66388
+ location = locationFromContext;
66389
+ }
66390
+ let pathname = location.pathname || "/";
66391
+ let remainingPathname = pathname;
66392
+ if (parentPathnameBase !== "/") {
66393
+ let parentSegments = parentPathnameBase.replace(/^\//, "").split("/");
66394
+ let segments = pathname.replace(/^\//, "").split("/");
66395
+ remainingPathname = "/" + segments.slice(parentSegments.length).join("/");
66396
+ }
66397
+ let matches = matchRoutes(routes, { pathname: remainingPathname });
66398
+ {
66399
+ warning(
66400
+ parentRoute || matches != null,
66401
+ `No routes matched location "${location.pathname}${location.search}${location.hash}" `
66402
+ );
66403
+ warning(
66404
+ matches == null || matches[matches.length - 1].route.element !== void 0 || matches[matches.length - 1].route.Component !== void 0 || matches[matches.length - 1].route.lazy !== void 0,
66405
+ `Matched leaf route at location "${location.pathname}${location.search}${location.hash}" does not have an element or Component. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.`
66406
+ );
66407
+ }
66408
+ let renderedMatches = _renderMatches(
66409
+ matches && matches.map(
66410
+ (match) => Object.assign({}, match, {
66411
+ params: Object.assign({}, parentParams, match.params),
66412
+ pathname: joinPaths([
66413
+ parentPathnameBase,
66414
+ // Re-encode pathnames that were decoded inside matchRoutes
66415
+ navigator.encodeLocation ? navigator.encodeLocation(match.pathname).pathname : match.pathname
66416
+ ]),
66417
+ pathnameBase: match.pathnameBase === "/" ? parentPathnameBase : joinPaths([
66418
+ parentPathnameBase,
66419
+ // Re-encode pathnames that were decoded inside matchRoutes
66420
+ navigator.encodeLocation ? navigator.encodeLocation(match.pathnameBase).pathname : match.pathnameBase
66421
+ ])
66422
+ })
66423
+ ),
66424
+ parentMatches,
66425
+ dataRouterState,
66426
+ unstable_onError,
66427
+ future
66428
+ );
66429
+ return renderedMatches;
66430
+ }
66431
+ function DefaultErrorComponent() {
66432
+ let error = useRouteError();
66433
+ let message = isRouteErrorResponse(error) ? `${error.status} ${error.statusText}` : error instanceof Error ? error.message : JSON.stringify(error);
66434
+ let stack = error instanceof Error ? error.stack : null;
66435
+ let lightgrey = "rgba(200,200,200, 0.5)";
66436
+ let preStyles = { padding: "0.5rem", backgroundColor: lightgrey };
66437
+ let codeStyles = { padding: "2px 4px", backgroundColor: lightgrey };
66438
+ let devInfo = null;
66439
+ {
66440
+ console.error(
66441
+ "Error handled by React Router default ErrorBoundary:",
66442
+ error
66443
+ );
66444
+ devInfo = /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("p", null, "\u{1F4BF} Hey developer \u{1F44B}"), /* @__PURE__ */ React3.createElement("p", null, "You can provide a way better UX than this when your app throws errors by providing your own ", /* @__PURE__ */ React3.createElement("code", { style: codeStyles }, "ErrorBoundary"), " or", " ", /* @__PURE__ */ React3.createElement("code", { style: codeStyles }, "errorElement"), " prop on your route."));
66445
+ }
66446
+ return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("h2", null, "Unexpected Application Error!"), /* @__PURE__ */ React3.createElement("h3", { style: { fontStyle: "italic" } }, message), stack ? /* @__PURE__ */ React3.createElement("pre", { style: preStyles }, stack) : null, devInfo);
66447
+ }
66448
+ var defaultErrorElement = /* @__PURE__ */ React3.createElement(DefaultErrorComponent, null);
66449
+ var RenderErrorBoundary = class extends React3.Component {
66450
+ constructor(props) {
66451
+ super(props);
66452
+ this.state = {
66453
+ location: props.location,
66454
+ revalidation: props.revalidation,
66455
+ error: props.error
66456
+ };
66457
+ }
66458
+ static getDerivedStateFromError(error) {
66459
+ return { error };
66460
+ }
66461
+ static getDerivedStateFromProps(props, state) {
66462
+ if (state.location !== props.location || state.revalidation !== "idle" && props.revalidation === "idle") {
66463
+ return {
66464
+ error: props.error,
66465
+ location: props.location,
66466
+ revalidation: props.revalidation
66467
+ };
66468
+ }
66469
+ return {
66470
+ error: props.error !== void 0 ? props.error : state.error,
66471
+ location: state.location,
66472
+ revalidation: props.revalidation || state.revalidation
66473
+ };
66474
+ }
66475
+ componentDidCatch(error, errorInfo) {
66476
+ if (this.props.unstable_onError) {
66477
+ this.props.unstable_onError(error, errorInfo);
66478
+ } else {
66479
+ console.error(
66480
+ "React Router caught the following error during render",
66481
+ error
66482
+ );
66483
+ }
66484
+ }
66485
+ render() {
66486
+ return this.state.error !== void 0 ? /* @__PURE__ */ React3.createElement(RouteContext.Provider, { value: this.props.routeContext }, /* @__PURE__ */ React3.createElement(
66487
+ RouteErrorContext.Provider,
66488
+ {
66489
+ value: this.state.error,
66490
+ children: this.props.component
66491
+ }
66492
+ )) : this.props.children;
66493
+ }
66494
+ };
66495
+ function RenderedRoute({ routeContext, match, children }) {
66496
+ let dataRouterContext = React3.useContext(DataRouterContext);
66497
+ if (dataRouterContext && dataRouterContext.static && dataRouterContext.staticContext && (match.route.errorElement || match.route.ErrorBoundary)) {
66498
+ dataRouterContext.staticContext._deepestRenderedBoundaryId = match.route.id;
66499
+ }
66500
+ return /* @__PURE__ */ React3.createElement(RouteContext.Provider, { value: routeContext }, children);
66501
+ }
66502
+ function _renderMatches(matches, parentMatches = [], dataRouterState = null, unstable_onError = null, future = null) {
66503
+ if (matches == null) {
66504
+ if (!dataRouterState) {
66505
+ return null;
66506
+ }
66507
+ if (dataRouterState.errors) {
66508
+ matches = dataRouterState.matches;
66509
+ } else if (parentMatches.length === 0 && !dataRouterState.initialized && dataRouterState.matches.length > 0) {
66510
+ matches = dataRouterState.matches;
66511
+ } else {
66512
+ return null;
66513
+ }
66514
+ }
66515
+ let renderedMatches = matches;
66516
+ let errors = dataRouterState?.errors;
66517
+ if (errors != null) {
66518
+ let errorIndex = renderedMatches.findIndex(
66519
+ (m) => m.route.id && errors?.[m.route.id] !== void 0
66520
+ );
66521
+ invariant(
66522
+ errorIndex >= 0,
66523
+ `Could not find a matching route for errors on route IDs: ${Object.keys(
66524
+ errors
66525
+ ).join(",")}`
66526
+ );
66527
+ renderedMatches = renderedMatches.slice(
66528
+ 0,
66529
+ Math.min(renderedMatches.length, errorIndex + 1)
66530
+ );
66531
+ }
66532
+ let renderFallback = false;
66533
+ let fallbackIndex = -1;
66534
+ if (dataRouterState) {
66535
+ for (let i = 0; i < renderedMatches.length; i++) {
66536
+ let match = renderedMatches[i];
66537
+ if (match.route.HydrateFallback || match.route.hydrateFallbackElement) {
66538
+ fallbackIndex = i;
66539
+ }
66540
+ if (match.route.id) {
66541
+ let { loaderData, errors: errors2 } = dataRouterState;
66542
+ let needsToRunLoader = match.route.loader && !loaderData.hasOwnProperty(match.route.id) && (!errors2 || errors2[match.route.id] === void 0);
66543
+ if (match.route.lazy || needsToRunLoader) {
66544
+ renderFallback = true;
66545
+ if (fallbackIndex >= 0) {
66546
+ renderedMatches = renderedMatches.slice(0, fallbackIndex + 1);
66547
+ } else {
66548
+ renderedMatches = [renderedMatches[0]];
66549
+ }
66550
+ break;
66551
+ }
66552
+ }
66553
+ }
66554
+ }
66555
+ return renderedMatches.reduceRight(
66556
+ (outlet, match, index) => {
66557
+ let error;
66558
+ let shouldRenderHydrateFallback = false;
66559
+ let errorElement = null;
66560
+ let hydrateFallbackElement = null;
66561
+ if (dataRouterState) {
66562
+ error = errors && match.route.id ? errors[match.route.id] : void 0;
66563
+ errorElement = match.route.errorElement || defaultErrorElement;
66564
+ if (renderFallback) {
66565
+ if (fallbackIndex < 0 && index === 0) {
66566
+ warningOnce(
66567
+ "route-fallback",
66568
+ false,
66569
+ "No `HydrateFallback` element provided to render during initial hydration"
66570
+ );
66571
+ shouldRenderHydrateFallback = true;
66572
+ hydrateFallbackElement = null;
66573
+ } else if (fallbackIndex === index) {
66574
+ shouldRenderHydrateFallback = true;
66575
+ hydrateFallbackElement = match.route.hydrateFallbackElement || null;
66576
+ }
66577
+ }
66578
+ }
66579
+ let matches2 = parentMatches.concat(renderedMatches.slice(0, index + 1));
66580
+ let getChildren = () => {
66581
+ let children;
66582
+ if (error) {
66583
+ children = errorElement;
66584
+ } else if (shouldRenderHydrateFallback) {
66585
+ children = hydrateFallbackElement;
66586
+ } else if (match.route.Component) {
66587
+ children = /* @__PURE__ */ React3.createElement(match.route.Component, null);
66588
+ } else if (match.route.element) {
66589
+ children = match.route.element;
66590
+ } else {
66591
+ children = outlet;
66592
+ }
66593
+ return /* @__PURE__ */ React3.createElement(
66594
+ RenderedRoute,
66595
+ {
66596
+ match,
66597
+ routeContext: {
66598
+ outlet,
66599
+ matches: matches2,
66600
+ isDataRoute: dataRouterState != null
66601
+ },
66602
+ children
66603
+ }
66604
+ );
66605
+ };
66606
+ return dataRouterState && (match.route.ErrorBoundary || match.route.errorElement || index === 0) ? /* @__PURE__ */ React3.createElement(
66607
+ RenderErrorBoundary,
66608
+ {
66609
+ location: dataRouterState.location,
66610
+ revalidation: dataRouterState.revalidation,
66611
+ component: errorElement,
66612
+ error,
66613
+ children: getChildren(),
66614
+ routeContext: { outlet: null, matches: matches2, isDataRoute: true },
66615
+ unstable_onError
66616
+ }
66617
+ ) : getChildren();
66618
+ },
66619
+ null
66620
+ );
66621
+ }
66622
+ function getDataRouterConsoleError(hookName) {
66623
+ return `${hookName} must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.`;
66624
+ }
66625
+ function useDataRouterContext(hookName) {
66626
+ let ctx = React3.useContext(DataRouterContext);
66627
+ invariant(ctx, getDataRouterConsoleError(hookName));
66628
+ return ctx;
66629
+ }
66630
+ function useDataRouterState(hookName) {
66631
+ let state = React3.useContext(DataRouterStateContext);
66632
+ invariant(state, getDataRouterConsoleError(hookName));
66633
+ return state;
66634
+ }
66635
+ function useRouteContext(hookName) {
66636
+ let route = React3.useContext(RouteContext);
66637
+ invariant(route, getDataRouterConsoleError(hookName));
66638
+ return route;
66639
+ }
66640
+ function useCurrentRouteId(hookName) {
66641
+ let route = useRouteContext(hookName);
66642
+ let thisRoute = route.matches[route.matches.length - 1];
66643
+ invariant(
66644
+ thisRoute.route.id,
66645
+ `${hookName} can only be used on routes that contain a unique "id"`
66646
+ );
66647
+ return thisRoute.route.id;
66648
+ }
66649
+ function useRouteId() {
66650
+ return useCurrentRouteId("useRouteId" /* UseRouteId */);
66651
+ }
66652
+ function useRouteError() {
66653
+ let error = React3.useContext(RouteErrorContext);
66654
+ let state = useDataRouterState("useRouteError" /* UseRouteError */);
66655
+ let routeId = useCurrentRouteId("useRouteError" /* UseRouteError */);
66656
+ if (error !== void 0) {
66657
+ return error;
66658
+ }
66659
+ return state.errors?.[routeId];
66660
+ }
66661
+ function useNavigateStable() {
66662
+ let { router } = useDataRouterContext("useNavigate" /* UseNavigateStable */);
66663
+ let id = useCurrentRouteId("useNavigate" /* UseNavigateStable */);
66664
+ let activeRef = React3.useRef(false);
66665
+ useIsomorphicLayoutEffect(() => {
66666
+ activeRef.current = true;
66667
+ });
66668
+ let navigate = React3.useCallback(
66669
+ async (to, options = {}) => {
66670
+ warning(activeRef.current, navigateEffectWarning);
66671
+ if (!activeRef.current) return;
66672
+ if (typeof to === "number") {
66673
+ router.navigate(to);
66674
+ } else {
66675
+ await router.navigate(to, { fromRouteId: id, ...options });
66676
+ }
66677
+ },
66678
+ [router, id]
66679
+ );
66680
+ return navigate;
66681
+ }
66682
+ var alreadyWarned = {};
66683
+ function warningOnce(key, cond, message) {
66684
+ if (!cond && !alreadyWarned[key]) {
66685
+ alreadyWarned[key] = true;
66686
+ warning(false, message);
66687
+ }
66688
+ }
66689
+ React3.memo(DataRoutes);
66690
+ function DataRoutes({
66691
+ routes,
66692
+ future,
66693
+ state,
66694
+ unstable_onError
66695
+ }) {
66696
+ return useRoutesImpl(routes, void 0, state, unstable_onError, future);
66697
+ }
66698
+
66699
+ // lib/dom/dom.ts
66700
+ var defaultMethod = "get";
66701
+ var defaultEncType = "application/x-www-form-urlencoded";
66702
+ function isHtmlElement(object) {
66703
+ return object != null && typeof object.tagName === "string";
66704
+ }
66705
+ function isButtonElement(object) {
66706
+ return isHtmlElement(object) && object.tagName.toLowerCase() === "button";
66707
+ }
66708
+ function isFormElement(object) {
66709
+ return isHtmlElement(object) && object.tagName.toLowerCase() === "form";
66710
+ }
66711
+ function isInputElement(object) {
66712
+ return isHtmlElement(object) && object.tagName.toLowerCase() === "input";
66713
+ }
66714
+ function isModifiedEvent(event) {
66715
+ return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
66716
+ }
66717
+ function shouldProcessLinkClick(event, target) {
66718
+ return event.button === 0 && // Ignore everything but left clicks
66719
+ (!target || target === "_self") && // Let browser handle "target=_blank" etc.
66720
+ !isModifiedEvent(event);
66721
+ }
66722
+ var _formDataSupportsSubmitter = null;
66723
+ function isFormDataSubmitterSupported() {
66724
+ if (_formDataSupportsSubmitter === null) {
66725
+ try {
66726
+ new FormData(
66727
+ document.createElement("form"),
66728
+ // @ts-expect-error if FormData supports the submitter parameter, this will throw
66729
+ 0
66730
+ );
66731
+ _formDataSupportsSubmitter = false;
66732
+ } catch (e) {
66733
+ _formDataSupportsSubmitter = true;
66734
+ }
66735
+ }
66736
+ return _formDataSupportsSubmitter;
66737
+ }
66738
+ var supportedFormEncTypes = /* @__PURE__ */ new Set([
66739
+ "application/x-www-form-urlencoded",
66740
+ "multipart/form-data",
66741
+ "text/plain"
66742
+ ]);
66743
+ function getFormEncType(encType) {
66744
+ if (encType != null && !supportedFormEncTypes.has(encType)) {
66745
+ warning(
66746
+ false,
66747
+ `"${encType}" is not a valid \`encType\` for \`<Form>\`/\`<fetcher.Form>\` and will default to "${defaultEncType}"`
66748
+ );
66749
+ return null;
66750
+ }
66751
+ return encType;
66752
+ }
66753
+ function getFormSubmissionInfo(target, basename) {
66754
+ let method;
66755
+ let action;
66756
+ let encType;
66757
+ let formData;
66758
+ let body;
66759
+ if (isFormElement(target)) {
66760
+ let attr = target.getAttribute("action");
66761
+ action = attr ? stripBasename(attr, basename) : null;
66762
+ method = target.getAttribute("method") || defaultMethod;
66763
+ encType = getFormEncType(target.getAttribute("enctype")) || defaultEncType;
66764
+ formData = new FormData(target);
66765
+ } else if (isButtonElement(target) || isInputElement(target) && (target.type === "submit" || target.type === "image")) {
66766
+ let form = target.form;
66767
+ if (form == null) {
66768
+ throw new Error(
66769
+ `Cannot submit a <button> or <input type="submit"> without a <form>`
66770
+ );
66771
+ }
66772
+ let attr = target.getAttribute("formaction") || form.getAttribute("action");
66773
+ action = attr ? stripBasename(attr, basename) : null;
66774
+ method = target.getAttribute("formmethod") || form.getAttribute("method") || defaultMethod;
66775
+ encType = getFormEncType(target.getAttribute("formenctype")) || getFormEncType(form.getAttribute("enctype")) || defaultEncType;
66776
+ formData = new FormData(form, target);
66777
+ if (!isFormDataSubmitterSupported()) {
66778
+ let { name, type, value } = target;
66779
+ if (type === "image") {
66780
+ let prefix = name ? `${name}.` : "";
66781
+ formData.append(`${prefix}x`, "0");
66782
+ formData.append(`${prefix}y`, "0");
66783
+ } else if (name) {
66784
+ formData.append(name, value);
66785
+ }
66786
+ }
66787
+ } else if (isHtmlElement(target)) {
66788
+ throw new Error(
66789
+ `Cannot submit element that is not <form>, <button>, or <input type="submit|image">`
66790
+ );
66791
+ } else {
66792
+ method = defaultMethod;
66793
+ action = null;
66794
+ encType = defaultEncType;
66795
+ body = target;
66796
+ }
66797
+ if (formData && encType === "text/plain") {
66798
+ body = formData;
66799
+ formData = void 0;
66800
+ }
66801
+ return { action, method: method.toLowerCase(), encType, formData, body };
66802
+ }
66803
+ Object.getOwnPropertyNames(Object.prototype).sort().join("\0");
66804
+
66805
+ // lib/dom/ssr/invariant.ts
66806
+ function invariant2(value, message) {
66807
+ if (value === false || value === null || typeof value === "undefined") {
66808
+ throw new Error(message);
66809
+ }
66810
+ }
66811
+ function singleFetchUrl(reqUrl, basename, extension) {
66812
+ let url = typeof reqUrl === "string" ? new URL(
66813
+ reqUrl,
66814
+ // This can be called during the SSR flow via PrefetchPageLinksImpl so
66815
+ // don't assume window is available
66816
+ typeof window === "undefined" ? "server://singlefetch/" : window.location.origin
66817
+ ) : reqUrl;
66818
+ if (url.pathname === "/") {
66819
+ url.pathname = `_root.${extension}`;
66820
+ } else if (basename && stripBasename(url.pathname, basename) === "/") {
66821
+ url.pathname = `${basename.replace(/\/$/, "")}/_root.${extension}`;
66822
+ } else {
66823
+ url.pathname = `${url.pathname.replace(/\/$/, "")}.${extension}`;
66824
+ }
66825
+ return url;
66826
+ }
66827
+
66828
+ // lib/dom/ssr/routeModules.ts
66829
+ async function loadRouteModule(route, routeModulesCache) {
66830
+ if (route.id in routeModulesCache) {
66831
+ return routeModulesCache[route.id];
66832
+ }
66833
+ try {
66834
+ let routeModule = await import(
66835
+ /* @vite-ignore */
66836
+ /* webpackIgnore: true */
66837
+ route.module
66838
+ );
66839
+ routeModulesCache[route.id] = routeModule;
66840
+ return routeModule;
66841
+ } catch (error) {
66842
+ console.error(
66843
+ `Error loading route module \`${route.module}\`, reloading page...`
66844
+ );
66845
+ console.error(error);
66846
+ if (window.__reactRouterContext && window.__reactRouterContext.isSpaMode && // @ts-expect-error
66847
+ import.meta.hot) {
66848
+ throw error;
66849
+ }
66850
+ window.location.reload();
66851
+ return new Promise(() => {
66852
+ });
66853
+ }
66854
+ }
66855
+ function isHtmlLinkDescriptor(object) {
66856
+ if (object == null) {
66857
+ return false;
66858
+ }
66859
+ if (object.href == null) {
66860
+ return object.rel === "preload" && typeof object.imageSrcSet === "string" && typeof object.imageSizes === "string";
66861
+ }
66862
+ return typeof object.rel === "string" && typeof object.href === "string";
66863
+ }
66864
+ async function getKeyedPrefetchLinks(matches, manifest, routeModules) {
66865
+ let links = await Promise.all(
66866
+ matches.map(async (match) => {
66867
+ let route = manifest.routes[match.route.id];
66868
+ if (route) {
66869
+ let mod = await loadRouteModule(route, routeModules);
66870
+ return mod.links ? mod.links() : [];
66871
+ }
66872
+ return [];
66873
+ })
66874
+ );
66875
+ return dedupeLinkDescriptors(
66876
+ links.flat(1).filter(isHtmlLinkDescriptor).filter((link) => link.rel === "stylesheet" || link.rel === "preload").map(
66877
+ (link) => link.rel === "stylesheet" ? { ...link, rel: "prefetch", as: "style" } : { ...link, rel: "prefetch" }
66878
+ )
66879
+ );
66880
+ }
66881
+ function getNewMatchesForLinks(page, nextMatches, currentMatches, manifest, location, mode) {
66882
+ let isNew = (match, index) => {
66883
+ if (!currentMatches[index]) return true;
66884
+ return match.route.id !== currentMatches[index].route.id;
66885
+ };
66886
+ let matchPathChanged = (match, index) => {
66887
+ return (
66888
+ // param change, /users/123 -> /users/456
66889
+ currentMatches[index].pathname !== match.pathname || // splat param changed, which is not present in match.path
66890
+ // e.g. /files/images/avatar.jpg -> files/finances.xls
66891
+ currentMatches[index].route.path?.endsWith("*") && currentMatches[index].params["*"] !== match.params["*"]
66892
+ );
66893
+ };
66894
+ if (mode === "assets") {
66895
+ return nextMatches.filter(
66896
+ (match, index) => isNew(match, index) || matchPathChanged(match, index)
66897
+ );
66898
+ }
66899
+ if (mode === "data") {
66900
+ return nextMatches.filter((match, index) => {
66901
+ let manifestRoute = manifest.routes[match.route.id];
66902
+ if (!manifestRoute || !manifestRoute.hasLoader) {
66903
+ return false;
66904
+ }
66905
+ if (isNew(match, index) || matchPathChanged(match, index)) {
66906
+ return true;
66907
+ }
66908
+ if (match.route.shouldRevalidate) {
66909
+ let routeChoice = match.route.shouldRevalidate({
66910
+ currentUrl: new URL(
66911
+ location.pathname + location.search + location.hash,
66912
+ window.origin
66913
+ ),
66914
+ currentParams: currentMatches[0]?.params || {},
66915
+ nextUrl: new URL(page, window.origin),
66916
+ nextParams: match.params,
66917
+ defaultShouldRevalidate: true
66918
+ });
66919
+ if (typeof routeChoice === "boolean") {
66920
+ return routeChoice;
66921
+ }
66922
+ }
66923
+ return true;
66924
+ });
66925
+ }
66926
+ return [];
66927
+ }
66928
+ function getModuleLinkHrefs(matches, manifest, { includeHydrateFallback } = {}) {
66929
+ return dedupeHrefs(
66930
+ matches.map((match) => {
66931
+ let route = manifest.routes[match.route.id];
66932
+ if (!route) return [];
66933
+ let hrefs = [route.module];
66934
+ if (route.clientActionModule) {
66935
+ hrefs = hrefs.concat(route.clientActionModule);
66936
+ }
66937
+ if (route.clientLoaderModule) {
66938
+ hrefs = hrefs.concat(route.clientLoaderModule);
66939
+ }
66940
+ if (includeHydrateFallback && route.hydrateFallbackModule) {
66941
+ hrefs = hrefs.concat(route.hydrateFallbackModule);
66942
+ }
66943
+ if (route.imports) {
66944
+ hrefs = hrefs.concat(route.imports);
66945
+ }
66946
+ return hrefs;
66947
+ }).flat(1)
66948
+ );
66949
+ }
66950
+ function dedupeHrefs(hrefs) {
66951
+ return [...new Set(hrefs)];
66952
+ }
66953
+ function sortKeys(obj) {
66954
+ let sorted = {};
66955
+ let keys = Object.keys(obj).sort();
66956
+ for (let key of keys) {
66957
+ sorted[key] = obj[key];
66958
+ }
66959
+ return sorted;
66960
+ }
66961
+ function dedupeLinkDescriptors(descriptors, preloads) {
66962
+ let set = /* @__PURE__ */ new Set();
66963
+ new Set(preloads);
66964
+ return descriptors.reduce((deduped, descriptor) => {
66965
+ let key = JSON.stringify(sortKeys(descriptor));
66966
+ if (!set.has(key)) {
66967
+ set.add(key);
66968
+ deduped.push({ key, link: descriptor });
66969
+ }
66970
+ return deduped;
66971
+ }, []);
66972
+ }
66973
+
66974
+ // lib/dom/ssr/components.tsx
66975
+ function useDataRouterContext2() {
66976
+ let context = React3.useContext(DataRouterContext);
66977
+ invariant2(
66978
+ context,
66979
+ "You must render this element inside a <DataRouterContext.Provider> element"
66980
+ );
66981
+ return context;
66982
+ }
66983
+ function useDataRouterStateContext() {
66984
+ let context = React3.useContext(DataRouterStateContext);
66985
+ invariant2(
66986
+ context,
66987
+ "You must render this element inside a <DataRouterStateContext.Provider> element"
66988
+ );
66989
+ return context;
66990
+ }
66991
+ var FrameworkContext = React3.createContext(void 0);
66992
+ FrameworkContext.displayName = "FrameworkContext";
66993
+ function useFrameworkContext() {
66994
+ let context = React3.useContext(FrameworkContext);
66995
+ invariant2(
66996
+ context,
66997
+ "You must render this element inside a <HydratedRouter> element"
66998
+ );
66999
+ return context;
67000
+ }
67001
+ function usePrefetchBehavior(prefetch, theirElementProps) {
67002
+ let frameworkContext = React3.useContext(FrameworkContext);
67003
+ let [maybePrefetch, setMaybePrefetch] = React3.useState(false);
67004
+ let [shouldPrefetch, setShouldPrefetch] = React3.useState(false);
67005
+ let { onFocus, onBlur, onMouseEnter, onMouseLeave, onTouchStart } = theirElementProps;
67006
+ let ref = React3.useRef(null);
67007
+ React3.useEffect(() => {
67008
+ if (prefetch === "render") {
67009
+ setShouldPrefetch(true);
67010
+ }
67011
+ if (prefetch === "viewport") {
67012
+ let callback = (entries) => {
67013
+ entries.forEach((entry) => {
67014
+ setShouldPrefetch(entry.isIntersecting);
67015
+ });
67016
+ };
67017
+ let observer = new IntersectionObserver(callback, { threshold: 0.5 });
67018
+ if (ref.current) observer.observe(ref.current);
67019
+ return () => {
67020
+ observer.disconnect();
67021
+ };
67022
+ }
67023
+ }, [prefetch]);
67024
+ React3.useEffect(() => {
67025
+ if (maybePrefetch) {
67026
+ let id = setTimeout(() => {
67027
+ setShouldPrefetch(true);
67028
+ }, 100);
67029
+ return () => {
67030
+ clearTimeout(id);
67031
+ };
67032
+ }
67033
+ }, [maybePrefetch]);
67034
+ let setIntent = () => {
67035
+ setMaybePrefetch(true);
67036
+ };
67037
+ let cancelIntent = () => {
67038
+ setMaybePrefetch(false);
67039
+ setShouldPrefetch(false);
67040
+ };
67041
+ if (!frameworkContext) {
67042
+ return [false, ref, {}];
67043
+ }
67044
+ if (prefetch !== "intent") {
67045
+ return [shouldPrefetch, ref, {}];
67046
+ }
67047
+ return [
67048
+ shouldPrefetch,
67049
+ ref,
67050
+ {
67051
+ onFocus: composeEventHandlers(onFocus, setIntent),
67052
+ onBlur: composeEventHandlers(onBlur, cancelIntent),
67053
+ onMouseEnter: composeEventHandlers(onMouseEnter, setIntent),
67054
+ onMouseLeave: composeEventHandlers(onMouseLeave, cancelIntent),
67055
+ onTouchStart: composeEventHandlers(onTouchStart, setIntent)
67056
+ }
67057
+ ];
67058
+ }
67059
+ function composeEventHandlers(theirHandler, ourHandler) {
67060
+ return (event) => {
67061
+ theirHandler && theirHandler(event);
67062
+ if (!event.defaultPrevented) {
67063
+ ourHandler(event);
67064
+ }
67065
+ };
67066
+ }
67067
+ function PrefetchPageLinks({ page, ...linkProps }) {
67068
+ let { router } = useDataRouterContext2();
67069
+ let matches = React3.useMemo(
67070
+ () => matchRoutes(router.routes, page, router.basename),
67071
+ [router.routes, page, router.basename]
67072
+ );
67073
+ if (!matches) {
67074
+ return null;
67075
+ }
67076
+ return /* @__PURE__ */ React3.createElement(PrefetchPageLinksImpl, { page, matches, ...linkProps });
67077
+ }
67078
+ function useKeyedPrefetchLinks(matches) {
67079
+ let { manifest, routeModules } = useFrameworkContext();
67080
+ let [keyedPrefetchLinks, setKeyedPrefetchLinks] = React3.useState([]);
67081
+ React3.useEffect(() => {
67082
+ let interrupted = false;
67083
+ void getKeyedPrefetchLinks(matches, manifest, routeModules).then(
67084
+ (links) => {
67085
+ if (!interrupted) {
67086
+ setKeyedPrefetchLinks(links);
67087
+ }
67088
+ }
67089
+ );
67090
+ return () => {
67091
+ interrupted = true;
67092
+ };
67093
+ }, [matches, manifest, routeModules]);
67094
+ return keyedPrefetchLinks;
67095
+ }
67096
+ function PrefetchPageLinksImpl({
67097
+ page,
67098
+ matches: nextMatches,
67099
+ ...linkProps
67100
+ }) {
67101
+ let location = useLocation();
67102
+ let { manifest, routeModules } = useFrameworkContext();
67103
+ let { basename } = useDataRouterContext2();
67104
+ let { loaderData, matches } = useDataRouterStateContext();
67105
+ let newMatchesForData = React3.useMemo(
67106
+ () => getNewMatchesForLinks(
67107
+ page,
67108
+ nextMatches,
67109
+ matches,
67110
+ manifest,
67111
+ location,
67112
+ "data"
67113
+ ),
67114
+ [page, nextMatches, matches, manifest, location]
67115
+ );
67116
+ let newMatchesForAssets = React3.useMemo(
67117
+ () => getNewMatchesForLinks(
67118
+ page,
67119
+ nextMatches,
67120
+ matches,
67121
+ manifest,
67122
+ location,
67123
+ "assets"
67124
+ ),
67125
+ [page, nextMatches, matches, manifest, location]
67126
+ );
67127
+ let dataHrefs = React3.useMemo(() => {
67128
+ if (page === location.pathname + location.search + location.hash) {
67129
+ return [];
67130
+ }
67131
+ let routesParams = /* @__PURE__ */ new Set();
67132
+ let foundOptOutRoute = false;
67133
+ nextMatches.forEach((m) => {
67134
+ let manifestRoute = manifest.routes[m.route.id];
67135
+ if (!manifestRoute || !manifestRoute.hasLoader) {
67136
+ return;
67137
+ }
67138
+ if (!newMatchesForData.some((m2) => m2.route.id === m.route.id) && m.route.id in loaderData && routeModules[m.route.id]?.shouldRevalidate) {
67139
+ foundOptOutRoute = true;
67140
+ } else if (manifestRoute.hasClientLoader) {
67141
+ foundOptOutRoute = true;
67142
+ } else {
67143
+ routesParams.add(m.route.id);
67144
+ }
67145
+ });
67146
+ if (routesParams.size === 0) {
67147
+ return [];
67148
+ }
67149
+ let url = singleFetchUrl(page, basename, "data");
67150
+ if (foundOptOutRoute && routesParams.size > 0) {
67151
+ url.searchParams.set(
67152
+ "_routes",
67153
+ nextMatches.filter((m) => routesParams.has(m.route.id)).map((m) => m.route.id).join(",")
67154
+ );
67155
+ }
67156
+ return [url.pathname + url.search];
67157
+ }, [
67158
+ basename,
67159
+ loaderData,
67160
+ location,
67161
+ manifest,
67162
+ newMatchesForData,
67163
+ nextMatches,
67164
+ page,
67165
+ routeModules
67166
+ ]);
67167
+ let moduleHrefs = React3.useMemo(
67168
+ () => getModuleLinkHrefs(newMatchesForAssets, manifest),
67169
+ [newMatchesForAssets, manifest]
67170
+ );
67171
+ let keyedPrefetchLinks = useKeyedPrefetchLinks(newMatchesForAssets);
67172
+ return /* @__PURE__ */ React3.createElement(React3.Fragment, null, dataHrefs.map((href) => /* @__PURE__ */ React3.createElement("link", { key: href, rel: "prefetch", as: "fetch", href, ...linkProps })), moduleHrefs.map((href) => /* @__PURE__ */ React3.createElement("link", { key: href, rel: "modulepreload", href, ...linkProps })), keyedPrefetchLinks.map(({ key, link }) => (
67173
+ // these don't spread `linkProps` because they are full link descriptors
67174
+ // already with their own props
67175
+ /* @__PURE__ */ React3.createElement("link", { key, nonce: linkProps.nonce, ...link })
67176
+ )));
67177
+ }
67178
+ function mergeRefs(...refs) {
67179
+ return (value) => {
67180
+ refs.forEach((ref) => {
67181
+ if (typeof ref === "function") {
67182
+ ref(value);
67183
+ } else if (ref != null) {
67184
+ ref.current = value;
67185
+ }
67186
+ });
67187
+ };
67188
+ }
67189
+ var isBrowser = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
67190
+ try {
67191
+ if (isBrowser) {
67192
+ window.__reactRouterVersion = // @ts-expect-error
67193
+ "7.8.2";
67194
+ }
67195
+ } catch (e) {
67196
+ }
67197
+ var ABSOLUTE_URL_REGEX2 = /^(?:[a-z][a-z0-9+.-]*:|\/\/)/i;
67198
+ var Link = React3.forwardRef(
67199
+ function LinkWithRef({
67200
+ onClick,
67201
+ discover = "render",
67202
+ prefetch = "none",
67203
+ relative,
67204
+ reloadDocument,
67205
+ replace: replace2,
67206
+ state,
67207
+ target,
67208
+ to,
67209
+ preventScrollReset,
67210
+ viewTransition,
67211
+ ...rest
67212
+ }, forwardedRef) {
67213
+ let { basename } = React3.useContext(NavigationContext);
67214
+ let isAbsolute = typeof to === "string" && ABSOLUTE_URL_REGEX2.test(to);
67215
+ let absoluteHref;
67216
+ let isExternal = false;
67217
+ if (typeof to === "string" && isAbsolute) {
67218
+ absoluteHref = to;
67219
+ if (isBrowser) {
67220
+ try {
67221
+ let currentUrl = new URL(window.location.href);
67222
+ let targetUrl = to.startsWith("//") ? new URL(currentUrl.protocol + to) : new URL(to);
67223
+ let path = stripBasename(targetUrl.pathname, basename);
67224
+ if (targetUrl.origin === currentUrl.origin && path != null) {
67225
+ to = path + targetUrl.search + targetUrl.hash;
67226
+ } else {
67227
+ isExternal = true;
67228
+ }
67229
+ } catch (e) {
67230
+ warning(
67231
+ false,
67232
+ `<Link to="${to}"> contains an invalid URL which will probably break when clicked - please update to a valid URL path.`
67233
+ );
67234
+ }
67235
+ }
67236
+ }
67237
+ let href = useHref(to, { relative });
67238
+ let [shouldPrefetch, prefetchRef, prefetchHandlers] = usePrefetchBehavior(
67239
+ prefetch,
67240
+ rest
67241
+ );
67242
+ let internalOnClick = useLinkClickHandler(to, {
67243
+ replace: replace2,
67244
+ state,
67245
+ target,
67246
+ preventScrollReset,
67247
+ relative,
67248
+ viewTransition
67249
+ });
67250
+ function handleClick(event) {
67251
+ if (onClick) onClick(event);
67252
+ if (!event.defaultPrevented) {
67253
+ internalOnClick(event);
67254
+ }
67255
+ }
67256
+ let link = (
67257
+ // eslint-disable-next-line jsx-a11y/anchor-has-content
67258
+ /* @__PURE__ */ React3.createElement(
67259
+ "a",
67260
+ {
67261
+ ...rest,
67262
+ ...prefetchHandlers,
67263
+ href: absoluteHref || href,
67264
+ onClick: isExternal || reloadDocument ? onClick : handleClick,
67265
+ ref: mergeRefs(forwardedRef, prefetchRef),
67266
+ target,
67267
+ "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
67268
+ }
67269
+ )
67270
+ );
67271
+ return shouldPrefetch && !isAbsolute ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, link, /* @__PURE__ */ React3.createElement(PrefetchPageLinks, { page: href })) : link;
67272
+ }
67273
+ );
67274
+ Link.displayName = "Link";
67275
+ var NavLink = React3.forwardRef(
67276
+ function NavLinkWithRef({
67277
+ "aria-current": ariaCurrentProp = "page",
67278
+ caseSensitive = false,
67279
+ className: classNameProp = "",
67280
+ end = false,
67281
+ style: styleProp,
67282
+ to,
67283
+ viewTransition,
67284
+ children,
67285
+ ...rest
67286
+ }, ref) {
67287
+ let path = useResolvedPath(to, { relative: rest.relative });
67288
+ let location = useLocation();
67289
+ let routerState = React3.useContext(DataRouterStateContext);
67290
+ let { navigator, basename } = React3.useContext(NavigationContext);
67291
+ let isTransitioning = routerState != null && // Conditional usage is OK here because the usage of a data router is static
67292
+ // eslint-disable-next-line react-hooks/rules-of-hooks
67293
+ useViewTransitionState(path) && viewTransition === true;
67294
+ let toPathname = navigator.encodeLocation ? navigator.encodeLocation(path).pathname : path.pathname;
67295
+ let locationPathname = location.pathname;
67296
+ let nextLocationPathname = routerState && routerState.navigation && routerState.navigation.location ? routerState.navigation.location.pathname : null;
67297
+ if (!caseSensitive) {
67298
+ locationPathname = locationPathname.toLowerCase();
67299
+ nextLocationPathname = nextLocationPathname ? nextLocationPathname.toLowerCase() : null;
67300
+ toPathname = toPathname.toLowerCase();
67301
+ }
67302
+ if (nextLocationPathname && basename) {
67303
+ nextLocationPathname = stripBasename(nextLocationPathname, basename) || nextLocationPathname;
67304
+ }
67305
+ const endSlashPosition = toPathname !== "/" && toPathname.endsWith("/") ? toPathname.length - 1 : toPathname.length;
67306
+ let isActive = locationPathname === toPathname || !end && locationPathname.startsWith(toPathname) && locationPathname.charAt(endSlashPosition) === "/";
67307
+ let isPending = nextLocationPathname != null && (nextLocationPathname === toPathname || !end && nextLocationPathname.startsWith(toPathname) && nextLocationPathname.charAt(toPathname.length) === "/");
67308
+ let renderProps = {
67309
+ isActive,
67310
+ isPending,
67311
+ isTransitioning
67312
+ };
67313
+ let ariaCurrent = isActive ? ariaCurrentProp : void 0;
67314
+ let className;
67315
+ if (typeof classNameProp === "function") {
67316
+ className = classNameProp(renderProps);
67317
+ } else {
67318
+ className = [
67319
+ classNameProp,
67320
+ isActive ? "active" : null,
67321
+ isPending ? "pending" : null,
67322
+ isTransitioning ? "transitioning" : null
67323
+ ].filter(Boolean).join(" ");
67324
+ }
67325
+ let style = typeof styleProp === "function" ? styleProp(renderProps) : styleProp;
67326
+ return /* @__PURE__ */ React3.createElement(
67327
+ Link,
67328
+ {
67329
+ ...rest,
67330
+ "aria-current": ariaCurrent,
67331
+ className,
67332
+ ref,
67333
+ style,
67334
+ to,
67335
+ viewTransition
67336
+ },
67337
+ typeof children === "function" ? children(renderProps) : children
67338
+ );
67339
+ }
67340
+ );
67341
+ NavLink.displayName = "NavLink";
67342
+ var Form = React3.forwardRef(
67343
+ ({
67344
+ discover = "render",
67345
+ fetcherKey,
67346
+ navigate,
67347
+ reloadDocument,
67348
+ replace: replace2,
67349
+ state,
67350
+ method = defaultMethod,
67351
+ action,
67352
+ onSubmit,
67353
+ relative,
67354
+ preventScrollReset,
67355
+ viewTransition,
67356
+ ...props
67357
+ }, forwardedRef) => {
67358
+ let submit = useSubmit();
67359
+ let formAction = useFormAction(action, { relative });
67360
+ let formMethod = method.toLowerCase() === "get" ? "get" : "post";
67361
+ let isAbsolute = typeof action === "string" && ABSOLUTE_URL_REGEX2.test(action);
67362
+ let submitHandler = (event) => {
67363
+ onSubmit && onSubmit(event);
67364
+ if (event.defaultPrevented) return;
67365
+ event.preventDefault();
67366
+ let submitter = event.nativeEvent.submitter;
67367
+ let submitMethod = submitter?.getAttribute("formmethod") || method;
67368
+ submit(submitter || event.currentTarget, {
67369
+ fetcherKey,
67370
+ method: submitMethod,
67371
+ navigate,
67372
+ replace: replace2,
67373
+ state,
67374
+ relative,
67375
+ preventScrollReset,
67376
+ viewTransition
67377
+ });
67378
+ };
67379
+ return /* @__PURE__ */ React3.createElement(
67380
+ "form",
67381
+ {
67382
+ ref: forwardedRef,
67383
+ method: formMethod,
67384
+ action: formAction,
67385
+ onSubmit: reloadDocument ? onSubmit : submitHandler,
67386
+ ...props,
67387
+ "data-discover": !isAbsolute && discover === "render" ? "true" : void 0
67388
+ }
67389
+ );
67390
+ }
67391
+ );
67392
+ Form.displayName = "Form";
67393
+ function getDataRouterConsoleError2(hookName) {
67394
+ return `${hookName} must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router.`;
67395
+ }
67396
+ function useDataRouterContext3(hookName) {
67397
+ let ctx = React3.useContext(DataRouterContext);
67398
+ invariant(ctx, getDataRouterConsoleError2(hookName));
67399
+ return ctx;
67400
+ }
67401
+ function useLinkClickHandler(to, {
67402
+ target,
67403
+ replace: replaceProp,
67404
+ state,
67405
+ preventScrollReset,
67406
+ relative,
67407
+ viewTransition
67408
+ } = {}) {
67409
+ let navigate = useNavigate();
67410
+ let location = useLocation();
67411
+ let path = useResolvedPath(to, { relative });
67412
+ return React3.useCallback(
67413
+ (event) => {
67414
+ if (shouldProcessLinkClick(event, target)) {
67415
+ event.preventDefault();
67416
+ let replace2 = replaceProp !== void 0 ? replaceProp : createPath(location) === createPath(path);
67417
+ navigate(to, {
67418
+ replace: replace2,
67419
+ state,
67420
+ preventScrollReset,
67421
+ relative,
67422
+ viewTransition
67423
+ });
67424
+ }
67425
+ },
67426
+ [
67427
+ location,
67428
+ navigate,
67429
+ path,
67430
+ replaceProp,
67431
+ state,
67432
+ target,
67433
+ to,
67434
+ preventScrollReset,
67435
+ relative,
67436
+ viewTransition
67437
+ ]
67438
+ );
67439
+ }
67440
+ var fetcherId = 0;
67441
+ var getUniqueFetcherId = () => `__${String(++fetcherId)}__`;
67442
+ function useSubmit() {
67443
+ let { router } = useDataRouterContext3("useSubmit" /* UseSubmit */);
67444
+ let { basename } = React3.useContext(NavigationContext);
67445
+ let currentRouteId = useRouteId();
67446
+ return React3.useCallback(
67447
+ async (target, options = {}) => {
67448
+ let { action, method, encType, formData, body } = getFormSubmissionInfo(
67449
+ target,
67450
+ basename
67451
+ );
67452
+ if (options.navigate === false) {
67453
+ let key = options.fetcherKey || getUniqueFetcherId();
67454
+ await router.fetch(key, currentRouteId, options.action || action, {
67455
+ preventScrollReset: options.preventScrollReset,
67456
+ formData,
67457
+ body,
67458
+ formMethod: options.method || method,
67459
+ formEncType: options.encType || encType,
67460
+ flushSync: options.flushSync
67461
+ });
67462
+ } else {
67463
+ await router.navigate(options.action || action, {
67464
+ preventScrollReset: options.preventScrollReset,
67465
+ formData,
67466
+ body,
67467
+ formMethod: options.method || method,
67468
+ formEncType: options.encType || encType,
67469
+ replace: options.replace,
67470
+ state: options.state,
67471
+ fromRouteId: currentRouteId,
67472
+ flushSync: options.flushSync,
67473
+ viewTransition: options.viewTransition
67474
+ });
67475
+ }
67476
+ },
67477
+ [router, basename, currentRouteId]
67478
+ );
67479
+ }
67480
+ function useFormAction(action, { relative } = {}) {
67481
+ let { basename } = React3.useContext(NavigationContext);
67482
+ let routeContext = React3.useContext(RouteContext);
67483
+ invariant(routeContext, "useFormAction must be used inside a RouteContext");
67484
+ let [match] = routeContext.matches.slice(-1);
67485
+ let path = { ...useResolvedPath(action ? action : ".", { relative }) };
67486
+ let location = useLocation();
67487
+ if (action == null) {
67488
+ path.search = location.search;
67489
+ let params = new URLSearchParams(path.search);
67490
+ let indexValues = params.getAll("index");
67491
+ let hasNakedIndexParam = indexValues.some((v) => v === "");
67492
+ if (hasNakedIndexParam) {
67493
+ params.delete("index");
67494
+ indexValues.filter((v) => v).forEach((v) => params.append("index", v));
67495
+ let qs = params.toString();
67496
+ path.search = qs ? `?${qs}` : "";
67497
+ }
67498
+ }
67499
+ if ((!action || action === ".") && match.route.index) {
67500
+ path.search = path.search ? path.search.replace(/^\?/, "?index&") : "?index";
67501
+ }
67502
+ if (basename !== "/") {
67503
+ path.pathname = path.pathname === "/" ? basename : joinPaths([basename, path.pathname]);
67504
+ }
67505
+ return createPath(path);
67506
+ }
67507
+ function useViewTransitionState(to, { relative } = {}) {
67508
+ let vtContext = React3.useContext(ViewTransitionContext);
67509
+ invariant(
67510
+ vtContext != null,
67511
+ "`useViewTransitionState` must be used within `react-router-dom`'s `RouterProvider`. Did you accidentally import `RouterProvider` from `react-router`?"
67512
+ );
67513
+ let { basename } = useDataRouterContext3(
67514
+ "useViewTransitionState" /* useViewTransitionState */
67515
+ );
67516
+ let path = useResolvedPath(to, { relative });
67517
+ if (!vtContext.isTransitioning) {
67518
+ return false;
67519
+ }
67520
+ let currentPath = stripBasename(vtContext.currentLocation.pathname, basename) || vtContext.currentLocation.pathname;
67521
+ let nextPath = stripBasename(vtContext.nextLocation.pathname, basename) || vtContext.nextLocation.pathname;
67522
+ return matchPath(path.pathname, nextPath) != null || matchPath(path.pathname, currentPath) != null;
67523
+ }
67524
+
65817
67525
  var _excluded$6 = ["color"];
65818
67526
  var ExternalarrowMd = function ExternalarrowMd(_ref) {
65819
67527
  var _ref$color = _ref.color,
@@ -65841,7 +67549,7 @@ function RuledGrid(_ref) {
65841
67549
  var columns = _ref.columns,
65842
67550
  children = _ref.children,
65843
67551
  rest = _objectWithoutProperties(_ref, _excluded$5);
65844
- var childrenArray = React__default.Children.toArray(children);
67552
+ var childrenArray = React3__default.Children.toArray(children);
65845
67553
  return jsx(Grid, _objectSpread2(_objectSpread2({
65846
67554
  templateColumns: "repeat(".concat(columns, ", 1fr)"),
65847
67555
  border: "1px solid",
@@ -65873,10 +67581,6 @@ function HelloPage(_ref) {
65873
67581
  label: "Contact Us",
65874
67582
  href: "/contact-us",
65875
67583
  isExternal: false
65876
- }, {
65877
- label: "About Us",
65878
- href: "/about",
65879
- isExternal: false
65880
67584
  }, {
65881
67585
  label: "Changelog",
65882
67586
  href: "/analytics/changelog",
@@ -65890,114 +67594,141 @@ function HelloPage(_ref) {
65890
67594
  href: "https://www.youtube.com/watch?v=fuZLWeku6fw&list=PLwoJzeXHsBW6bAHmPz04RtWvpg_09-vqi",
65891
67595
  isExternal: true
65892
67596
  }];
65893
- return jsx(Box, {
67597
+ return jsx(VStack, {
65894
67598
  w: "full",
65895
- h: "100%",
65896
- overflowY: "auto",
65897
- overflowX: "hidden",
65898
- p: 4,
65899
- children: jsxs(VStack, {
65900
- align: "stretch",
65901
- justify: "flex-end",
65902
- gap: 4,
65903
- height: "full",
65904
- children: [jsxs(Flex, {
65905
- flexDirection: "column",
65906
- justifyContent: "flex-end",
65907
- flexShrink: 0,
65908
- paddingTop: "48px",
65909
- children: [jsx(Text, {
65910
- color: "#2BCFA1",
65911
- fontSize: "3xl",
65912
- fontWeight: "bold",
65913
- lineHeight: "40px",
65914
- children: "Hi ".concat(userName ? userName : "", " \uD83D\uDC4B\uD83C\uDFFB")
65915
- }), jsx(Text, {
65916
- color: "white",
65917
- fontSize: "3xl",
65918
- fontWeight: "bold",
65919
- lineHeight: "40px",
65920
- children: "How can I help?"
65921
- })]
65922
- }), jsxs(RuledGrid, {
65923
- columns: 1,
65924
- borderRadius: 16,
65925
- bg: "#222",
65926
- overflow: "hidden",
65927
- children: [jsxs(VStack, {
65928
- align: "stretch",
65929
- gap: 3,
65930
- p: 4,
65931
- children: [jsx(Box, {
65932
- p: 2.5,
65933
- w: "fit-content",
65934
- bg: "rgba(43, 207, 161, 0.1)",
65935
- border: "1px solid",
65936
- borderColor: "rgba(43, 207, 161, 0.1)",
65937
- borderRadius: "lg",
65938
- children: jsx(AIMd, {
65939
- color: "#2BCFA1"
65940
- })
65941
- }), jsxs(VStack, {
65942
- gap: 0.5,
67599
+ h: "full",
67600
+ minH: 0,
67601
+ spacing: 0,
67602
+ flex: 1,
67603
+ children: jsx(Box, {
67604
+ flex: 1,
67605
+ minH: 0,
67606
+ w: "full",
67607
+ overflowY: "auto",
67608
+ overflowX: "hidden",
67609
+ p: 4,
67610
+ css: {
67611
+ "&::-webkit-scrollbar": {
67612
+ width: "6px"
67613
+ },
67614
+ "&::-webkit-scrollbar-track": {
67615
+ background: "rgba(255, 255, 255, 0.1)",
67616
+ borderRadius: "3px"
67617
+ },
67618
+ "&::-webkit-scrollbar-thumb": {
67619
+ background: "rgba(255, 255, 255, 0.3)",
67620
+ borderRadius: "3px"
67621
+ },
67622
+ "&::-webkit-scrollbar-thumb:hover": {
67623
+ background: "rgba(255, 255, 255, 0.5)"
67624
+ },
67625
+ scrollBehavior: "smooth",
67626
+ WebkitOverflowScrolling: "touch"
67627
+ },
67628
+ children: jsxs(VStack, {
67629
+ align: "stretch",
67630
+ justify: "flex-start",
67631
+ gap: 4,
67632
+ children: [jsxs(Flex, {
67633
+ flexDirection: "column",
67634
+ justifyContent: "flex-end",
67635
+ flexShrink: 0,
67636
+ paddingTop: "48px",
67637
+ children: [jsx(Text, {
67638
+ color: "#2BCFA1",
67639
+ fontSize: "3xl",
67640
+ fontWeight: "bold",
67641
+ lineHeight: "40px",
67642
+ children: "Hi ".concat(userName ? userName : "", " \uD83D\uDC4B\uD83C\uDFFB")
67643
+ }), jsx(Text, {
67644
+ color: "white",
67645
+ fontSize: "3xl",
67646
+ fontWeight: "bold",
67647
+ lineHeight: "40px",
67648
+ children: "How can I help?"
67649
+ })]
67650
+ }), jsxs(RuledGrid, {
67651
+ columns: 1,
67652
+ borderRadius: 16,
67653
+ bg: "#222",
67654
+ overflow: "hidden",
67655
+ children: [jsxs(VStack, {
65943
67656
  align: "stretch",
65944
- children: [jsx(Text, {
65945
- color: "white",
65946
- fontSize: "base",
65947
- fontWeight: "medium",
65948
- lineHeight: "normal",
65949
- children: "AI Merchant Assistant"
65950
- }), jsx(Text, {
65951
- color: "#737373",
65952
- fontSize: "sm",
65953
- fontWeight: "normal",
65954
- lineHeight: "tight",
65955
- children: "I can help with your shop setup, payment and more"
67657
+ gap: 3,
67658
+ p: 4,
67659
+ children: [jsx(Box, {
67660
+ p: 2.5,
67661
+ w: "fit-content",
67662
+ bg: "rgba(43, 207, 161, 0.1)",
67663
+ border: "1px solid",
67664
+ borderColor: "rgba(43, 207, 161, 0.1)",
67665
+ borderRadius: "lg",
67666
+ children: jsx(AIMd, {
67667
+ color: "#2BCFA1"
67668
+ })
67669
+ }), jsxs(VStack, {
67670
+ gap: 0.5,
67671
+ align: "stretch",
67672
+ children: [jsx(Text, {
67673
+ color: "white",
67674
+ fontSize: "base",
67675
+ fontWeight: "medium",
67676
+ lineHeight: "normal",
67677
+ children: "AI Merchant Assistant"
67678
+ }), jsx(Text, {
67679
+ color: "#737373",
67680
+ fontSize: "sm",
67681
+ fontWeight: "normal",
67682
+ lineHeight: "tight",
67683
+ children: "I can help with your shop setup, payment and more"
67684
+ })]
65956
67685
  })]
65957
- })]
65958
- }), jsx(Button, {
65959
- w: "full",
65960
- padding: "10px 14px",
65961
- borderRadius: 0,
65962
- variant: "ghost",
65963
- _hover: {
65964
- bg: "rgba(43, 207, 161, 0.1)"
65965
- },
65966
- fontSize: 14,
65967
- fontWeight: 500,
65968
- color: "#2BCFA1",
65969
- onClick: onStartChat,
65970
- isLoading: isStartingChat,
65971
- isDisabled: isStartingChat,
65972
- _disabled: {
65973
- color: "#525252",
65974
- cursor: "not-allowed"
65975
- },
65976
- children: "Start Chat"
65977
- })]
65978
- }), jsx(RuledGrid, {
65979
- columns: 1,
65980
- borderRadius: 16,
65981
- bg: "#222",
65982
- children: navigationItems.map(function (item, index) {
65983
- return jsxs(Link, {
65984
- display: "flex",
65985
- justifyContent: "space-between",
65986
- alignItems: "center",
65987
- gap: 4,
65988
- padding: "12px 16px",
67686
+ }), jsx(Button, {
67687
+ w: "full",
67688
+ padding: "10px 14px",
67689
+ borderRadius: 0,
67690
+ variant: "ghost",
67691
+ _hover: {
67692
+ bg: "rgba(43, 207, 161, 0.1)"
67693
+ },
65989
67694
  fontSize: 14,
65990
67695
  fontWeight: 500,
65991
- color: "white",
65992
- textDecoration: "none",
65993
- href: item.href,
65994
- isExternal: item.isExternal,
65995
- children: [item.label, jsx(ExternalarrowMd, {
65996
- color: "white"
65997
- })]
65998
- }, index);
65999
- })
66000
- })]
67696
+ color: "#2BCFA1",
67697
+ onClick: onStartChat,
67698
+ isLoading: isStartingChat,
67699
+ isDisabled: isStartingChat,
67700
+ _disabled: {
67701
+ color: "#525252",
67702
+ cursor: "not-allowed"
67703
+ },
67704
+ children: "Start Chat"
67705
+ })]
67706
+ }), jsx(RuledGrid, {
67707
+ columns: 1,
67708
+ borderRadius: 16,
67709
+ bg: "#222",
67710
+ children: navigationItems.map(function (item, index) {
67711
+ return jsxs(Link$1, {
67712
+ display: "flex",
67713
+ justifyContent: "space-between",
67714
+ alignItems: "center",
67715
+ gap: 4,
67716
+ padding: "12px 16px",
67717
+ fontSize: 14,
67718
+ fontWeight: 500,
67719
+ color: "white",
67720
+ textDecoration: "none",
67721
+ as: item.isExternal ? undefined : Link,
67722
+ to: item.isExternal ? undefined : item.href,
67723
+ href: item.isExternal ? item.href : undefined,
67724
+ isExternal: item.isExternal,
67725
+ children: [item.label, jsx(ExternalarrowMd, {
67726
+ color: "white"
67727
+ })]
67728
+ }, index);
67729
+ })
67730
+ })]
67731
+ })
66001
67732
  })
66002
67733
  });
66003
67734
  }
@@ -66024,6 +67755,7 @@ function ChatDrawer(_ref) {
66024
67755
  flexDirection: "column",
66025
67756
  position: "relative",
66026
67757
  overflow: "hidden",
67758
+ minH: 0,
66027
67759
  maxW: {
66028
67760
  base: "100%",
66029
67761
  md: "420px"
@@ -66168,29 +67900,31 @@ var TooltipMd = function TooltipMd(_ref) {
66168
67900
  };
66169
67901
 
66170
67902
  var _excluded = ["showArrow", "children", "disabled", "portalled", "content", "portalRef", "placement"];
66171
- var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(_ref2, _ref) {
67903
+ var Tooltip = /*#__PURE__*/React3.forwardRef(function Tooltip(_ref2, _ref) {
66172
67904
  var showArrow = _ref2.showArrow,
66173
67905
  children = _ref2.children,
66174
67906
  disabled = _ref2.disabled;
66175
67907
  _ref2.portalled;
66176
- var content = _ref2.content,
66177
- portalRef = _ref2.portalRef,
66178
- placement = _ref2.placement,
67908
+ var content = _ref2.content;
67909
+ _ref2.portalRef;
67910
+ var placement = _ref2.placement,
66179
67911
  rest = _objectWithoutProperties(_ref2, _excluded);
66180
67912
  if (disabled) return jsx(Fragment, {
66181
67913
  children: children
66182
67914
  });
66183
67915
  return jsx(Tooltip$1, _objectSpread2(_objectSpread2({
67916
+ border: "1px solid",
67917
+ borderColor: "#292929",
67918
+ borderRadius: "6px",
67919
+ padding: "4px 16px",
67920
+ backgroundColor: "#1c1c1c",
67921
+ color: "white",
67922
+ placement: placement !== null && placement !== void 0 ? placement : "auto",
66184
67923
  label: content,
66185
67924
  hasArrow: !!showArrow,
66186
- portalProps: {
66187
- containerRef: portalRef
66188
- },
66189
- placement: placement
67925
+ shouldWrapChildren: true
66190
67926
  }, rest), {}, {
66191
- children: jsx("span", {
66192
- children: children
66193
- })
67927
+ children: children
66194
67928
  }));
66195
67929
  });
66196
67930
 
@@ -66433,6 +68167,9 @@ function Chatbot(_ref) {
66433
68167
  flex: 1,
66434
68168
  overflow: "hidden",
66435
68169
  p: 0,
68170
+ minH: 0,
68171
+ display: "flex",
68172
+ flexDirection: "column",
66436
68173
  children: currentView === "hello" ? jsx(HelloPage, {
66437
68174
  userName: user === null || user === void 0 ? void 0 : user.name,
66438
68175
  onStartChat: handleStartChat,