@loafmarkets/ui 0.0.8 → 0.1.0

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React5 = require('react');
+var o = require('react');
 var reactSlot = require('@radix-ui/react-slot');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
@@ -27,9 +27,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var o__namespace = /*#__PURE__*/_interopNamespace(o);
 
-// src/components/button.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
@@ -64,7 +63,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React5__namespace.forwardRef(
+var Button = o__namespace.forwardRef(
   ({ className, variant, size, radius, asChild = false, ...props }, ref) => {
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -102,11 +101,11 @@ var badgeVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Badge = React5__namespace.forwardRef(
+var Badge = o__namespace.forwardRef(
   ({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props })
 );
 Badge.displayName = "Badge";
-var Card = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var Card = o__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -118,11 +117,11 @@ var Card = React5__namespace.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React5__namespace.forwardRef(
+var CardHeader = o__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React5__namespace.forwardRef(
+var CardTitle = o__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "h3",
     {
@@ -133,15 +132,15 @@ var CardTitle = React5__namespace.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React5__namespace.forwardRef(
+var CardDescription = o__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-slate-500", className), ...props })
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React5__namespace.forwardRef(
+var CardContent = o__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("px-6 pb-6 pt-2 text-sm text-slate-600", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React5__namespace.forwardRef(
+var CardFooter = o__namespace.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center border-t border-slate-100 px-6 py-4", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
@@ -159,7 +158,7 @@ var defaultFormatSignedCurrency = (value) => {
   const sign = value >= 0 ? "+" : "-";
   return `${sign}${defaultFormatCurrency(Math.abs(value))}`;
 };
-var PortfolioSummary = React5__namespace.forwardRef(
+var PortfolioSummary = o__namespace.forwardRef(
   ({
     availableCash,
     portfolioValue,
@@ -232,12 +231,12 @@ var PortfolioSummary = React5__namespace.forwardRef(
   }
 );
 PortfolioSummary.displayName = "PortfolioSummary";
-var clamp = (v, min, max) => Math.min(max, Math.max(min, v));
-var fmt0 = (v) => Math.abs(v).toLocaleString(void 0, { maximumFractionDigits: 0 });
+var clamp = (v2, min, max) => Math.min(max, Math.max(min, v2));
+var fmt0 = (v2) => Math.abs(v2).toLocaleString(void 0, { maximumFractionDigits: 0 });
 var normalizeLevels = (levels = []) => levels.filter((level) => Number.isFinite(level.price) && level.price > 0 && Number.isFinite(level.amount) && level.amount > 0);
 var estimateMarketBuyFromUsd = (levels = [], usdAmount) => {
   if (!Number.isFinite(usdAmount) || usdAmount <= 0) return { tokens: 0, value: 0, avgPrice: null };
-  const asks = normalizeLevels(levels).sort((a, b) => a.price - b.price);
+  const asks = normalizeLevels(levels).sort((a2, b2) => a2.price - b2.price);
   let remainingUsd = usdAmount;
   let tokensFilled = 0;
   let spent = 0;
@@ -258,7 +257,7 @@ var estimateMarketBuyFromUsd = (levels = [], usdAmount) => {
 };
 var estimateMarketBuyFromTokens = (levels = [], tokenAmount) => {
   if (!Number.isFinite(tokenAmount) || tokenAmount <= 0) return { tokens: 0, value: 0, avgPrice: null };
-  const asks = normalizeLevels(levels).sort((a, b) => a.price - b.price);
+  const asks = normalizeLevels(levels).sort((a2, b2) => a2.price - b2.price);
   let remainingTokens = tokenAmount;
   let tokensFilled = 0;
   let spent = 0;
@@ -277,7 +276,7 @@ var estimateMarketBuyFromTokens = (levels = [], tokenAmount) => {
 };
 var estimateMarketSellFromTokens = (levels = [], tokenAmount) => {
   if (!Number.isFinite(tokenAmount) || tokenAmount <= 0) return { tokens: 0, value: 0, avgPrice: null };
-  const bids = normalizeLevels(levels).sort((a, b) => b.price - a.price);
+  const bids = normalizeLevels(levels).sort((a2, b2) => b2.price - a2.price);
   let remainingTokens = tokenAmount;
   let tokensFilled = 0;
   let received = 0;
@@ -309,31 +308,31 @@ function HousePositionSlider({
   className,
   ...props
 }) {
-  const [orderMode, setOrderMode] = React5__namespace.useState("none");
-  const [buyTrackingMode, setBuyTrackingMode] = React5__namespace.useState("dollars");
-  const [deltaDollars, setDeltaDollars] = React5__namespace.useState(0);
-  const [deltaTokensBuy, setDeltaTokensBuy] = React5__namespace.useState(0);
-  const [deltaTokensSell, setDeltaTokensSell] = React5__namespace.useState(0);
-  const [isDragging, setIsDragging] = React5__namespace.useState(false);
-  const [visualTargetPct, setVisualTargetPct] = React5__namespace.useState(null);
-  const [orderType, setOrderType] = React5__namespace.useState(defaultOrderType);
-  const [limitPrice, setLimitPrice] = React5__namespace.useState(currentPrice);
-  const [limitPriceInput, setLimitPriceInput] = React5__namespace.useState(currentPrice.toFixed(2));
-  const [limitPriceDirty, setLimitPriceDirty] = React5__namespace.useState(false);
-  const [ownershipInput, setOwnershipInput] = React5__namespace.useState("");
-  const [tokenAmountInput, setTokenAmountInput] = React5__namespace.useState("");
-  const houseRef = React5__namespace.useRef(null);
+  const [orderMode, setOrderMode] = o__namespace.useState("none");
+  const [buyTrackingMode, setBuyTrackingMode] = o__namespace.useState("dollars");
+  const [deltaDollars, setDeltaDollars] = o__namespace.useState(0);
+  const [deltaTokensBuy, setDeltaTokensBuy] = o__namespace.useState(0);
+  const [deltaTokensSell, setDeltaTokensSell] = o__namespace.useState(0);
+  const [isDragging, setIsDragging] = o__namespace.useState(false);
+  const [visualTargetPct, setVisualTargetPct] = o__namespace.useState(null);
+  const [orderType, setOrderType] = o__namespace.useState(defaultOrderType);
+  const [limitPrice, setLimitPrice] = o__namespace.useState(currentPrice);
+  const [limitPriceInput, setLimitPriceInput] = o__namespace.useState(currentPrice.toFixed(2));
+  const [limitPriceDirty, setLimitPriceDirty] = o__namespace.useState(false);
+  const [ownershipInput, setOwnershipInput] = o__namespace.useState("");
+  const [tokenAmountInput, setTokenAmountInput] = o__namespace.useState("");
+  const houseRef = o__namespace.useRef(null);
   const asks = orderbook?.asks ?? [];
   const bids = orderbook?.bids ?? [];
-  React5__namespace.useEffect(() => {
+  o__namespace.useEffect(() => {
     if (orderType !== "limit") return;
     if (limitPriceDirty) return;
     setLimitPrice(currentPrice);
     setLimitPriceInput(currentPrice.toFixed(2));
   }, [currentPrice, limitPriceDirty, orderType]);
   const effectivePrice = orderType === "limit" ? limitPrice : currentPrice;
-  const pendingBuyValue = pendingOrders.filter((o) => o.type === "buy").reduce((s, o) => s + o.value, 0);
-  const pendingSellTokens = pendingOrders.filter((o) => o.type === "sell").reduce((s, o) => s + Math.abs(o.tokens), 0);
+  const pendingBuyValue = pendingOrders.filter((o2) => o2.type === "buy").reduce((s, o2) => s + o2.value, 0);
+  const pendingSellTokens = pendingOrders.filter((o2) => o2.type === "sell").reduce((s, o2) => s + Math.abs(o2.tokens), 0);
   const effectiveAvailableCash = Math.max(0, availableCash - pendingBuyValue);
   const effectiveTokensHeld = Math.max(0, tokensHeld - pendingSellTokens);
   const holdingsValue = tokensHeld * effectivePrice;
@@ -400,7 +399,7 @@ function HousePositionSlider({
   const impliedDisplayTargetOwnership = clamp(targetOwnership + ownershipShift, 0, 100);
   const displayTargetOwnership = visualTargetPct ?? impliedDisplayTargetOwnership;
   const estFeeTokens = Math.abs(deltaValue) * 5e-3 / (effectivePrice || 1);
-  const resetOrder = React5__namespace.useCallback(() => {
+  const resetOrder = o__namespace.useCallback(() => {
     setOrderMode("none");
     setBuyTrackingMode("dollars");
     setDeltaDollars(0);
@@ -408,7 +407,7 @@ function HousePositionSlider({
     setDeltaTokensSell(0);
     setVisualTargetPct(null);
   }, []);
-  const updateOrderFromTargetValue = React5__namespace.useCallback(
+  const updateOrderFromTargetValue = o__namespace.useCallback(
     (newTargetValue) => {
       const newDeltaValue = newTargetValue - holdingsValue;
       if (newDeltaValue > 0) {
@@ -432,7 +431,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, holdingsValue, resetOrder, tokensHeld]
   );
-  const updateOrderFromOwnership = React5__namespace.useCallback(
+  const updateOrderFromOwnership = o__namespace.useCallback(
     (newOwnershipPercent) => {
       const nextOwnership = clamp(newOwnershipPercent, 0, 100);
       const newTargetTokens = nextOwnership / 100 * totalTokens;
@@ -441,7 +440,7 @@ function HousePositionSlider({
     },
     [effectivePrice, totalTokens, updateOrderFromTargetValue]
   );
-  const updateOrderFromTokenAmount = React5__namespace.useCallback(
+  const updateOrderFromTokenAmount = o__namespace.useCallback(
     (tokenAmountSigned) => {
       if (tokenAmountSigned > 0) {
         const maxTokens = effectiveAvailableCash / (effectivePrice || 1);
@@ -464,7 +463,7 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectivePrice, effectiveTokensHeld, resetOrder]
   );
-  const updateOrderFromSlider = React5__namespace.useCallback(
+  const updateOrderFromSlider = o__namespace.useCallback(
     (pct) => {
       const normalized = (pct - 50) / 50;
       const magnitude = Math.min(Math.abs(normalized), 1);
@@ -508,12 +507,12 @@ function HousePositionSlider({
     },
     [effectiveAvailableCash, effectiveTokensHeld, resetOrder]
   );
-  const handleDragAtClientY = React5__namespace.useCallback(
+  const handleDragAtClientY = o__namespace.useCallback(
     (clientY) => {
       if (!houseRef.current) return;
       const rect = houseRef.current.getBoundingClientRect();
-      const y = clientY - rect.top;
-      const pct = clamp(100 - y / rect.height * 100, 0, 100);
+      const y2 = clientY - rect.top;
+      const pct = clamp(100 - y2 / rect.height * 100, 0, 100);
       updateOrderFromSlider(pct);
     },
     [updateOrderFromSlider]
@@ -548,9 +547,9 @@ function HousePositionSlider({
   const handleCancel = () => {
     resetOrder();
   };
-  const handleOrderTypeSelection = (next) => {
-    setOrderType(next);
-    if (next === "limit") {
+  const handleOrderTypeSelection = (next2) => {
+    setOrderType(next2);
+    if (next2 === "limit") {
       setLimitPriceDirty(false);
       setLimitPrice(currentPrice);
       setLimitPriceInput(currentPrice.toFixed(2));
@@ -806,6 +805,1547 @@ function HousePositionSlider({
     ] })
   ] });
 }
+
+// ../../../node_modules/.pnpm/tslib@2.8.1/node_modules/tslib/tslib.es6.mjs
+var __assign = function() {
+  __assign = Object.assign || function __assign2(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p2 in s) if (Object.prototype.hasOwnProperty.call(s, p2)) t[p2] = s[p2];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+function __spreadArray(to, from2, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l2 = from2.length, ar; i < l2; i++) {
+    if (ar || !(i in from2)) {
+      if (!ar) ar = Array.prototype.slice.call(from2, 0, i);
+      ar[i] = from2[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from2));
+}
+
+// ../../../node_modules/.pnpm/@emotion+memoize@0.9.0/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js
+function memoize(fn) {
+  var cache = /* @__PURE__ */ Object.create(null);
+  return function(arg) {
+    if (cache[arg] === void 0) cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+
+// ../../../node_modules/.pnpm/@emotion+is-prop-valid@1.4.0/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js
+var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|disableRemotePlayback|download|draggable|encType|enterKeyHint|fetchpriority|fetchPriority|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|popover|popoverTarget|popoverTargetAction|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/;
+var isPropValid = /* @__PURE__ */ memoize(
+  function(prop) {
+    return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 && prop.charCodeAt(1) === 110 && prop.charCodeAt(2) < 91;
+  }
+  /* Z+1 */
+);
+
+// ../../../node_modules/.pnpm/stylis@4.3.6/node_modules/stylis/src/Enum.js
+var MS = "-ms-";
+var MOZ = "-moz-";
+var WEBKIT = "-webkit-";
+var COMMENT = "comm";
+var RULESET = "rule";
+var DECLARATION = "decl";
+var IMPORT = "@import";
+var NAMESPACE = "@namespace";
+var KEYFRAMES = "@keyframes";
+var LAYER = "@layer";
+
+// ../../../node_modules/.pnpm/stylis@4.3.6/node_modules/stylis/src/Utility.js
+var abs = Math.abs;
+var from = String.fromCharCode;
+var assign = Object.assign;
+function hash(value, length2) {
+  return charat(value, 0) ^ 45 ? (((length2 << 2 ^ charat(value, 0)) << 2 ^ charat(value, 1)) << 2 ^ charat(value, 2)) << 2 ^ charat(value, 3) : 0;
+}
+function trim(value) {
+  return value.trim();
+}
+function match(value, pattern) {
+  return (value = pattern.exec(value)) ? value[0] : value;
+}
+function replace(value, pattern, replacement) {
+  return value.replace(pattern, replacement);
+}
+function indexof(value, search, position2) {
+  return value.indexOf(search, position2);
+}
+function charat(value, index) {
+  return value.charCodeAt(index) | 0;
+}
+function substr(value, begin, end) {
+  return value.slice(begin, end);
+}
+function strlen(value) {
+  return value.length;
+}
+function sizeof(value) {
+  return value.length;
+}
+function append(value, array) {
+  return array.push(value), value;
+}
+function combine(array, callback) {
+  return array.map(callback).join("");
+}
+function filter(array, pattern) {
+  return array.filter(function(value) {
+    return !match(value, pattern);
+  });
+}
+
+// ../../../node_modules/.pnpm/stylis@4.3.6/node_modules/stylis/src/Tokenizer.js
+var line = 1;
+var column = 1;
+var length = 0;
+var position = 0;
+var character = 0;
+var characters = "";
+function node(value, root, parent, type, props, children, length2, siblings) {
+  return { value, root, parent, type, props, children, line, column, length: length2, return: "", siblings };
+}
+function copy(root, props) {
+  return assign(node("", null, null, "", null, null, 0, root.siblings), root, { length: -root.length }, props);
+}
+function lift(root) {
+  while (root.root)
+    root = copy(root.root, { children: [root] });
+  append(root, root.siblings);
+}
+function char() {
+  return character;
+}
+function prev() {
+  character = position > 0 ? charat(characters, --position) : 0;
+  if (column--, character === 10)
+    column = 1, line--;
+  return character;
+}
+function next() {
+  character = position < length ? charat(characters, position++) : 0;
+  if (column++, character === 10)
+    column = 1, line++;
+  return character;
+}
+function peek() {
+  return charat(characters, position);
+}
+function caret() {
+  return position;
+}
+function slice(begin, end) {
+  return substr(characters, begin, end);
+}
+function token(type) {
+  switch (type) {
+    // \0 \t \n \r \s whitespace token
+    case 0:
+    case 9:
+    case 10:
+    case 13:
+    case 32:
+      return 5;
+    // ! + , / > @ ~ isolate token
+    case 33:
+    case 43:
+    case 44:
+    case 47:
+    case 62:
+    case 64:
+    case 126:
+    // ; { } breakpoint token
+    case 59:
+    case 123:
+    case 125:
+      return 4;
+    // : accompanied token
+    case 58:
+      return 3;
+    // " ' ( [ opening delimit token
+    case 34:
+    case 39:
+    case 40:
+    case 91:
+      return 2;
+    // ) ] closing delimit token
+    case 41:
+    case 93:
+      return 1;
+  }
+  return 0;
+}
+function alloc(value) {
+  return line = column = 1, length = strlen(characters = value), position = 0, [];
+}
+function dealloc(value) {
+  return characters = "", value;
+}
+function delimit(type) {
+  return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type)));
+}
+function whitespace(type) {
+  while (character = peek())
+    if (character < 33)
+      next();
+    else
+      break;
+  return token(type) > 2 || token(character) > 3 ? "" : " ";
+}
+function escaping(index, count) {
+  while (--count && next())
+    if (character < 48 || character > 102 || character > 57 && character < 65 || character > 70 && character < 97)
+      break;
+  return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32));
+}
+function delimiter(type) {
+  while (next())
+    switch (character) {
+      // ] ) " '
+      case type:
+        return position;
+      // " '
+      case 34:
+      case 39:
+        if (type !== 34 && type !== 39)
+          delimiter(character);
+        break;
+      // (
+      case 40:
+        if (type === 41)
+          delimiter(type);
+        break;
+      // \
+      case 92:
+        next();
+        break;
+    }
+  return position;
+}
+function commenter(type, index) {
+  while (next())
+    if (type + character === 47 + 10)
+      break;
+    else if (type + character === 42 + 42 && peek() === 47)
+      break;
+  return "/*" + slice(index, position - 1) + "*" + from(type === 47 ? type : next());
+}
+function identifier(index) {
+  while (!token(peek()))
+    next();
+  return slice(index, position);
+}
+
+// ../../../node_modules/.pnpm/stylis@4.3.6/node_modules/stylis/src/Parser.js
+function compile(value) {
+  return dealloc(parse("", null, null, null, [""], value = alloc(value), 0, [0], value));
+}
+function parse(value, root, parent, rule, rules, rulesets, pseudo, points, declarations) {
+  var index = 0;
+  var offset = 0;
+  var length2 = pseudo;
+  var atrule = 0;
+  var property = 0;
+  var previous = 0;
+  var variable = 1;
+  var scanning = 1;
+  var ampersand = 1;
+  var character2 = 0;
+  var type = "";
+  var props = rules;
+  var children = rulesets;
+  var reference = rule;
+  var characters2 = type;
+  while (scanning)
+    switch (previous = character2, character2 = next()) {
+      // (
+      case 40:
+        if (previous != 108 && charat(characters2, length2 - 1) == 58) {
+          if (indexof(characters2 += replace(delimit(character2), "&", "&\f"), "&\f", abs(index ? points[index - 1] : 0)) != -1)
+            ampersand = -1;
+          break;
+        }
+      // " ' [
+      case 34:
+      case 39:
+      case 91:
+        characters2 += delimit(character2);
+        break;
+      // \t \n \r \s
+      case 9:
+      case 10:
+      case 13:
+      case 32:
+        characters2 += whitespace(previous);
+        break;
+      // \
+      case 92:
+        characters2 += escaping(caret() - 1, 7);
+        continue;
+      // /
+      case 47:
+        switch (peek()) {
+          case 42:
+          case 47:
+            append(comment(commenter(next(), caret()), root, parent, declarations), declarations);
+            if ((token(previous || 1) == 5 || token(peek() || 1) == 5) && strlen(characters2) && substr(characters2, -1, void 0) !== " ") characters2 += " ";
+            break;
+          default:
+            characters2 += "/";
+        }
+        break;
+      // {
+      case 123 * variable:
+        points[index++] = strlen(characters2) * ampersand;
+      // } ; \0
+      case 125 * variable:
+      case 59:
+      case 0:
+        switch (character2) {
+          // \0 }
+          case 0:
+          case 125:
+            scanning = 0;
+          // ;
+          case 59 + offset:
+            if (ampersand == -1) characters2 = replace(characters2, /\f/g, "");
+            if (property > 0 && (strlen(characters2) - length2 || variable === 0 && previous === 47))
+              append(property > 32 ? declaration(characters2 + ";", rule, parent, length2 - 1, declarations) : declaration(replace(characters2, " ", "") + ";", rule, parent, length2 - 2, declarations), declarations);
+            break;
+          // @ ;
+          case 59:
+            characters2 += ";";
+          // { rule/at-rule
+          default:
+            append(reference = ruleset(characters2, root, parent, index, offset, rules, points, type, props = [], children = [], length2, rulesets), rulesets);
+            if (character2 === 123)
+              if (offset === 0)
+                parse(characters2, root, reference, reference, props, rulesets, length2, points, children);
+              else {
+                switch (atrule) {
+                  // c(ontainer)
+                  case 99:
+                    if (charat(characters2, 3) === 110) break;
+                  // l(ayer)
+                  case 108:
+                    if (charat(characters2, 2) === 97) break;
+                  default:
+                    offset = 0;
+                  // d(ocument) m(edia) s(upports)
+                  case 100:
+                  case 109:
+                  case 115:
+                }
+                if (offset) parse(value, reference, reference, rule && append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length2, children), children), rules, children, length2, points, rule ? props : children);
+                else parse(characters2, reference, reference, reference, [""], children, 0, points, children);
+              }
+        }
+        index = offset = property = 0, variable = ampersand = 1, type = characters2 = "", length2 = pseudo;
+        break;
+      // :
+      case 58:
+        length2 = 1 + strlen(characters2), property = previous;
+      default:
+        if (variable < 1) {
+          if (character2 == 123)
+            --variable;
+          else if (character2 == 125 && variable++ == 0 && prev() == 125)
+            continue;
+        }
+        switch (characters2 += from(character2), character2 * variable) {
+          // &
+          case 38:
+            ampersand = offset > 0 ? 1 : (characters2 += "\f", -1);
+            break;
+          // ,
+          case 44:
+            points[index++] = (strlen(characters2) - 1) * ampersand, ampersand = 1;
+            break;
+          // @
+          case 64:
+            if (peek() === 45)
+              characters2 += delimit(next());
+            atrule = peek(), offset = length2 = strlen(type = characters2 += identifier(caret())), character2++;
+            break;
+          // -
+          case 45:
+            if (previous === 45 && strlen(characters2) == 2)
+              variable = 0;
+        }
+    }
+  return rulesets;
+}
+function ruleset(value, root, parent, index, offset, rules, points, type, props, children, length2, siblings) {
+  var post = offset - 1;
+  var rule = offset === 0 ? rules : [""];
+  var size = sizeof(rule);
+  for (var i = 0, j2 = 0, k2 = 0; i < index; ++i)
+    for (var x2 = 0, y2 = substr(value, post + 1, post = abs(j2 = points[i])), z2 = value; x2 < size; ++x2)
+      if (z2 = trim(j2 > 0 ? rule[x2] + " " + y2 : replace(y2, /&\f/g, rule[x2])))
+        props[k2++] = z2;
+  return node(value, root, parent, offset === 0 ? RULESET : type, props, children, length2, siblings);
+}
+function comment(value, root, parent, siblings) {
+  return node(value, root, parent, COMMENT, from(char()), substr(value, 2, -2), 0, siblings);
+}
+function declaration(value, root, parent, length2, siblings) {
+  return node(value, root, parent, DECLARATION, substr(value, 0, length2), substr(value, length2 + 1, -1), length2, siblings);
+}
+
+// ../../../node_modules/.pnpm/stylis@4.3.6/node_modules/stylis/src/Prefixer.js
+function prefix(value, length2, children) {
+  switch (hash(value, length2)) {
+    // color-adjust
+    case 5103:
+      return WEBKIT + "print-" + value + value;
+    // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function)
+    case 5737:
+    case 4201:
+    case 3177:
+    case 3433:
+    case 1641:
+    case 4457:
+    case 2921:
+    // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break
+    case 5572:
+    case 6356:
+    case 5844:
+    case 3191:
+    case 6645:
+    case 3005:
+    // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width)
+    case 4215:
+    case 6389:
+    case 5109:
+    case 5365:
+    case 5621:
+    case 3829:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+      return WEBKIT + value + value;
+    // mask-composite
+    case 4855:
+      return WEBKIT + value.replace("add", "source-over").replace("substract", "source-out").replace("intersect", "source-in").replace("exclude", "xor") + value;
+    // tab-size
+    case 4789:
+      return MOZ + value + value;
+    // appearance, user-select, transform, hyphens, text-size-adjust
+    case 5349:
+    case 4246:
+    case 4810:
+    case 6968:
+    case 2756:
+      return WEBKIT + value + MOZ + value + MS + value + value;
+    // writing-mode
+    case 5936:
+      switch (charat(value, length2 + 11)) {
+        // vertical-l(r)
+        case 114:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb") + value;
+        // vertical-r(l)
+        case 108:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "tb-rl") + value;
+        // horizontal(-)tb
+        case 45:
+          return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, "lr") + value;
+      }
+    // flex, flex-direction, scroll-snap-type, writing-mode
+    case 6828:
+    case 4268:
+    case 2903:
+      return WEBKIT + value + MS + value + value;
+    // order
+    case 6165:
+      return WEBKIT + value + MS + "flex-" + value + value;
+    // align-items
+    case 5187:
+      return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + "box-$1$2" + MS + "flex-$1$2") + value;
+    // align-self
+    case 5443:
+      return WEBKIT + value + MS + "flex-item-" + replace(value, /flex-|-self/g, "") + (!match(value, /flex-|baseline/) ? MS + "grid-row-" + replace(value, /flex-|-self/g, "") : "") + value;
+    // align-content
+    case 4675:
+      return WEBKIT + value + MS + "flex-line-pack" + replace(value, /align-content|flex-|-self/g, "") + value;
+    // flex-shrink
+    case 5548:
+      return WEBKIT + value + MS + replace(value, "shrink", "negative") + value;
+    // flex-basis
+    case 5292:
+      return WEBKIT + value + MS + replace(value, "basis", "preferred-size") + value;
+    // flex-grow
+    case 6060:
+      return WEBKIT + "box-" + replace(value, "-grow", "") + WEBKIT + value + MS + replace(value, "grow", "positive") + value;
+    // transition
+    case 4554:
+      return WEBKIT + replace(value, /([^-])(transform)/g, "$1" + WEBKIT + "$2") + value;
+    // cursor
+    case 6187:
+      return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + "$1"), /(image-set)/, WEBKIT + "$1"), value, "") + value;
+    // background, background-image
+    case 5495:
+    case 3959:
+      return replace(value, /(image-set\([^]*)/, WEBKIT + "$1$`$1");
+    // justify-content
+    case 4968:
+      return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + "box-pack:$3" + MS + "flex-pack:$3"), /space-between/, "justify") + WEBKIT + value + value;
+    // justify-self
+    case 4200:
+      if (!match(value, /flex-|baseline/)) return MS + "grid-column-align" + substr(value, length2) + value;
+      break;
+    // grid-template-(columns|rows)
+    case 2592:
+    case 3360:
+      return MS + replace(value, "template-", "") + value;
+    // grid-(row|column)-start
+    case 4384:
+    case 3616:
+      if (children && children.some(function(element, index) {
+        return length2 = index, match(element.props, /grid-\w+-end/);
+      })) {
+        return ~indexof(value + (children = children[length2].value), "span", 0) ? value : MS + replace(value, "-start", "") + value + MS + "grid-row-span:" + (~indexof(children, "span", 0) ? match(children, /\d+/) : +match(children, /\d+/) - +match(value, /\d+/)) + ";";
+      }
+      return MS + replace(value, "-start", "") + value;
+    // grid-(row|column)-end
+    case 4896:
+    case 4128:
+      return children && children.some(function(element) {
+        return match(element.props, /grid-\w+-start/);
+      }) ? value : MS + replace(replace(value, "-end", "-span"), "span ", "") + value;
+    // (margin|padding)-inline-(start|end)
+    case 4095:
+    case 3583:
+    case 4068:
+    case 2532:
+      return replace(value, /(.+)-inline(.+)/, WEBKIT + "$1$2") + value;
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      if (strlen(value) - 1 - length2 > 6)
+        switch (charat(value, length2 + 1)) {
+          // (m)ax-content, (m)in-content
+          case 109:
+            if (charat(value, length2 + 4) !== 45)
+              break;
+          // (f)ill-available, (f)it-content
+          case 102:
+            return replace(value, /(.+:)(.+)-([^]+)/, "$1" + WEBKIT + "$2-$3$1" + MOZ + (charat(value, length2 + 3) == 108 ? "$3" : "$2-$3")) + value;
+          // (s)tretch
+          case 115:
+            return ~indexof(value, "stretch", 0) ? prefix(replace(value, "stretch", "fill-available"), length2, children) + value : value;
+        }
+      break;
+    // grid-(column|row)
+    case 5152:
+    case 5920:
+      return replace(value, /(.+?):(\d+)(\s*\/\s*(span)?\s*(\d+))?(.*)/, function(_2, a2, b2, c2, d2, e, f2) {
+        return MS + a2 + ":" + b2 + f2 + (c2 ? MS + a2 + "-span:" + (d2 ? e : +e - +b2) + f2 : "") + value;
+      });
+    // position: sticky
+    case 4949:
+      if (charat(value, length2 + 6) === 121)
+        return replace(value, ":", ":" + WEBKIT) + value;
+      break;
+    // display: (flex|inline-flex|grid|inline-grid)
+    case 6444:
+      switch (charat(value, charat(value, 14) === 45 ? 18 : 11)) {
+        // (inline-)?fle(x)
+        case 120:
+          return replace(value, /(.+:)([^;\s!]+)(;|(\s+)?!.+)?/, "$1" + WEBKIT + (charat(value, 14) === 45 ? "inline-" : "") + "box$3$1" + WEBKIT + "$2$3$1" + MS + "$2box$3") + value;
+        // (inline-)?gri(d)
+        case 100:
+          return replace(value, ":", ":" + MS) + value;
+      }
+      break;
+    // scroll-margin, scroll-margin-(top|right|bottom|left)
+    case 5719:
+    case 2647:
+    case 2135:
+    case 3927:
+    case 2391:
+      return replace(value, "scroll-", "scroll-snap-") + value;
+  }
+  return value;
+}
+
+// ../../../node_modules/.pnpm/stylis@4.3.6/node_modules/stylis/src/Serializer.js
+function serialize(children, callback) {
+  var output = "";
+  for (var i = 0; i < children.length; i++)
+    output += callback(children[i], i, children, callback) || "";
+  return output;
+}
+function stringify(element, index, children, callback) {
+  switch (element.type) {
+    case LAYER:
+      if (element.children.length) break;
+    case IMPORT:
+    case NAMESPACE:
+    case DECLARATION:
+      return element.return = element.return || element.value;
+    case COMMENT:
+      return "";
+    case KEYFRAMES:
+      return element.return = element.value + "{" + serialize(element.children, callback) + "}";
+    case RULESET:
+      if (!strlen(element.value = element.props.join(","))) return "";
+  }
+  return strlen(children = serialize(element.children, callback)) ? element.return = element.value + "{" + children + "}" : "";
+}
+
+// ../../../node_modules/.pnpm/stylis@4.3.6/node_modules/stylis/src/Middleware.js
+function middleware(collection) {
+  var length2 = sizeof(collection);
+  return function(element, index, children, callback) {
+    var output = "";
+    for (var i = 0; i < length2; i++)
+      output += collection[i](element, index, children, callback) || "";
+    return output;
+  };
+}
+function rulesheet(callback) {
+  return function(element) {
+    if (!element.root) {
+      if (element = element.return)
+        callback(element);
+    }
+  };
+}
+function prefixer(element, index, children, callback) {
+  if (element.length > -1) {
+    if (!element.return)
+      switch (element.type) {
+        case DECLARATION:
+          element.return = prefix(element.value, element.length, children);
+          return;
+        case KEYFRAMES:
+          return serialize([copy(element, { value: replace(element.value, "@", "@" + WEBKIT) })], callback);
+        case RULESET:
+          if (element.length)
+            return combine(children = element.props, function(value) {
+              switch (match(value, callback = /(::plac\w+|:read-\w+)/)) {
+                // :read-(only|write)
+                case ":read-only":
+                case ":read-write":
+                  lift(copy(element, { props: [replace(value, /:(read-\w+)/, ":" + MOZ + "$1")] }));
+                  lift(copy(element, { props: [value] }));
+                  assign(element, { props: filter(children, callback) });
+                  break;
+                // :placeholder
+                case "::placeholder":
+                  lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + WEBKIT + "input-$1")] }));
+                  lift(copy(element, { props: [replace(value, /:(plac\w+)/, ":" + MOZ + "$1")] }));
+                  lift(copy(element, { props: [replace(value, /:(plac\w+)/, MS + "input-$1")] }));
+                  lift(copy(element, { props: [value] }));
+                  assign(element, { props: filter(children, callback) });
+                  break;
+              }
+              return "";
+            });
+      }
+  }
+}
+
+// ../../../node_modules/.pnpm/@emotion+unitless@0.10.0/node_modules/@emotion/unitless/dist/emotion-unitless.esm.js
+var unitlessKeys = {
+  animationIterationCount: 1,
+  aspectRatio: 1,
+  borderImageOutset: 1,
+  borderImageSlice: 1,
+  borderImageWidth: 1,
+  boxFlex: 1,
+  boxFlexGroup: 1,
+  boxOrdinalGroup: 1,
+  columnCount: 1,
+  columns: 1,
+  flex: 1,
+  flexGrow: 1,
+  flexPositive: 1,
+  flexShrink: 1,
+  flexNegative: 1,
+  flexOrder: 1,
+  gridRow: 1,
+  gridRowEnd: 1,
+  gridRowSpan: 1,
+  gridRowStart: 1,
+  gridColumn: 1,
+  gridColumnEnd: 1,
+  gridColumnSpan: 1,
+  gridColumnStart: 1,
+  msGridRow: 1,
+  msGridRowSpan: 1,
+  msGridColumn: 1,
+  msGridColumnSpan: 1,
+  fontWeight: 1,
+  lineHeight: 1,
+  opacity: 1,
+  order: 1,
+  orphans: 1,
+  scale: 1,
+  tabSize: 1,
+  widows: 1,
+  zIndex: 1,
+  zoom: 1,
+  WebkitLineClamp: 1,
+  // SVG-related properties
+  fillOpacity: 1,
+  floodOpacity: 1,
+  stopOpacity: 1,
+  strokeDasharray: 1,
+  strokeDashoffset: 1,
+  strokeMiterlimit: 1,
+  strokeOpacity: 1,
+  strokeWidth: 1
+};
+
+// ../../../node_modules/.pnpm/styled-components@6.3.6_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/styled-components/dist/styled-components.esm.js
+var a = "undefined" != typeof process && void 0 !== process.env && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || "data-styled";
+var c = "active";
+var u = "data-styled-version";
+var l = "6.3.6";
+var p = "/*!sc*/\n";
+var d = "undefined" != typeof window && "undefined" != typeof document;
+var h = void 0 === o__namespace.default.createContext;
+var f = Boolean("boolean" == typeof SC_DISABLE_SPEEDY ? SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.REACT_APP_SC_DISABLE_SPEEDY && "" !== process.env.REACT_APP_SC_DISABLE_SPEEDY ? "false" !== process.env.REACT_APP_SC_DISABLE_SPEEDY && process.env.REACT_APP_SC_DISABLE_SPEEDY : "undefined" != typeof process && void 0 !== process.env && void 0 !== process.env.SC_DISABLE_SPEEDY && "" !== process.env.SC_DISABLE_SPEEDY ? "false" !== process.env.SC_DISABLE_SPEEDY && process.env.SC_DISABLE_SPEEDY : "production" !== process.env.NODE_ENV);
+var y = /invalid hook call/i;
+var v = /* @__PURE__ */ new Set();
+var g = function(t, n) {
+  if ("production" !== process.env.NODE_ENV) {
+    if (h) return;
+    var r2 = n ? ' with the id of "'.concat(n, '"') : "", s = "The component ".concat(t).concat(r2, " has been created dynamically.\n") + "You may see this warning because you've called styled inside another component.\nTo resolve this only create new StyledComponents outside of any render method and function component.\nSee https://styled-components.com/docs/basics#define-styled-components-outside-of-the-render-method for more info.\n", i = console.error;
+    try {
+      var a2 = true;
+      console.error = function(t2) {
+        for (var n2 = [], o2 = 1; o2 < arguments.length; o2++) n2[o2 - 1] = arguments[o2];
+        y.test(t2) ? (a2 = false, v.delete(s)) : i.apply(void 0, __spreadArray([t2], n2, false));
+      }, "function" == typeof o__namespace.default.useState && o__namespace.default.useState(null), a2 && !v.has(s) && (console.warn(s), v.add(s));
+    } catch (e) {
+      y.test(e.message) && v.delete(s);
+    } finally {
+      console.error = i;
+    }
+  }
+};
+var S = Object.freeze([]);
+var w = Object.freeze({});
+function b(e, t, n) {
+  return void 0 === n && (n = w), e.theme !== n.theme && e.theme || t || n.theme;
+}
+var C = /* @__PURE__ */ new Set(["a", "abbr", "address", "area", "article", "aside", "audio", "b", "bdi", "bdo", "blockquote", "body", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "label", "legend", "li", "main", "map", "mark", "menu", "meter", "nav", "object", "ol", "optgroup", "option", "output", "p", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "search", "section", "select", "slot", "small", "span", "strong", "sub", "summary", "sup", "table", "tbody", "td", "template", "textarea", "tfoot", "th", "thead", "time", "tr", "u", "ul", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix", "feDiffuseLighting", "feDisplacementMap", "feDistantLight", "feDropShadow", "feFlood", "feFuncA", "feFuncB", "feFuncG", "feFuncR", "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "fePointLight", "feSpecularLighting", "feSpotLight", "feTile", "feTurbulence", "filter", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "switch", "symbol", "text", "textPath", "tspan", "use"]);
+var E = /[!"#$%&'()*+,./:;<=>?@[\\\]^`{|}~-]+/g;
+var N = /(^-|-$)/g;
+function A(e) {
+  return e.replace(E, "-").replace(N, "");
+}
+var P = /(a)(d)/gi;
+var _ = function(e) {
+  return String.fromCharCode(e + (e > 25 ? 39 : 97));
+};
+function I(e) {
+  var t, n = "";
+  for (t = Math.abs(e); t > 52; t = t / 52 | 0) n = _(t % 52) + n;
+  return (_(t % 52) + n).replace(P, "$1-$2");
+}
+var O;
+var D = function(e, t) {
+  for (var n = t.length; n; ) e = 33 * e ^ t.charCodeAt(--n);
+  return e;
+};
+var T = function(e) {
+  return D(5381, e);
+};
+function x(e) {
+  return I(T(e) >>> 0);
+}
+function R(e) {
+  return "production" !== process.env.NODE_ENV && "string" == typeof e && e || e.displayName || e.name || "Component";
+}
+function j(e) {
+  return "string" == typeof e && ("production" === process.env.NODE_ENV || e.charAt(0) === e.charAt(0).toLowerCase());
+}
+var k = "function" == typeof Symbol && Symbol.for;
+var M = k ? Symbol.for("react.memo") : 60115;
+var V = k ? Symbol.for("react.forward_ref") : 60112;
+var F = { childContextTypes: true, contextType: true, contextTypes: true, defaultProps: true, displayName: true, getDefaultProps: true, getDerivedStateFromError: true, getDerivedStateFromProps: true, mixins: true, propTypes: true, type: true };
+var B = { name: true, length: true, prototype: true, caller: true, callee: true, arguments: true, arity: true };
+var L = { $$typeof: true, compare: true, defaultProps: true, displayName: true, propTypes: true, type: true };
+var z = ((O = {})[V] = { $$typeof: true, render: true, defaultProps: true, displayName: true, propTypes: true }, O[M] = L, O);
+function G(e) {
+  return ("type" in (t = e) && t.type.$$typeof) === M ? L : "$$typeof" in e ? z[e.$$typeof] : F;
+  var t;
+}
+var $ = Object.defineProperty;
+var Y = Object.getOwnPropertyNames;
+var W = Object.getOwnPropertySymbols;
+var q = Object.getOwnPropertyDescriptor;
+var H = Object.getPrototypeOf;
+var U = Object.prototype;
+function J(e, t, n) {
+  if ("string" != typeof t) {
+    if (U) {
+      var o2 = H(t);
+      o2 && o2 !== U && J(e, o2, n);
+    }
+    var r2 = Y(t);
+    W && (r2 = r2.concat(W(t)));
+    for (var s = G(e), i = G(t), a2 = 0; a2 < r2.length; ++a2) {
+      var c2 = r2[a2];
+      if (!(c2 in B || n && n[c2] || i && c2 in i || s && c2 in s)) {
+        var u2 = q(t, c2);
+        try {
+          $(e, c2, u2);
+        } catch (e2) {
+        }
+      }
+    }
+  }
+  return e;
+}
+function X(e) {
+  return "function" == typeof e;
+}
+function Z(e) {
+  return "object" == typeof e && "styledComponentId" in e;
+}
+function K(e, t) {
+  return e && t ? "".concat(e, " ").concat(t) : e || t || "";
+}
+function Q(e, t) {
+  if (0 === e.length) return "";
+  for (var n = e[0], o2 = 1; o2 < e.length; o2++) n += e[o2];
+  return n;
+}
+function ee(e) {
+  return null !== e && "object" == typeof e && e.constructor.name === Object.name && !("props" in e && e.$$typeof);
+}
+function te(e, t, n) {
+  if (void 0 === n && (n = false), !n && !ee(e) && !Array.isArray(e)) return t;
+  if (Array.isArray(t)) for (var o2 = 0; o2 < t.length; o2++) e[o2] = te(e[o2], t[o2]);
+  else if (ee(t)) for (var o2 in t) e[o2] = te(e[o2], t[o2]);
+  return e;
+}
+function ne(e, t) {
+  Object.defineProperty(e, "toString", { value: t });
+}
+var oe = "production" !== process.env.NODE_ENV ? { 1: "Cannot create styled-component for component: %s.\n\n", 2: "Can't collect styles once you've consumed a `ServerStyleSheet`'s styles! `ServerStyleSheet` is a one off instance for each server-side render cycle.\n\n- Are you trying to reuse it across renders?\n- Are you accidentally calling collectStyles twice?\n\n", 3: "Streaming SSR is only supported in a Node.js environment; Please do not try to call this method in the browser.\n\n", 4: "The `StyleSheetManager` expects a valid target or sheet prop!\n\n- Does this error occur on the client and is your target falsy?\n- Does this error occur on the server and is the sheet falsy?\n\n", 5: "The clone method cannot be used on the client!\n\n- Are you running in a client-like environment on the server?\n- Are you trying to run SSR on the client?\n\n", 6: "Trying to insert a new style tag, but the given Node is unmounted!\n\n- Are you using a custom target that isn't mounted?\n- Does your document not have a valid head element?\n- Have you accidentally removed a style tag manually?\n\n", 7: 'ThemeProvider: Please return an object from your "theme" prop function, e.g.\n\n```js\ntheme={() => ({})}\n```\n\n', 8: 'ThemeProvider: Please make your "theme" prop an object.\n\n', 9: "Missing document `<head>`\n\n", 10: "Cannot find a StyleSheet instance. Usually this happens if there are multiple copies of styled-components loaded at once. Check out this issue for how to troubleshoot and fix the common cases where this situation can happen: https://github.com/styled-components/styled-components/issues/1941#issuecomment-417862021\n\n", 11: "_This error was replaced with a dev-time warning, it will be deleted for v4 final._ [createGlobalStyle] received children which will not be rendered. Please use the component without passing children elements.\n\n", 12: "It seems you are interpolating a keyframe declaration (%s) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\\`\\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css\n\n", 13: "%s is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.\n\n", 14: 'ThemeProvider: "theme" prop is required.\n\n', 15: "A stylis plugin has been supplied that is not named. We need a name for each plugin to be able to prevent styling collisions between different stylis configurations within the same app. Before you pass your plugin to `<StyleSheetManager stylisPlugins={[]}>`, please make sure each plugin is uniquely-named, e.g.\n\n```js\nObject.defineProperty(importedPlugin, 'name', { value: 'some-unique-name' });\n```\n\n", 16: "Reached the limit of how many styled components may be created at group %s.\nYou may only create up to 1,073,741,824 components. If you're creating components dynamically,\nas for instance in your render method then you may be running into this limitation.\n\n", 17: "CSSStyleSheet could not be found on HTMLStyleElement.\nHas styled-components' style tag been unmounted or altered by another script?\n", 18: "ThemeProvider: Please make sure your useTheme hook is within a `<ThemeProvider>`" } : {};
+function re() {
+  for (var e = [], t = 0; t < arguments.length; t++) e[t] = arguments[t];
+  for (var n = e[0], o2 = [], r2 = 1, s = e.length; r2 < s; r2 += 1) o2.push(e[r2]);
+  return o2.forEach(function(e2) {
+    n = n.replace(/%[a-z]/, e2);
+  }), n;
+}
+function se(t) {
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
+  return "production" === process.env.NODE_ENV ? new Error("An error occurred. See https://github.com/styled-components/styled-components/blob/main/packages/styled-components/src/utils/errors.md#".concat(t, " for more information.").concat(n.length > 0 ? " Args: ".concat(n.join(", ")) : "")) : new Error(re.apply(void 0, __spreadArray([oe[t]], n, false)).trim());
+}
+var ie = function() {
+  function e(e2) {
+    this.groupSizes = new Uint32Array(512), this.length = 512, this.tag = e2;
+  }
+  return e.prototype.indexOfGroup = function(e2) {
+    for (var t = 0, n = 0; n < e2; n++) t += this.groupSizes[n];
+    return t;
+  }, e.prototype.insertRules = function(e2, t) {
+    if (e2 >= this.groupSizes.length) {
+      for (var n = this.groupSizes, o2 = n.length, r2 = o2; e2 >= r2; ) if ((r2 <<= 1) < 0) throw se(16, "".concat(e2));
+      this.groupSizes = new Uint32Array(r2), this.groupSizes.set(n), this.length = r2;
+      for (var s = o2; s < r2; s++) this.groupSizes[s] = 0;
+    }
+    for (var i = this.indexOfGroup(e2 + 1), a2 = (s = 0, t.length); s < a2; s++) this.tag.insertRule(i, t[s]) && (this.groupSizes[e2]++, i++);
+  }, e.prototype.clearGroup = function(e2) {
+    if (e2 < this.length) {
+      var t = this.groupSizes[e2], n = this.indexOfGroup(e2), o2 = n + t;
+      this.groupSizes[e2] = 0;
+      for (var r2 = n; r2 < o2; r2++) this.tag.deleteRule(n);
+    }
+  }, e.prototype.getGroup = function(e2) {
+    var t = "";
+    if (e2 >= this.length || 0 === this.groupSizes[e2]) return t;
+    for (var n = this.groupSizes[e2], o2 = this.indexOfGroup(e2), r2 = o2 + n, s = o2; s < r2; s++) t += "".concat(this.tag.getRule(s)).concat(p);
+    return t;
+  }, e;
+}();
+var ae = 1 << 30;
+var ce = /* @__PURE__ */ new Map();
+var ue = /* @__PURE__ */ new Map();
+var le = 1;
+var pe = function(e) {
+  if (ce.has(e)) return ce.get(e);
+  for (; ue.has(le); ) le++;
+  var t = le++;
+  if ("production" !== process.env.NODE_ENV && ((0 | t) < 0 || t > ae)) throw se(16, "".concat(t));
+  return ce.set(e, t), ue.set(t, e), t;
+};
+var de = function(e, t) {
+  le = t + 1, ce.set(e, t), ue.set(t, e);
+};
+var he = "style[".concat(a, "][").concat(u, '="').concat(l, '"]');
+var fe = new RegExp("^".concat(a, '\\.g(\\d+)\\[id="([\\w\\d-]+)"\\].*?"([^"]*)'));
+var me = function(e, t, n) {
+  for (var o2, r2 = n.split(","), s = 0, i = r2.length; s < i; s++) (o2 = r2[s]) && e.registerName(t, o2);
+};
+var ye = function(e, t) {
+  for (var n, o2 = (null !== (n = t.textContent) && void 0 !== n ? n : "").split(p), r2 = [], s = 0, i = o2.length; s < i; s++) {
+    var a2 = o2[s].trim();
+    if (a2) {
+      var c2 = a2.match(fe);
+      if (c2) {
+        var u2 = 0 | parseInt(c2[1], 10), l2 = c2[2];
+        0 !== u2 && (de(l2, u2), me(e, l2, c2[3]), e.getTag().insertRules(u2, r2)), r2.length = 0;
+      } else r2.push(a2);
+    }
+  }
+};
+var ve = function(e) {
+  for (var t = document.querySelectorAll(he), n = 0, o2 = t.length; n < o2; n++) {
+    var r2 = t[n];
+    r2 && r2.getAttribute(a) !== c && (ye(e, r2), r2.parentNode && r2.parentNode.removeChild(r2));
+  }
+};
+function ge() {
+  return "undefined" != typeof __webpack_nonce__ ? __webpack_nonce__ : null;
+}
+var Se = function(e) {
+  var t = document.head, n = e || t, o2 = document.createElement("style"), r2 = function(e2) {
+    var t2 = Array.from(e2.querySelectorAll("style[".concat(a, "]")));
+    return t2[t2.length - 1];
+  }(n), s = void 0 !== r2 ? r2.nextSibling : null;
+  o2.setAttribute(a, c), o2.setAttribute(u, l);
+  var i = ge();
+  return i && o2.setAttribute("nonce", i), n.insertBefore(o2, s), o2;
+};
+var we = function() {
+  function e(e2) {
+    this.element = Se(e2), this.element.appendChild(document.createTextNode("")), this.sheet = function(e3) {
+      if (e3.sheet) return e3.sheet;
+      for (var t = document.styleSheets, n = 0, o2 = t.length; n < o2; n++) {
+        var r2 = t[n];
+        if (r2.ownerNode === e3) return r2;
+      }
+      throw se(17);
+    }(this.element), this.length = 0;
+  }
+  return e.prototype.insertRule = function(e2, t) {
+    try {
+      return this.sheet.insertRule(t, e2), this.length++, true;
+    } catch (e3) {
+      return false;
+    }
+  }, e.prototype.deleteRule = function(e2) {
+    this.sheet.deleteRule(e2), this.length--;
+  }, e.prototype.getRule = function(e2) {
+    var t = this.sheet.cssRules[e2];
+    return t && t.cssText ? t.cssText : "";
+  }, e;
+}();
+var be = function() {
+  function e(e2) {
+    this.element = Se(e2), this.nodes = this.element.childNodes, this.length = 0;
+  }
+  return e.prototype.insertRule = function(e2, t) {
+    if (e2 <= this.length && e2 >= 0) {
+      var n = document.createTextNode(t);
+      return this.element.insertBefore(n, this.nodes[e2] || null), this.length++, true;
+    }
+    return false;
+  }, e.prototype.deleteRule = function(e2) {
+    this.element.removeChild(this.nodes[e2]), this.length--;
+  }, e.prototype.getRule = function(e2) {
+    return e2 < this.length ? this.nodes[e2].textContent : "";
+  }, e;
+}();
+var Ce = function() {
+  function e(e2) {
+    this.rules = [], this.length = 0;
+  }
+  return e.prototype.insertRule = function(e2, t) {
+    return e2 <= this.length && (this.rules.splice(e2, 0, t), this.length++, true);
+  }, e.prototype.deleteRule = function(e2) {
+    this.rules.splice(e2, 1), this.length--;
+  }, e.prototype.getRule = function(e2) {
+    return e2 < this.length ? this.rules[e2] : "";
+  }, e;
+}();
+var Ee = d;
+var Ne = { isServer: !d, useCSSOMInjection: !f };
+var Ae = function() {
+  function e(e2, n, o2) {
+    void 0 === e2 && (e2 = w), void 0 === n && (n = {});
+    var r2 = this;
+    this.options = __assign(__assign({}, Ne), e2), this.gs = n, this.names = new Map(o2), this.server = !!e2.isServer, !this.server && d && Ee && (Ee = false, ve(this)), ne(this, function() {
+      return function(e3) {
+        for (var t = e3.getTag(), n2 = t.length, o3 = "", r3 = function(n3) {
+          var r4 = function(e4) {
+            return ue.get(e4);
+          }(n3);
+          if (void 0 === r4) return "continue";
+          var s2 = e3.names.get(r4), i = t.getGroup(n3);
+          if (void 0 === s2 || !s2.size || 0 === i.length) return "continue";
+          var c2 = "".concat(a, ".g").concat(n3, '[id="').concat(r4, '"]'), u2 = "";
+          void 0 !== s2 && s2.forEach(function(e4) {
+            e4.length > 0 && (u2 += "".concat(e4, ","));
+          }), o3 += "".concat(i).concat(c2, '{content:"').concat(u2, '"}').concat(p);
+        }, s = 0; s < n2; s++) r3(s);
+        return o3;
+      }(r2);
+    });
+  }
+  return e.registerId = function(e2) {
+    return pe(e2);
+  }, e.prototype.rehydrate = function() {
+    !this.server && d && ve(this);
+  }, e.prototype.reconstructWithOptions = function(n, o2) {
+    return void 0 === o2 && (o2 = true), new e(__assign(__assign({}, this.options), n), this.gs, o2 && this.names || void 0);
+  }, e.prototype.allocateGSInstance = function(e2) {
+    return this.gs[e2] = (this.gs[e2] || 0) + 1;
+  }, e.prototype.getTag = function() {
+    return this.tag || (this.tag = (e2 = function(e3) {
+      var t = e3.useCSSOMInjection, n = e3.target;
+      return e3.isServer ? new Ce(n) : t ? new we(n) : new be(n);
+    }(this.options), new ie(e2)));
+    var e2;
+  }, e.prototype.hasNameForId = function(e2, t) {
+    return this.names.has(e2) && this.names.get(e2).has(t);
+  }, e.prototype.registerName = function(e2, t) {
+    if (pe(e2), this.names.has(e2)) this.names.get(e2).add(t);
+    else {
+      var n = /* @__PURE__ */ new Set();
+      n.add(t), this.names.set(e2, n);
+    }
+  }, e.prototype.insertRules = function(e2, t, n) {
+    this.registerName(e2, t), this.getTag().insertRules(pe(e2), n);
+  }, e.prototype.clearNames = function(e2) {
+    this.names.has(e2) && this.names.get(e2).clear();
+  }, e.prototype.clearRules = function(e2) {
+    this.getTag().clearGroup(pe(e2)), this.clearNames(e2);
+  }, e.prototype.clearTag = function() {
+    this.tag = void 0;
+  }, e;
+}();
+var Pe = /&/g;
+var _e = 47;
+function Ie(e) {
+  if (-1 === e.indexOf("}")) return false;
+  for (var t = e.length, n = 0, o2 = 0, r2 = false, s = 0; s < t; s++) {
+    var i = e.charCodeAt(s);
+    if (0 !== o2 || r2 || i !== _e || 42 !== e.charCodeAt(s + 1)) if (r2) 42 === i && e.charCodeAt(s + 1) === _e && (r2 = false, s++);
+    else if (34 !== i && 39 !== i || 0 !== s && 92 === e.charCodeAt(s - 1)) {
+      if (0 === o2) {
+        if (123 === i) n++;
+        else if (125 === i && --n < 0) return true;
+      }
+    } else 0 === o2 ? o2 = i : o2 === i && (o2 = 0);
+    else r2 = true, s++;
+  }
+  return 0 !== n || 0 !== o2;
+}
+function Oe(e, t) {
+  return e.map(function(e2) {
+    return "rule" === e2.type && (e2.value = "".concat(t, " ").concat(e2.value), e2.value = e2.value.replaceAll(",", ",".concat(t, " ")), e2.props = e2.props.map(function(e3) {
+      return "".concat(t, " ").concat(e3);
+    })), Array.isArray(e2.children) && "@keyframes" !== e2.type && (e2.children = Oe(e2.children, t)), e2;
+  });
+}
+function De(e) {
+  var t, n, o2, r2 = w , i = r2.options, a2 = void 0 === i ? w : i, c2 = r2.plugins, u2 = void 0 === c2 ? S : c2, l2 = function(e2, o3, r3) {
+    return r3.startsWith(n) && r3.endsWith(n) && r3.replaceAll(n, "").length > 0 ? ".".concat(t) : e2;
+  }, p2 = u2.slice();
+  p2.push(function(e2) {
+    e2.type === RULESET && e2.value.includes("&") && (e2.props[0] = e2.props[0].replace(Pe, n).replace(o2, l2));
+  }), a2.prefix && p2.push(prefixer), p2.push(stringify);
+  var d2 = function(e2, r3, i2, c3) {
+    void 0 === r3 && (r3 = ""), void 0 === i2 && (i2 = ""), void 0 === c3 && (c3 = "&"), t = c3, n = r3, o2 = new RegExp("\\".concat(n, "\\b"), "g");
+    var u3 = function(e3) {
+      if (!Ie(e3)) return e3;
+      for (var t2 = e3.length, n2 = "", o3 = 0, r4 = 0, s = 0, i3 = false, a3 = 0; a3 < t2; a3++) {
+        var c4 = e3.charCodeAt(a3);
+        if (0 !== s || i3 || c4 !== _e || 42 !== e3.charCodeAt(a3 + 1)) if (i3) 42 === c4 && e3.charCodeAt(a3 + 1) === _e && (i3 = false, a3++);
+        else if (34 !== c4 && 39 !== c4 || 0 !== a3 && 92 === e3.charCodeAt(a3 - 1)) {
+          if (0 === s) if (123 === c4) r4++;
+          else if (125 === c4) {
+            if (--r4 < 0) {
+              for (var u4 = a3 + 1; u4 < t2; ) {
+                var l4 = e3.charCodeAt(u4);
+                if (59 === l4 || 10 === l4) break;
+                u4++;
+              }
+              u4 < t2 && 59 === e3.charCodeAt(u4) && u4++, r4 = 0, a3 = u4 - 1, o3 = u4;
+              continue;
+            }
+            0 === r4 && (n2 += e3.substring(o3, a3 + 1), o3 = a3 + 1);
+          } else 59 === c4 && 0 === r4 && (n2 += e3.substring(o3, a3 + 1), o3 = a3 + 1);
+        } else 0 === s ? s = c4 : s === c4 && (s = 0);
+        else i3 = true, a3++;
+      }
+      if (o3 < t2) {
+        var p3 = e3.substring(o3);
+        Ie(p3) || (n2 += p3);
+      }
+      return n2;
+    }(function(e3) {
+      if (-1 === e3.indexOf("//")) return e3;
+      for (var t2 = e3.length, n2 = [], o3 = 0, r4 = 0, s = 0, i3 = 0; r4 < t2; ) {
+        var a3 = e3.charCodeAt(r4);
+        if (34 !== a3 && 39 !== a3 || 0 !== r4 && 92 === e3.charCodeAt(r4 - 1)) if (0 === s) if (40 === a3 && r4 >= 3 && 108 == (32 | e3.charCodeAt(r4 - 1)) && 114 == (32 | e3.charCodeAt(r4 - 2)) && 117 == (32 | e3.charCodeAt(r4 - 3))) i3 = 1, r4++;
+        else if (i3 > 0) 41 === a3 ? i3-- : 40 === a3 && i3++, r4++;
+        else if (a3 === _e && r4 + 1 < t2 && e3.charCodeAt(r4 + 1) === _e) {
+          for (r4 > o3 && n2.push(e3.substring(o3, r4)); r4 < t2 && 10 !== e3.charCodeAt(r4); ) r4++;
+          o3 = r4;
+        } else r4++;
+        else r4++;
+        else 0 === s ? s = a3 : s === a3 && (s = 0), r4++;
+      }
+      return 0 === o3 ? e3 : (o3 < t2 && n2.push(e3.substring(o3)), n2.join(""));
+    }(e2)), l3 = compile(i2 || r3 ? "".concat(i2, " ").concat(r3, " { ").concat(u3, " }") : u3);
+    a2.namespace && (l3 = Oe(l3, a2.namespace));
+    var d3 = [];
+    return serialize(l3, middleware(p2.concat(rulesheet(function(e3) {
+      return d3.push(e3);
+    })))), d3;
+  };
+  return d2.hash = u2.length ? u2.reduce(function(e2, t2) {
+    return t2.name || se(15), D(e2, t2.name);
+  }, 5381).toString() : "", d2;
+}
+var Te = new Ae();
+var xe = De();
+var Re = { shouldForwardProp: void 0, styleSheet: Te, stylis: xe };
+var je = h ? { Provider: function(e) {
+  return e.children;
+}, Consumer: function(e) {
+  return (0, e.children)(Re);
+} } : o__namespace.default.createContext(Re);
+je.Consumer;
+h ? { } : o__namespace.default.createContext(void 0);
+function Ve() {
+  return !h && o__namespace.default.useContext ? o__namespace.default.useContext(je) : Re;
+}
+var Be = function() {
+  function e(e2, t) {
+    var n = this;
+    this.inject = function(e3, t2) {
+      void 0 === t2 && (t2 = xe);
+      var o2 = n.name + t2.hash;
+      e3.hasNameForId(n.id, o2) || e3.insertRules(n.id, o2, t2(n.rules, o2, "@keyframes"));
+    }, this.name = e2, this.id = "sc-keyframes-".concat(e2), this.rules = t, ne(this, function() {
+      throw se(12, String(n.name));
+    });
+  }
+  return e.prototype.getName = function(e2) {
+    return void 0 === e2 && (e2 = xe), this.name + e2.hash;
+  }, e;
+}();
+function Le(e, t) {
+  return null == t || "boolean" == typeof t || "" === t ? "" : "number" != typeof t || 0 === t || e in unitlessKeys || e.startsWith("--") ? String(t).trim() : "".concat(t, "px");
+}
+var ze = function(e) {
+  return e >= "A" && e <= "Z";
+};
+function Ge(e) {
+  for (var t = "", n = 0; n < e.length; n++) {
+    var o2 = e[n];
+    if (1 === n && "-" === o2 && "-" === e[0]) return e;
+    ze(o2) ? t += "-" + o2.toLowerCase() : t += o2;
+  }
+  return t.startsWith("ms-") ? "-" + t : t;
+}
+var $e = function(e) {
+  return null == e || false === e || "" === e;
+};
+var Ye = function(t) {
+  var n = [];
+  for (var o2 in t) {
+    var r2 = t[o2];
+    t.hasOwnProperty(o2) && !$e(r2) && (Array.isArray(r2) && r2.isCss || X(r2) ? n.push("".concat(Ge(o2), ":"), r2, ";") : ee(r2) ? n.push.apply(n, __spreadArray(__spreadArray(["".concat(o2, " {")], Ye(r2), false), ["}"], false)) : n.push("".concat(Ge(o2), ": ").concat(Le(o2, r2), ";")));
+  }
+  return n;
+};
+function We(e, t, n, o2) {
+  if ($e(e)) return [];
+  if (Z(e)) return [".".concat(e.styledComponentId)];
+  if (X(e)) {
+    if (!X(s = e) || s.prototype && s.prototype.isReactComponent || !t) return [e];
+    var r2 = e(t);
+    return "production" === process.env.NODE_ENV || "object" != typeof r2 || Array.isArray(r2) || r2 instanceof Be || ee(r2) || null === r2 || console.error("".concat(R(e), " is not a styled component and cannot be referred to via component selector. See https://www.styled-components.com/docs/advanced#referring-to-other-components for more details.")), We(r2, t, n, o2);
+  }
+  var s;
+  return e instanceof Be ? n ? (e.inject(n, o2), [e.getName(o2)]) : [e] : ee(e) ? Ye(e) : Array.isArray(e) ? Array.prototype.concat.apply(S, e.map(function(e2) {
+    return We(e2, t, n, o2);
+  })) : [e.toString()];
+}
+function qe(e) {
+  for (var t = 0; t < e.length; t += 1) {
+    var n = e[t];
+    if (X(n) && !Z(n)) return false;
+  }
+  return true;
+}
+var He = T(l);
+var Ue = function() {
+  function e(e2, t, n) {
+    this.rules = e2, this.staticRulesId = "", this.isStatic = "production" === process.env.NODE_ENV && (void 0 === n || n.isStatic) && qe(e2), this.componentId = t, this.baseHash = D(He, t), this.baseStyle = n, Ae.registerId(t);
+  }
+  return e.prototype.generateAndInjectStyles = function(e2, t, n) {
+    var o2 = this.baseStyle ? this.baseStyle.generateAndInjectStyles(e2, t, n).className : "";
+    if (this.isStatic && !n.hash) if (this.staticRulesId && t.hasNameForId(this.componentId, this.staticRulesId)) o2 = K(o2, this.staticRulesId);
+    else {
+      var r2 = Q(We(this.rules, e2, t, n)), s = I(D(this.baseHash, r2) >>> 0);
+      if (!t.hasNameForId(this.componentId, s)) {
+        var i = n(r2, ".".concat(s), void 0, this.componentId);
+        t.insertRules(this.componentId, s, i);
+      }
+      o2 = K(o2, s), this.staticRulesId = s;
+    }
+    else {
+      for (var a2 = D(this.baseHash, n.hash), c2 = "", u2 = 0; u2 < this.rules.length; u2++) {
+        var l2 = this.rules[u2];
+        if ("string" == typeof l2) c2 += l2, "production" !== process.env.NODE_ENV && (a2 = D(a2, l2));
+        else if (l2) {
+          var p2 = Q(We(l2, e2, t, n));
+          a2 = D(a2, p2 + u2), c2 += p2;
+        }
+      }
+      if (c2) {
+        var d2 = I(a2 >>> 0);
+        if (!t.hasNameForId(this.componentId, d2)) {
+          var h2 = n(c2, ".".concat(d2), void 0, this.componentId);
+          t.insertRules(this.componentId, d2, h2);
+        }
+        o2 = K(o2, d2);
+      }
+    }
+    return { className: o2, css: "undefined" == typeof window ? t.getTag().getGroup(pe(this.componentId)) : "" };
+  }, e;
+}();
+var Je = h ? { Provider: function(e) {
+  return e.children;
+}, Consumer: function(e) {
+  return (0, e.children)(void 0);
+} } : o__namespace.default.createContext(void 0);
+Je.Consumer;
+var Qe = {};
+var et = /* @__PURE__ */ new Set();
+function tt(e, s, i) {
+  var a2 = Z(e), c2 = e, u2 = !j(e), p2 = s.attrs, d2 = void 0 === p2 ? S : p2, f2 = s.componentId, m = void 0 === f2 ? function(e2, t) {
+    var n = "string" != typeof e2 ? "sc" : A(e2);
+    Qe[n] = (Qe[n] || 0) + 1;
+    var o2 = "".concat(n, "-").concat(x(l + n + Qe[n]));
+    return t ? "".concat(t, "-").concat(o2) : o2;
+  }(s.displayName, s.parentComponentId) : f2, y2 = s.displayName, v2 = void 0 === y2 ? function(e2) {
+    return j(e2) ? "styled.".concat(e2) : "Styled(".concat(R(e2), ")");
+  }(e) : y2, E2 = s.displayName && s.componentId ? "".concat(A(s.displayName), "-").concat(s.componentId) : s.componentId || m, N2 = a2 && c2.attrs ? c2.attrs.concat(d2).filter(Boolean) : d2, P2 = s.shouldForwardProp;
+  if (a2 && c2.shouldForwardProp) {
+    var _2 = c2.shouldForwardProp;
+    if (s.shouldForwardProp) {
+      var I2 = s.shouldForwardProp;
+      P2 = function(e2, t) {
+        return _2(e2, t) && I2(e2, t);
+      };
+    } else P2 = _2;
+  }
+  var O2 = new Ue(i, E2, a2 ? c2.componentStyle : void 0);
+  function D2(e2, s2) {
+    return function(e3, s3, i2) {
+      var a3 = e3.attrs, c3 = e3.componentStyle, u3 = e3.defaultProps, l2 = e3.foldedComponentIds, p3 = e3.styledComponentId, d3 = e3.target, f3 = o__namespace.default.useContext ? o__namespace.default.useContext(Je) : void 0, m2 = Ve(), y3 = e3.shouldForwardProp || m2.shouldForwardProp;
+      "production" !== process.env.NODE_ENV && o__namespace.default.useDebugValue && o__namespace.default.useDebugValue(p3);
+      var v3 = b(s3, f3, u3) || w, g2 = function(e4, n, o2) {
+        for (var r2, s4 = __assign(__assign({}, n), { className: void 0, theme: o2 }), i3 = 0; i3 < e4.length; i3 += 1) {
+          var a4 = X(r2 = e4[i3]) ? r2(s4) : r2;
+          for (var c4 in a4) "className" === c4 ? s4.className = K(s4.className, a4[c4]) : "style" === c4 ? s4.style = __assign(__assign({}, s4.style), a4[c4]) : s4[c4] = a4[c4];
+        }
+        return "className" in n && "string" == typeof n.className && (s4.className = K(s4.className, n.className)), s4;
+      }(a3, s3, v3), S2 = g2.as || d3, E3 = {};
+      for (var N3 in g2) void 0 === g2[N3] || "$" === N3[0] || "as" === N3 || "theme" === N3 && g2.theme === v3 || ("forwardedAs" === N3 ? E3.as = g2.forwardedAs : y3 && !y3(N3, S2) || (E3[N3] = g2[N3], y3 || "development" !== process.env.NODE_ENV || isPropValid(N3) || et.has(N3) || !C.has(S2) || (et.add(N3), console.warn('styled-components: it looks like an unknown prop "'.concat(N3, '" is being sent through to the DOM, which will likely trigger a React console error. If you would like automatic filtering of unknown props, you can opt-into that behavior via `<StyleSheetManager shouldForwardProp={...}>` (connect an API like `@emotion/is-prop-valid`) or consider using transient props (`$` prefix for automatic filtering.)')))));
+      var A2 = function(e4, t) {
+        var n = Ve(), r2 = e4.generateAndInjectStyles(t, n.styleSheet, n.stylis);
+        return "production" !== process.env.NODE_ENV && o__namespace.default.useDebugValue && o__namespace.default.useDebugValue(r2.className), r2;
+      }(c3, g2), P3 = A2.className, _3 = A2.css;
+      "production" !== process.env.NODE_ENV && e3.warnTooManyClasses && e3.warnTooManyClasses(P3);
+      var I3 = K(l2, p3);
+      P3 && (I3 += " " + P3), g2.className && (I3 += " " + g2.className), E3[j(S2) && !C.has(S2) ? "class" : "className"] = I3, i2 && (E3.ref = i2);
+      var O3 = o.createElement(S2, E3);
+      return h && _3 ? o__namespace.default.createElement(o__namespace.default.Fragment, null, o__namespace.default.createElement("style", { precedence: "styled-components", href: "sc-".concat(p3, "-").concat(P3), children: _3 }), O3) : O3;
+    }(T2, e2, s2);
+  }
+  D2.displayName = v2;
+  var T2 = o__namespace.default.forwardRef(D2);
+  return T2.attrs = N2, T2.componentStyle = O2, T2.displayName = v2, T2.shouldForwardProp = P2, T2.foldedComponentIds = a2 ? K(c2.foldedComponentIds, c2.styledComponentId) : "", T2.styledComponentId = E2, T2.target = a2 ? c2.target : e, Object.defineProperty(T2, "defaultProps", { get: function() {
+    return this._foldedDefaultProps;
+  }, set: function(e2) {
+    this._foldedDefaultProps = a2 ? function(e3) {
+      for (var t = [], n = 1; n < arguments.length; n++) t[n - 1] = arguments[n];
+      for (var o2 = 0, r2 = t; o2 < r2.length; o2++) te(e3, r2[o2], true);
+      return e3;
+    }({}, c2.defaultProps, e2) : e2;
+  } }), "production" !== process.env.NODE_ENV && (g(v2, E2), T2.warnTooManyClasses = /* @__PURE__ */ function(e2, t) {
+    var n = {}, o2 = false;
+    return function(r2) {
+      if (!o2 && (n[r2] = true, Object.keys(n).length >= 200)) {
+        var s2 = t ? ' with the id of "'.concat(t, '"') : "";
+        console.warn("Over ".concat(200, " classes were generated for component ").concat(e2).concat(s2, ".\n") + "Consider using the attrs method, together with a style object for frequently changed styles.\nExample:\n  const Component = styled.div.attrs(props => ({\n    style: {\n      background: props.background,\n    },\n  }))`width: 100%;`\n\n  <Component />"), o2 = true, n = {};
+      }
+    };
+  }(v2, E2)), ne(T2, function() {
+    return ".".concat(T2.styledComponentId);
+  }), u2 && J(T2, e, { attrs: true, componentStyle: true, displayName: true, foldedComponentIds: true, shouldForwardProp: true, styledComponentId: true, target: true }), T2;
+}
+function nt(e, t) {
+  for (var n = [e[0]], o2 = 0, r2 = t.length; o2 < r2; o2 += 1) n.push(t[o2], e[o2 + 1]);
+  return n;
+}
+var ot = function(e) {
+  return Object.assign(e, { isCss: true });
+};
+function rt(t) {
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
+  if (X(t) || ee(t)) return ot(We(nt(S, __spreadArray([t], n, true))));
+  var r2 = t;
+  return 0 === n.length && 1 === r2.length && "string" == typeof r2[0] ? We(r2) : ot(We(nt(r2, n)));
+}
+function st(n, o2, r2) {
+  if (void 0 === r2 && (r2 = w), !o2) throw se(1, o2);
+  var s = function(t) {
+    for (var s2 = [], i = 1; i < arguments.length; i++) s2[i - 1] = arguments[i];
+    return n(o2, r2, rt.apply(void 0, __spreadArray([t], s2, false)));
+  };
+  return s.attrs = function(e) {
+    return st(n, o2, __assign(__assign({}, r2), { attrs: Array.prototype.concat(r2.attrs, e).filter(Boolean) }));
+  }, s.withConfig = function(e) {
+    return st(n, o2, __assign(__assign({}, r2), e));
+  }, s;
+}
+var it = function(e) {
+  return st(tt, e);
+};
+var at = it;
+C.forEach(function(e) {
+  at[e] = it(e);
+});
+function lt(t) {
+  for (var n = [], o2 = 1; o2 < arguments.length; o2++) n[o2 - 1] = arguments[o2];
+  "production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("`keyframes` cannot be used on ReactNative, only on the web. To do animation in ReactNative please use Animated.");
+  var r2 = Q(rt.apply(void 0, __spreadArray([t], n, false))), s = x(r2);
+  return new Be(s, r2);
+}
+"production" !== process.env.NODE_ENV && "undefined" != typeof navigator && "ReactNative" === navigator.product && console.warn("It looks like you've imported 'styled-components' on React Native.\nPerhaps you're looking to import 'styled-components/native'?\nRead more about this at https://www.styled-components.com/docs/basics#react-native");
+var mt = "__sc-".concat(a, "__");
+"production" !== process.env.NODE_ENV && "test" !== process.env.NODE_ENV && "undefined" != typeof window && (window[mt] || (window[mt] = 0), 1 === window[mt] && console.warn("It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.\n\nSee https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-several-instances-of-module-on-the-page for more info."), window[mt] += 1);
+var pulse = lt`
+  0%, 100% {
+    opacity: 0.45;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.08);
+  }
+`;
+var shimmer = lt`
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+`;
+var LogoContainer = at.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.35rem 0.6rem;
+  background: linear-gradient(
+    135deg,
+    rgba(240, 185, 11, 0.05) 0%,
+    rgba(240, 185, 11, 0.1) 50%,
+    rgba(240, 185, 11, 0.05) 100%
+  );
+  border: 1px solid rgba(240, 185, 11, 0.3);
+  border-radius: 5px;
+  position: relative;
+  overflow: visible;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  line-height: 1.4;
+
+  ${({ $isGlowing }) => $isGlowing ? rt`
+          border-color: rgba(240, 185, 11, 1);
+          box-shadow:
+            0 0 25px rgba(240, 185, 11, 0.8),
+            0 0 40px rgba(240, 185, 11, 0.5),
+            inset 0 0 20px rgba(240, 185, 11, 0.3);
+          background: linear-gradient(
+            135deg,
+            rgba(240, 185, 11, 0.2) 0%,
+            rgba(240, 185, 11, 0.3) 50%,
+            rgba(240, 185, 11, 0.2) 100%
+          );
+          animation: quickPulse 0.35s ease-out;
+
+          @keyframes quickPulse {
+            0% {
+              transform: scale(1);
+            }
+            50% {
+              transform: scale(1.05);
+            }
+            100% {
+              transform: scale(1);
+            }
+          }
+        ` : null}
+
+  @media (max-width: 768px) {
+    padding: 0.3rem 0.4rem 0.3rem 0.25rem;
+    gap: 0.25rem;
+    border-radius: 4px;
+    transition: none;
+  }
+
+  @media (max-width: 480px) {
+    padding: 0.2rem 0.3rem 0.2rem 0.2rem;
+    gap: 0.2rem;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      border-color: rgba(240, 185, 11, 0.6);
+      background: linear-gradient(
+        135deg,
+        rgba(240, 185, 11, 0.1) 0%,
+        rgba(240, 185, 11, 0.15) 50%,
+        rgba(240, 185, 11, 0.1) 100%
+      );
+      transform: translateY(-1px);
+      box-shadow: 0 4px 12px rgba(240, 185, 11, 0.2);
+    }
+  }
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, transparent, rgba(240, 185, 11, 0.1), transparent);
+    background-size: 200% 100%;
+    animation: ${shimmer} 3s infinite;
+    pointer-events: none;
+  }
+`;
+var IconWrapper = at.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 16px;
+  height: 16px;
+
+  @media (max-width: 480px) {
+    width: 14px;
+    height: 14px;
+  }
+`;
+var IconCircle = at.span`
+  position: absolute;
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+  border: 2px solid ${({ color }) => color};
+  border-radius: 50%;
+  animation: ${pulse} ${({ duration }) => duration}s infinite cubic-bezier(0.4, 0, 0.6, 1);
+  animation-delay: ${({ delay }) => delay}s;
+  transform-origin: center;
+  will-change: transform, opacity;
+`;
+var IconCore = at.span`
+  width: 5px;
+  height: 5px;
+  background: linear-gradient(135deg, #0ecb81 0%, #2ecc71 100%);
+  border-radius: 50%;
+  box-shadow: 0 0 6px rgba(14, 203, 129, 0.6);
+  position: relative;
+  z-index: 1;
+`;
+var LogoText = at.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+  position: relative;
+  z-index: 1;
+`;
+var LoafLogoImage = at.img`
+  height: 20px;
+  position: relative;
+  z-index: 1;
+
+  @media (max-width: 480px) {
+    height: 18px;
+  }
+`;
+var LiquidityText = at.span`
+  font-size: 0.65rem;
+  font-weight: 400;
+  background: linear-gradient(135deg, #f0b90b 0%, #ffd700 50%, #f0b90b 100%);
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  letter-spacing: 0.3px;
+  opacity: 0.75;
+  line-height: 1;
+
+  @media (max-width: 480px) {
+    font-size: 0.55rem;
+    letter-spacing: 0.1px;
+  }
+`;
+var LoafLiquidityBadge = o__namespace.forwardRef(
+  ({ className, isGlowing, onClick, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      LogoContainer,
+      {
+        ref,
+        onClick,
+        $isGlowing: isGlowing,
+        className,
+        role: onClick ? "button" : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(LogoText, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(LoafLogoImage, { src: "/Loaf-logo-Banner.png", alt: "Loaf" }),
+            /* @__PURE__ */ jsxRuntime.jsx(LiquidityText, { children: children ?? "Liquidity" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(IconWrapper, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconCore, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { size: 10, color: "rgba(14, 203, 129, 0.5)", duration: 4, delay: 0 }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { size: 13, color: "rgba(14, 203, 129, 0.35)", duration: 5.2, delay: 0.7 }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconCircle, { size: 16, color: "rgba(14, 203, 129, 0.25)", duration: 6.3, delay: 1.3 })
+          ] })
+        ]
+      }
+    );
+  }
+);
+LoafLiquidityBadge.displayName = "LoafLiquidityBadge";
 var formatNumber = (value, precision) => value.toFixed(precision);
 function DepthRow({
   side,
@@ -844,7 +2384,7 @@ var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
 var LEVEL_ROWS_VISIBLE = 6;
 var DEPTH_ROW_HEIGHT_PX = 34;
 var SECTION_HEIGHT = LEVEL_ROWS_VISIBLE * DEPTH_ROW_HEIGHT_PX;
-var Orderbook = React5__namespace.forwardRef(
+var Orderbook = o__namespace.forwardRef(
   ({
     asks,
     bids,
@@ -857,21 +2397,21 @@ var Orderbook = React5__namespace.forwardRef(
     amountPrecision = 2,
     defaultTab = "orderbook",
     onTabChange,
-    rightHeader,
+    rightHeader = /* @__PURE__ */ jsxRuntime.jsx(LoafLiquidityBadge, { className: "text-[0.6rem]" }),
     className,
     ...props
   }, ref) => {
-    const [tab, setTab] = React5__namespace.useState(defaultTab);
-    const [tradeFilter, setTradeFilter] = React5__namespace.useState("all");
-    React5__namespace.useEffect(() => {
+    const [tab, setTab] = o__namespace.useState(defaultTab);
+    const [tradeFilter, setTradeFilter] = o__namespace.useState("all");
+    o__namespace.useEffect(() => {
       setTab(defaultTab);
     }, [defaultTab]);
-    const handleTab = (next) => {
-      setTab(next);
-      onTabChange?.(next);
+    const handleTab = (next2) => {
+      setTab(next2);
+      onTabChange?.(next2);
     };
-    const maxAskDepth = Math.max(1, ...asks.map((l) => l.depth ?? l.amount));
-    const maxBidDepth = Math.max(1, ...bids.map((l) => l.depth ?? l.amount));
+    const maxAskDepth = Math.max(1, ...asks.map((l2) => l2.depth ?? l2.amount));
+    const maxBidDepth = Math.max(1, ...bids.map((l2) => l2.depth ?? l2.amount));
     const midClass = midChangePercent == null ? "text-white" : midChangePercent >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
     const tradeFiltered = trades.filter((t) => tradeFilter === "all" || t.type === tradeFilter);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -879,7 +2419,7 @@ var Orderbook = React5__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-black/30 text-white shadow-md",
+          "w-full max-w-[520px] overflow-hidden rounded-[12px] border border-white/10 bg-[#111111] text-white shadow-md",
           className
         ),
         ...props,
@@ -989,17 +2529,17 @@ var Orderbook = React5__namespace.forwardRef(
                 {
                   className: "divide-y divide-white/5 overflow-y-auto",
                   style: { height: `${SECTION_HEIGHT}px`, scrollbarGutter: "stable" },
-                  children: asks.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                  children: asks.map((l2, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                     DepthRow,
                     {
                       side: "ask",
-                      price: l.price,
-                      amount: l.amount,
-                      depthPct: (l.depth ?? l.amount) / maxAskDepth * 100,
+                      price: l2.price,
+                      amount: l2.amount,
+                      depthPct: (l2.depth ?? l2.amount) / maxAskDepth * 100,
                       precision,
                       amountPrecision
                     },
-                    `ask-${idx}-${l.price}-${l.amount}`
+                    `ask-${idx}-${l2.price}-${l2.amount}`
                   ))
                 }
               ),
@@ -1020,17 +2560,17 @@ var Orderbook = React5__namespace.forwardRef(
                 {
                   className: "divide-y divide-white/5 overflow-y-auto",
                   style: { height: `${SECTION_HEIGHT}px`, scrollbarGutter: "stable" },
-                  children: bids.map((l, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+                  children: bids.map((l2, idx) => /* @__PURE__ */ jsxRuntime.jsx(
                     DepthRow,
                     {
                       side: "bid",
-                      price: l.price,
-                      amount: l.amount,
-                      depthPct: (l.depth ?? l.amount) / maxBidDepth * 100,
+                      price: l2.price,
+                      amount: l2.amount,
+                      depthPct: (l2.depth ?? l2.amount) / maxBidDepth * 100,
                       precision,
                       amountPrecision
                     },
-                    `bid-${idx}-${l.price}-${l.amount}`
+                    `bid-${idx}-${l2.price}-${l2.amount}`
                   ))
                 }
               )
@@ -1042,7 +2582,7 @@ var Orderbook = React5__namespace.forwardRef(
   }
 );
 Orderbook.displayName = "Orderbook";
-var PropertyTour = React5__namespace.forwardRef(
+var PropertyTour = o__namespace.forwardRef(
   ({
     className,
     title,
@@ -1055,13 +2595,13 @@ var PropertyTour = React5__namespace.forwardRef(
     playsInline = true,
     ...props
   }, ref) => {
-    const videoRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const videoRef = o__namespace.useRef(null);
+    o__namespace.useEffect(() => {
       const video = videoRef.current;
       if (!video) return;
       const handleFullscreenChange = () => {
-        const d = document;
-        const isFullscreen = !!(d.fullscreenElement || d.webkitFullscreenElement || d.mozFullScreenElement || d.msFullscreenElement);
+        const d2 = document;
+        const isFullscreen = !!(d2.fullscreenElement || d2.webkitFullscreenElement || d2.mozFullScreenElement || d2.msFullscreenElement);
         if (isFullscreen) {
           video.style.objectFit = "contain";
           video.style.width = "100vw";
@@ -1106,7 +2646,7 @@ var PropertyTour = React5__namespace.forwardRef(
       {
         ref,
         className: cn(
-          "w-full max-w-[820px] rounded-[12px] border border-white/10 bg-black/30 text-white backdrop-blur-md",
+          "w-full max-w-[820px] rounded-[12px] border border-white/10 bg-[#111111] text-white backdrop-blur-md",
           className
         ),
         ...props,
@@ -1179,7 +2719,7 @@ var formatDate = (value) => {
     year: "numeric"
   });
 };
-var PropertyNewsUpdates = React5__namespace.forwardRef(
+var PropertyNewsUpdates = o__namespace.forwardRef(
   ({
     className,
     heading = "Property News & Headlines",
@@ -1189,14 +2729,14 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
     highlightFirst = true,
     ...props
   }, ref) => {
-    const [page, setPage] = React5__namespace.useState(0);
-    React5__namespace.useEffect(() => {
+    const [page, setPage] = o__namespace.useState(0);
+    o__namespace.useEffect(() => {
       ensureAnimationsInjected();
     }, []);
     const hasItems = Array.isArray(items) && items.length > 0;
-    const totalPages = React5__namespace.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
-    React5__namespace.useEffect(() => {
-      setPage((prev) => Math.min(prev, totalPages - 1));
+    const totalPages = o__namespace.useMemo(() => hasItems ? Math.max(1, Math.ceil(items.length / ITEMS_PER_PAGE)) : 1, [hasItems, items.length]);
+    o__namespace.useEffect(() => {
+      setPage((prev2) => Math.min(prev2, totalPages - 1));
     }, [totalPages]);
     const paginatedItems = hasItems ? items.slice(page * ITEMS_PER_PAGE, page * ITEMS_PER_PAGE + ITEMS_PER_PAGE) : [];
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1308,7 +2848,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "button",
               {
                 type: "button",
-                onClick: () => setPage((prev) => Math.max(0, prev - 1)),
+                onClick: () => setPage((prev2) => Math.max(0, prev2 - 1)),
                 disabled: page === 0,
                 className: cn(
                   "rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]",
@@ -1327,7 +2867,7 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
               "button",
               {
                 type: "button",
-                onClick: () => setPage((prev) => Math.min(totalPages - 1, prev + 1)),
+                onClick: () => setPage((prev2) => Math.min(totalPages - 1, prev2 + 1)),
                 disabled: page >= totalPages - 1,
                 className: cn(
                   "rounded-full border border-white/15 px-3 py-1 uppercase tracking-[0.2em]",
@@ -1343,18 +2883,17 @@ var PropertyNewsUpdates = React5__namespace.forwardRef(
   }
 );
 PropertyNewsUpdates.displayName = "PropertyNewsUpdates";
-var PropertyCompareBar = React5__namespace.forwardRef(
+var PropertyCompareBar = o__namespace.forwardRef(
   ({
     className,
     addresses,
     selectedAddressId,
     onSelectAddress,
-    compareLabel = "Compare",
-    onCompareClick,
-    compareIcon,
+    propertyValue,
+    propertyValueVariant = "classic",
     ...props
   }, ref) => {
-    const normalizedAddresses = React5__namespace.useMemo(() => {
+    const normalizedAddresses = o__namespace.useMemo(() => {
       return addresses.map(
         (option) => typeof option === "string" ? { id: option, label: option } : option
       );
@@ -1362,11 +2901,11 @@ var PropertyCompareBar = React5__namespace.forwardRef(
     const hasAddresses = normalizedAddresses.length > 0;
     const firstAddressId = normalizedAddresses[0]?.id;
     const isControlled = selectedAddressId !== void 0;
-    const [internalSelectedId, setInternalSelectedId] = React5__namespace.useState(
+    const [internalSelectedId, setInternalSelectedId] = o__namespace.useState(
       () => isControlled ? void 0 : firstAddressId
     );
     const resolvedSelectedId = isControlled ? selectedAddressId : internalSelectedId;
-    React5__namespace.useEffect(() => {
+    o__namespace.useEffect(() => {
       if (!isControlled) {
         setInternalSelectedId((current) => {
           if (current != null && normalizedAddresses.some((option) => option.id === current)) {
@@ -1377,9 +2916,9 @@ var PropertyCompareBar = React5__namespace.forwardRef(
       }
     }, [firstAddressId, isControlled, normalizedAddresses]);
     const selectedOption = normalizedAddresses.find((option) => option.id === resolvedSelectedId) ?? normalizedAddresses[0];
-    const [isDropdownOpen, setIsDropdownOpen] = React5__namespace.useState(false);
-    const dropdownRef = React5__namespace.useRef(null);
-    React5__namespace.useEffect(() => {
+    const [isDropdownOpen, setIsDropdownOpen] = o__namespace.useState(false);
+    const dropdownRef = o__namespace.useRef(null);
+    o__namespace.useEffect(() => {
       if (!isDropdownOpen) return;
       const handleClick = (event) => {
         if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
@@ -1398,7 +2937,6 @@ var PropertyCompareBar = React5__namespace.forwardRef(
         document.removeEventListener("keydown", handleKey);
       };
     }, [isDropdownOpen]);
-    const defaultCompareIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4h7v7H4V4zm0 9h7v7H4v-7zm9-9h7v7h-7V4zm0 9h7v7h-7v-7z" }) });
     const handleAddressSelect = (addressId) => {
       if (!isControlled) {
         setInternalSelectedId(addressId);
@@ -1406,81 +2944,206 @@ var PropertyCompareBar = React5__namespace.forwardRef(
       onSelectAddress?.(addressId);
       setIsDropdownOpen(false);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex w-full flex-col gap-3 border border-white/10 px-4 py-3 text-white shadow-[0_18px_40px_rgba(0,0,0,0.55)] md:flex-row md:items-center md:justify-between md:gap-4",
-          className
-        ),
-        style: { borderRadius: "16px" },
-        ...props,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-auto", ref: dropdownRef, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                disabled: !hasAddresses,
-                onClick: () => setIsDropdownOpen((prev) => !prev),
-                className: cn(
-                  "flex h-[42px] w-auto items-center gap-2 rounded-[12px] border border-transparent bg-transparent px-0 text-left text-[15px] font-semibold text-white transition hover:text-white/80 focus-visible:outline-none",
-                  !hasAddresses && "text-white/40"
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : hasAddresses ? "Select address" : "No addresses available" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-3 flex items-center text-white/60 transition-transform", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      width: "16",
-                      height: "16",
-                      viewBox: "0 0 24 24",
-                      fill: "currentColor",
-                      className: cn("transition-transform", isDropdownOpen && "rotate-180"),
-                      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5H7z" })
-                    }
-                  ) })
-                ]
-              }
-            ),
-            isDropdownOpen && hasAddresses ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-0 top-[calc(100%+8px)] z-20 w-full rounded-[12px] border border-white/10 py-1 shadow-[0_25px_55px_rgba(0,0,0,0.6)] bg-black", children: normalizedAddresses.map((option) => {
-              const active = option.id === resolvedSelectedId;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  type: "button",
-                  className: cn(
-                    "flex w-full items-center px-4 py-2 text-left text-[14px] text-white/80 transition hover:bg-white/5 hover:text-white",
-                    active && "text-white"
-                  ),
-                  onClick: () => handleAddressSelect(option.id),
-                  children: option.label
-                },
-                option.id
-              );
-            }) }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            Button,
+    const propertyValueLabel = propertyValue?.label ?? "Property Value";
+    const propertyValueCurrency = propertyValue?.currencySymbol ?? "$";
+    const propertyValueFormat = propertyValue?.formatOptions ?? {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2
+    };
+    const formattedPropertyValue = propertyValue == null ? null : `${propertyValueCurrency}${propertyValue.value.toLocaleString(
+      void 0,
+      propertyValueFormat
+    )}`;
+    const formattedPropertyChange = propertyValue?.change == null ? null : `${propertyValue.change >= 0 ? "+" : "-"}${propertyValueCurrency}${Math.abs(
+      propertyValue.change
+    ).toLocaleString(void 0, propertyValueFormat)}`;
+    propertyValue?.change == null ? void 0 : propertyValue.change >= 0 ? "text-[#0ecb81]" : "text-[#f6465d]";
+    return /* @__PURE__ */ jsxRuntime.jsxs(PropertySelectorContainer, { ref, className, $variant: propertyValueVariant, ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(PropertySelector, { ref: dropdownRef, onClick: () => hasAddresses && setIsDropdownOpen((prev2) => !prev2), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(PropertyAddress, { children: [
+          selectedOption ? selectedOption.label : hasAddresses ? "Select address" : "No addresses available",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
             {
-              variant: "accentOutline",
-              size: "sm",
-              className: "flex items-center justify-center gap-2 rounded-[10px] border-[var(--color-accent,#e6c87e)] bg-transparent px-4 py-2 text-[14px] font-semibold text-[var(--color-accent,#e6c87e)] transition hover:bg-[rgba(230,200,126,0.08)] md:ml-auto",
-              onClick: onCompareClick,
-              disabled: !hasAddresses,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base", children: compareIcon ?? defaultCompareIcon }),
-                compareLabel
-              ]
+              className: "dropdown-icon",
+              xmlns: "http://www.w3.org/2000/svg",
+              width: "20",
+              height: "20",
+              viewBox: "0 0 24 24",
+              fill: "currentColor",
+              style: { transform: isDropdownOpen ? "rotate(180deg)" : void 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5H7z" })
             }
           )
-        ]
-      }
-    );
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorDropdown, { $isOpen: isDropdownOpen && hasAddresses, children: normalizedAddresses.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          PropertySelectorOption,
+          {
+            onClick: (event) => {
+              event.stopPropagation();
+              handleAddressSelect(option.id);
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(PropertySelectorName, { children: option.label })
+          },
+          option.id
+        )) })
+      ] }),
+      formattedPropertyValue ? /* @__PURE__ */ jsxRuntime.jsxs(PropertyValueBlock, { $variant: propertyValueVariant, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PropertyValueLabel, { children: propertyValueLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx(PropertyValueAmount, { children: formattedPropertyValue }),
+        formattedPropertyChange ? /* @__PURE__ */ jsxRuntime.jsx(PropertyValueChange, { $isPositive: propertyValue?.change != null ? propertyValue.change >= 0 : void 0, children: formattedPropertyChange }) : null
+      ] }) : null
+    ] });
   }
 );
 PropertyCompareBar.displayName = "PropertyCompareBar";
+var PropertySelectorContainer = at.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  background-color: ${({ $variant }) => $variant === "pill" ? "#0f0f0f" : "rgba(30, 32, 38, 0.95)"};
+  border: ${({ $variant }) => $variant === "pill" ? "1px solid rgba(255, 255, 255, 0.15)" : "none"};
+  border-radius: 8px;
+  margin-bottom: 1.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  color: var(--color-text, #f8f9fa);
+  font-family: var(--font-family, "Inter", sans-serif);
+
+  @media (max-width: 1024px) {
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.75rem;
+  }
+
+  @media (max-width: 768px) {
+    border-radius: 0;
+    margin-top: 0;
+    padding-top: 0.5rem;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+  }
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+`;
+var PropertySelector = at.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem 0;
+  flex: 1;
+
+  &:hover {
+    .dropdown-icon {
+      transform: translateY(2px);
+    }
+  }
+`;
+var PropertyAddress = at.div`
+  font-size: 1.25rem;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: inherit;
+
+  svg {
+    transition: transform 0.2s;
+  }
+`;
+var PropertySelectorDropdown = at.div`
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  max-width: 400px;
+  background-color: var(--color-card, #1f232b);
+  border-radius: 8px;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  z-index: 100;
+  overflow: hidden;
+  display: ${(props) => props.$isOpen ? "block" : "none"};
+`;
+var PropertySelectorOption = at.div`
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  cursor: pointer;
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+`;
+var PropertySelectorName = at.div`
+  font-weight: 600;
+`;
+var PropertyValueBlock = at.div`
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 1rem;
+  white-space: nowrap;
+
+  ${({ $variant }) => $variant === "card" && rt`
+      margin-left: auto;
+      flex-direction: row;
+      align-items: center;
+      min-width: 220px;
+      border: none;
+      background: rgba(30, 32, 38, 0.95);
+      border-radius: 14px;
+      padding: 0.9rem 1.25rem;
+      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      gap: 0.85rem;
+      justify-content: flex-end;
+    `}
+
+  ${({ $variant }) => $variant === "pill" && rt`
+      margin-left: auto;
+      margin-right: 1rem;
+      background: #191919;
+      border-radius: 8px;
+      border: 1px solid rgba(255, 255, 255, 0.05);
+      padding: 0.5rem 1rem;
+      gap: 1rem;
+      align-items: center;
+    `}
+
+  @media (max-width: 768px) {
+    margin-left: 0;
+  }
+
+  @media (max-width: 600px) {
+    margin: 0;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+  }
+`;
+var PropertyValueLabel = at.span`
+  font-size: 0.7rem;
+  color: var(--color-text-secondary, rgba(255, 255, 255, 0.6));
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+`;
+var PropertyValueAmount = at.span`
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #fff;
+`;
+var PropertyValueChange = at.span`
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: ${(props) => props.$isPositive == null ? "var(--color-text-secondary, rgba(255, 255, 255, 0.6))" : props.$isPositive ? "var(--color-positive, #0ecb81)" : "var(--color-negative, #f6465d)"};
+`;
 var TABS = [
   { id: "portfolio", label: "Portfolio" },
   { id: "openOrders", label: "Open Orders" },
@@ -1575,9 +3238,9 @@ var formatPercent = (value, fractionDigits = 2) => {
   if (value == null || Number.isNaN(value)) return "\u2014";
   return `${value.toFixed(fractionDigits)}%`;
 };
-var YourOrders = React5__namespace.forwardRef(
+var YourOrders = o__namespace.forwardRef(
   ({ className, title = "Portfolio Holdings (Demo)", orders, renderOrderActions, ...props }, ref) => {
-    const [activeTab, setActiveTab] = React5__namespace.useState("portfolio");
+    const [activeTab, setActiveTab] = o__namespace.useState("portfolio");
     const hasOrders = Array.isArray(orders) && orders.length > 0;
     const renderPortfolio = () => {
       if (!hasOrders) {
@@ -1749,7 +3412,7 @@ var formatPrice = (value, currencySymbol) => {
     maximumFractionDigits: 2
   })}`;
 };
-var PriceChart = React5__namespace.forwardRef(
+var PriceChart = o__namespace.forwardRef(
   ({
     className,
     title = "Price Chart",
@@ -1763,24 +3426,24 @@ var PriceChart = React5__namespace.forwardRef(
     height = 301.52,
     ...props
   }, ref) => {
-    const containerRef = React5__namespace.useRef(null);
-    const chartRef = React5__namespace.useRef(null);
-    const seriesRef = React5__namespace.useRef(null);
-    const priceLineRef = React5__namespace.useRef(null);
-    const [hoveredRange, setHoveredRange] = React5__namespace.useState(null);
-    const resolvedPrice = React5__namespace.useMemo(() => {
+    const containerRef = o__namespace.useRef(null);
+    const chartRef = o__namespace.useRef(null);
+    const seriesRef = o__namespace.useRef(null);
+    const priceLineRef = o__namespace.useRef(null);
+    const [hoveredRange, setHoveredRange] = o__namespace.useState(null);
+    const resolvedPrice = o__namespace.useMemo(() => {
       if (price != null) return price;
       const last = data.at(-1);
       return last?.close;
     }, [data, price]);
-    const inferredChangePercent = React5__namespace.useMemo(() => {
+    const inferredChangePercent = o__namespace.useMemo(() => {
       if (changePercent != null) return changePercent;
       const first = data[0]?.open;
       const last = data.at(-1)?.close;
       if (first == null || last == null || first === 0) return void 0;
       return (last - first) / first * 100;
     }, [changePercent, data]);
-    React5__namespace.useEffect(() => {
+    o__namespace.useEffect(() => {
       const el = containerRef.current;
       if (!el) return;
       const chart = lightweightCharts.createChart(el, {
@@ -1823,7 +3486,7 @@ var PriceChart = React5__namespace.forwardRef(
         chart.remove();
       };
     }, []);
-    React5__namespace.useEffect(() => {
+    o__namespace.useEffect(() => {
       const chart = chartRef.current;
       const series = seriesRef.current;
       if (!chart || !series) return;
@@ -1875,9 +3538,9 @@ var PriceChart = React5__namespace.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(CardHeader, { className: "flex flex-row items-start justify-between gap-4 px-6 pb-2 pt-6", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx(CardTitle, { className: "m-0 text-[1.1rem] font-semibold text-white", children: title }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center gap-2", children: ranges.map((r) => {
-                const active = r === selectedRange;
-                const hovered = hoveredRange === r;
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-3 flex items-center gap-2", children: ranges.map((r2) => {
+                const active = r2 === selectedRange;
+                const hovered = hoveredRange === r2;
                 const style = {
                   ...btnBaseStyle,
                   ...hovered ? btnHoverStyle : null,
@@ -1887,16 +3550,16 @@ var PriceChart = React5__namespace.forwardRef(
                   "button",
                   {
                     type: "button",
-                    onClick: () => onRangeChange?.(r),
-                    onMouseEnter: () => setHoveredRange(r),
-                    onMouseLeave: () => setHoveredRange((prev) => prev === r ? null : prev),
+                    onClick: () => onRangeChange?.(r2),
+                    onMouseEnter: () => setHoveredRange(r2),
+                    onMouseLeave: () => setHoveredRange((prev2) => prev2 === r2 ? null : prev2),
                     style,
                     className: cn(
                       "rounded border px-3 py-1 text-[0.85rem] font-medium transition-all duration-200"
                     ),
-                    children: r
+                    children: r2
                   },
-                  r
+                  r2
                 );
               }) })
             ] }),
@@ -1929,7 +3592,7 @@ var formatPrice2 = (value, currencySymbol) => {
     maximumFractionDigits: 3
   })}`;
 };
-var PropertyHeroHeader = React5__namespace.forwardRef(
+var PropertyHeroHeader = o__namespace.forwardRef(
   ({
     className,
     imageUrl,
@@ -1950,14 +3613,39 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
     const isPositive = changePercent == null ? void 0 : changePercent >= 0;
     const accentColor = "#e6c87e";
     const tradeHoverColor = "#f5dd9a";
-    const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
-    const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
+    const [isTradeInteracting, setIsTradeInteracting] = o__namespace.useState(false);
+    const [isOfferInteracting, setIsOfferInteracting] = o__namespace.useState(false);
+    const headingStyle = {
+      fontSize: "2.5rem",
+      marginBottom: "0.5rem",
+      color: "#ffffff",
+      textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
+      fontWeight: 600,
+      lineHeight: 1.2
+    };
+    const priceBlockStyle = {
+      fontSize: "1.25rem",
+      fontWeight: 600,
+      color: "var(--color-accent, #f0b90b)",
+      marginLeft: "1rem",
+      paddingLeft: "1rem",
+      borderLeft: "1px solid rgba(255, 255, 255, 0.3)",
+      display: "flex",
+      alignItems: "center"
+    };
+    const locationStyle = {
+      fontSize: "1.25rem",
+      color: "rgba(255, 255, 255, 0.9)",
+      marginBottom: "0.75rem",
+      display: "flex",
+      alignItems: "center"
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         className: cn(
-          "relative w-full overflow-hidden bg-black h-[500px] rounded-[12px] max-[768px]:h-[400px] max-[768px]:rounded-lg max-[480px]:h-[350px] max-[480px]:rounded-md",
+          "relative w-[1200px] h-[500px] overflow-hidden bg-black rounded-[12px]",
           className
         ),
         ...props,
@@ -1967,50 +3655,45 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
             {
               src: imageUrl,
               alt: imageAlt ?? name,
-              className: "h-full w-full object-cover object-center block max-w-none min-w-[120%] min-h-[120%]",
-              style: { transform: "scale(1.0)", transformOrigin: "center" }
+              className: "absolute inset-0 block h-full w-full object-cover object-center",
+              style: { transform: "scale(1.20)", transformOrigin: "center" }
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 flex w-full items-end justify-between p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block w-auto max-w-[70%] rounded-lg bg-black/15 px-4 py-3 text-white shadow-[0px_1px_1px_rgba(0,0,0,0.3)] backdrop-blur-[3px] max-[768px]:w-full max-[768px]:max-w-full max-[768px]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mb-2 text-[2.5rem] leading-tight text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.3)] max-[768px]:mb-[0.4rem] max-[768px]:text-[2rem] max-[480px]:mb-[0.3rem] max-[480px]:text-[1.75rem]", children: name }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex flex-wrap items-center text-[1.25rem] text-white/90 max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: location }),
-                price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
-                  "span",
-                  {
-                    className: "ml-4 flex items-center border-l border-white/30 pl-4 font-semibold",
-                    style: { color: "var(--color-accent, #e6c87e)" },
-                    children: [
-                      formatPrice2(price, currencySymbol),
-                      changePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
-                        "span",
-                        {
-                          className: cn(
-                            "ml-2 flex items-center text-[0.875rem] font-medium",
-                            isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-block w-full rounded-lg bg-black/15 px-4 py-3 text-white shadow-[0px_1px_1px_rgba(0,0,0,0.3)] backdrop-blur-[3px] max-[768px]:w-full max-[768px]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2 min-[769px]:flex-1 min-[769px]:min-w-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, className: "break-words", children: name }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-3 flex flex-wrap items-center max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: locationStyle, children: location }),
+                  price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { style: priceBlockStyle, children: [
+                    formatPrice2(price, currencySymbol),
+                    changePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "ml-2 flex items-center text-[0.875rem] font-medium",
+                          isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "svg",
+                            {
+                              xmlns: "http://www.w3.org/2000/svg",
+                              width: "12",
+                              height: "12",
+                              viewBox: "0 0 24 24",
+                              fill: "currentColor",
+                              className: "mr-[0.15rem]",
+                              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
+                            }
                           ),
-                          children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              "svg",
-                              {
-                                xmlns: "http://www.w3.org/2000/svg",
-                                width: "12",
-                                height: "12",
-                                viewBox: "0 0 24 24",
-                                fill: "currentColor",
-                                className: "mr-[0.15rem]",
-                                children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
-                              }
-                            ),
-                            Math.abs(changePercent).toFixed(2),
-                            "%"
-                          ]
-                        }
-                      )
-                    ]
-                  }
-                )
+                          Math.abs(changePercent).toFixed(2),
+                          "%"
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
                 beds == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
@@ -2037,7 +3720,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
                 propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyTypeLabel })
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -2098,18 +3781,13 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
   }
 );
 PropertyHeroHeader.displayName = "PropertyHeroHeader";
-var PropertySubheader = React5__namespace.forwardRef(
+var PropertySubheader = o__namespace.forwardRef(
   ({ className, tabs, activeTabId, onTabChange, actions, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
-        className: cn(
-          "w-full font-normal",
-          "flex flex-col gap-3",
-          "md:flex-row md:items-center md:justify-between",
-          className
-        ),
+        className: cn("w-full font-normal flex flex-col gap-3 md:flex-row md:items-center md:justify-between", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -2125,7 +3803,7 @@ var PropertySubheader = React5__namespace.forwardRef(
                 "md:border-b-0"
               ),
               style: { WebkitTapHighlightColor: "transparent" },
-              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-max", children: tabs.map((tab) => {
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-max gap-2 lg:gap-4", children: tabs.map((tab) => {
                 const active = tab.id === activeTabId;
                 return /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
@@ -2134,12 +3812,13 @@ var PropertySubheader = React5__namespace.forwardRef(
                     onClick: () => onTabChange?.(tab.id),
                     className: cn(
                       "relative whitespace-nowrap",
-                      "px-6 py-4",
-                      "font-normal",
+                      "px-5 py-4 lg:px-6",
+                      "text-[16px]",
+                      "font-medium",
                       "transition-colors",
                       "max-[768px]:px-[1.2rem] max-[768px]:py-[0.8rem]",
-                      "max-[480px]:px-4 max-[480px]:py-[0.7rem] max-[480px]:text-[0.9rem]",
-                      active ? "font-semibold text-[var(--color-accent,#e6c87e)]" : "text-white/60 hover:text-white"
+                      "max-[480px]:px-4 max-[480px]:py-[0.7rem]",
+                      active ? "font-semibold text-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#f1d27a)]" : "text-white/65 hover:text-white"
                     ),
                     style: {
                       borderBottom: active ? "2px solid var(--color-accent, #e6c87e)" : "2px solid transparent",
@@ -2182,10 +3861,10 @@ var PropertySubheader = React5__namespace.forwardRef(
                   onClick: action.onClick,
                   className: cn(
                     "flex shrink-0 items-center gap-[5px] whitespace-nowrap",
-                    "rounded",
-                    "border border-white/10",
+                    "rounded-[6px]",
+                    "border border-white/15",
                     "bg-transparent",
-                    "px-3 py-1.5 text-[14px] font-normal",
+                    "px-3.5 py-1.5 text-[14px] font-medium",
                     "transition-all",
                     "max-[768px]:px-2.5 max-[768px]:py-[5px] max-[768px]:text-[13px]",
                     "hover:bg-white/5 hover:border-[var(--color-accent,#e6c87e)] hover:text-[var(--color-accent,#e6c87e)]"
@@ -2215,6 +3894,7 @@ exports.CardFooter = CardFooter;
 exports.CardHeader = CardHeader;
 exports.CardTitle = CardTitle;
 exports.HousePositionSlider = HousePositionSlider;
+exports.LoafLiquidityBadge = LoafLiquidityBadge;
 exports.Orderbook = Orderbook;
 exports.PortfolioSummary = PortfolioSummary;
 exports.PriceChart = PriceChart;