@landtrustinc/design-system 1.1.7 → 1.2.0

package/dist/index.js

@@ -31,7 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   AIResponse: () => AIResponse_default,
-  AvailabilityChip: () => AvailabilityChip_default,
+  AvailabilityBadge: () => AvailabilityBadge_default,
   Avatar: () => Avatar_default,
   Box: () => Box_default,
   Button: () => Button_default,
@@ -49,6 +49,7 @@ __export(src_exports, {
   HuntCard: () => HuntCard_default,
   Icon: () => Icon_default,
   IconLabel: () => IconLabel_default,
+  IconSizeMap: () => IconSizeMap,
   InfoBox: () => InfoBox_default,
   Input: () => Input,
   LayoutTokens: () => LayoutTokens,
@@ -57,6 +58,7 @@ __export(src_exports, {
   MessageBubble: () => MessageBubble_default,
   Navigation: () => Navigation_default,
   PackageCard: () => PackageCard_default,
+  PackageHeader: () => PackageHeader_default,
   ReviewCard: () => ReviewCard_default,
   Reviews: () => Reviews_default,
   ReviewsShowcase: () => ReviewsShowcase_default,
@@ -910,7 +912,13 @@ var Bear_default = SvgBear;
 
 // src/Icon/components/BedSolid.tsx
 var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
-var SvgBedSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 640 512", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { d: "M32 32c17.7 0 32 14.3 32 32v256h224V160c0-17.7 14.3-32 32-32h224c53 0 96 43 96 96v224c0 17.7-14.3 32-32 32s-32-14.3-32-32v-32H64v32c0 17.7-14.3 32-32 32S0 465.7 0 448V64c0-17.7 14.3-32 32-32m144 96a80 80 0 1 1 0 160 80 80 0 1 1 0-160" }) });
+var SvgBedSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M4 6c.553 0 1 .447 1 1v8h7v-5c0-.553.447-1 1-1h7a3 3 0 0 1 3 3v7a.999.999 0 1 1-2 0v-1H5v1a.999.999 0 1 1-2 0V7c0-.553.447-1 1-1m4.5 3a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"
+  }
+) });
 var BedSolid_default = SvgBedSolid;
 
 // src/Icon/components/Bell.tsx
@@ -1530,7 +1538,13 @@ var GameFeeder_default = SvgGameFeeder;
 
 // src/Icon/components/GridSolid.tsx
 var import_jsx_runtime73 = require("@emotion/react/jsx-runtime");
-var SvgGridSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M0 72c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40zm0 160c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40zm128 160v48c0 22.1-17.9 40-40 40H40c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40m32-320c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40h-48c-22.1 0-40-17.9-40-40zm128 160v48c0 22.1-17.9 40-40 40h-48c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40M160 392c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40h-48c-22.1 0-40-17.9-40-40zM448 72v48c0 22.1-17.9 40-40 40h-48c-22.1 0-40-17.9-40-40V72c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40M320 232c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40h-48c-22.1 0-40-17.9-40-40zm128 160v48c0 22.1-17.9 40-40 40h-48c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40h48c22.1 0 40 17.9 40 40" }) });
+var SvgGridSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M5 6.429C5 5.639 5.64 5 6.429 5h1.714c.79 0 1.428.64 1.428 1.429v1.714c0 .79-.639 1.428-1.428 1.428H6.429C5.639 9.571 5 8.932 5 8.143zm0 5.714c0-.79.64-1.429 1.429-1.429h1.714c.79 0 1.428.64 1.428 1.429v1.714c0 .79-.639 1.429-1.428 1.429H6.429c-.79 0-1.429-.64-1.429-1.429zm4.571 5.714v1.714c0 .79-.639 1.429-1.428 1.429H6.429C5.639 21 5 20.36 5 19.571v-1.714c0-.79.64-1.428 1.429-1.428h1.714c.79 0 1.428.639 1.428 1.428M10.714 6.43c0-.79.64-1.429 1.429-1.429h1.714c.79 0 1.429.64 1.429 1.429v1.714c0 .79-.64 1.428-1.429 1.428h-1.714c-.79 0-1.429-.639-1.429-1.428zm4.572 5.714v1.714c0 .79-.64 1.429-1.429 1.429h-1.714c-.79 0-1.429-.64-1.429-1.429v-1.714c0-.79.64-1.429 1.429-1.429h1.714c.79 0 1.429.64 1.429 1.429m-4.572 5.714c0-.79.64-1.428 1.429-1.428h1.714c.79 0 1.429.639 1.429 1.428v1.714c0 .79-.64 1.429-1.429 1.429h-1.714c-.79 0-1.429-.64-1.429-1.429zM21 6.43v1.714c0 .79-.64 1.428-1.429 1.428h-1.714c-.79 0-1.428-.639-1.428-1.428V6.429c0-.79.639-1.429 1.428-1.429h1.714C20.361 5 21 5.64 21 6.429m-4.571 5.714c0-.79.639-1.429 1.428-1.429h1.714c.79 0 1.429.64 1.429 1.429v1.714c0 .79-.64 1.429-1.429 1.429h-1.714c-.79 0-1.428-.64-1.428-1.429zM21 17.857v1.714c0 .79-.64 1.429-1.429 1.429h-1.714c-.79 0-1.428-.64-1.428-1.429v-1.714c0-.79.639-1.428 1.428-1.428h1.714c.79 0 1.429.639 1.429 1.428"
+  }
+) });
 var GridSolid_default = SvgGridSolid;
 
 // src/Icon/components/GrillHotSolid.tsx
@@ -1540,16 +1554,13 @@ var GrillHotSolid_default = SvgGrillHotSolid;
 
 // src/Icon/components/GroundBlind.tsx
 var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
-var SvgGroundBlind = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 39 39", ...props, children: [
-  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("path", { d: "M32.423 33H7.5V10.154L19.962 6l12.461 4.154z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-    "path",
-    {
-      fill: "currentColor",
-      d: "M10.615 22.615v-8.307l7.27 8.307zM29.308 22.615v-8.307l-7.27 8.307zM26.192 14.308H13.731l6.23 6.23z"
-    }
-  )
-] });
+var SvgGroundBlind = (props) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M21.615 6.77V22H5V6.77L13.308 4zM7.077 15.077h4.846L7.077 9.538zm7.615 0h4.846V9.538zM9.154 9.538l4.154 4.154 4.154-4.154z"
+  }
+) });
 var GroundBlind_default = SvgGroundBlind;
 
 // src/Icon/components/HandsUsd.tsx
@@ -1987,7 +1998,15 @@ var LocationCircle_default = SvgLocationCircle;
 
 // src/Icon/components/LocationDotSolid.tsx
 var import_jsx_runtime119 = require("@emotion/react/jsx-runtime");
-var SvgLocationDotSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("path", { d: "M215.7 499.2C267 435 384 279.4 384 192 384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2 12.3 15.3 35.1 15.3 47.4 0M192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128" }) });
+var SvgLocationDotSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime119.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    fillRule: "evenodd",
+    d: "M14.025 22.573c1.909-2.389 6.262-8.178 6.262-11.43C20.287 7.2 17.087 4 13.144 4A7.145 7.145 0 0 0 6 11.143c0 3.252 4.353 9.042 6.262 11.43.457.57 1.306.57 1.763 0m-.882-13.81a2.381 2.381 0 1 1 0 4.762 2.381 2.381 0 0 1 0-4.763",
+    clipRule: "evenodd"
+  }
+) });
 var LocationDotSolid_default = SvgLocationDotSolid;
 
 // src/Icon/components/MagnifyingGlass.tsx
@@ -2553,7 +2572,7 @@ var StarRegular_default = SvgStarRegular;
 
 // src/Icon/components/StarSolid.tsx
 var import_jsx_runtime167 = require("@emotion/react/jsx-runtime");
-var SvgStarSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 576 512", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("path", { d: "M316.9 18c-5.3-11-16.5-18-28.8-18s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329l-24.6 145.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329l104.2-103.1c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7l-143.7-21.2z" }) });
+var SvgStarSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("path", { d: "M13.781 4.474a.878.878 0 0 0-1.556 0L9.55 9.686l-5.813.918a.87.87 0 0 0-.483 1.471l4.158 4.14-.916 5.78a.87.87 0 0 0 .35.839c.265.191.614.22.908.072l5.25-2.653 5.245 2.653c.29.148.643.12.909-.072a.87.87 0 0 0 .349-.84l-.92-5.78 4.159-4.138a.868.868 0 0 0-.483-1.471l-5.81-.919z" }) });
 var StarSolid_default = SvgStarSolid;
 
 // src/Icon/components/StarSplash.tsx
@@ -2698,7 +2717,13 @@ var Users_default = SvgUsers;
 
 // src/Icon/components/UserSolid.tsx
 var import_jsx_runtime187 = require("@emotion/react/jsx-runtime");
-var SvgUserSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("path", { d: "M224 256a128 128 0 1 0 0-256 128 128 0 1 0 0 256m-45.7 48C79.8 304 0 383.8 0 482.3 0 498.7 13.3 512 29.7 512h388.6c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3z" }) });
+var SvgUserSolid = (props) => /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 26 26", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+  "path",
+  {
+    fill: "currentColor",
+    d: "M13.5 12.571a4.36 4.36 0 0 0 3.06-1.255 4.251 4.251 0 0 0 0-6.06 4.363 4.363 0 0 0-6.12 0 4.25 4.25 0 0 0 0 6.06c.402.398.88.714 1.404.93a4.4 4.4 0 0 0 1.656.325m-1.07 2c-3.553 0-6.43 2.85-6.43 6.368C6 21.525 6.48 22 7.07 22h12.86c.59 0 1.07-.475 1.07-1.06 0-3.519-2.877-6.369-6.43-6.369z"
+  }
+) });
 var UserSolid_default = SvgUserSolid;
 
 // src/Icon/components/UsFlag.tsx
@@ -2764,15 +2789,45 @@ var YoutubeSquare_default = SvgYoutubeSquare;
 
 // src/Icon/Icon.tsx
 var import_jsx_runtime195 = require("@emotion/react/jsx-runtime");
+var IconSizeMap = {
+  xsmall: {
+    width: 12,
+    height: 12
+  },
+  small: {
+    width: 16,
+    height: 16
+  },
+  medium: {
+    width: 20,
+    height: 20
+  },
+  large: {
+    width: 26,
+    height: 26
+  },
+  xlarge: {
+    width: 32,
+    height: 32
+  },
+  xxlarge: {
+    width: 48,
+    height: 48
+  },
+  xxxlarge: {
+    width: 64,
+    height: 64
+  }
+};
 var iconStyles = (size, setAutoHeight, fill) => import_react2.css`
-  width: ${space[size]};
-  height: ${space[size]};
+  width: ${IconSizeMap[size].width}px;
+  height: ${IconSizeMap[size].height}px;
   ${setAutoHeight && "height: auto;"}
   fill: ${fill != null ? fill : "currentColor"};
 `;
 var Icon = ({
   variant,
-  size = 6,
+  size = "medium",
   className,
   setAutoHeight = false,
   fill,
@@ -2810,7 +2865,7 @@ var spinnerStyles = import_react3.css`
 
 // src/Spinner/Spinner.tsx
 var import_jsx_runtime196 = require("@emotion/react/jsx-runtime");
-var Spinner = ({ size = 5, className, fill }) => {
+var Spinner = ({ size = "medium", className, fill }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
     Icon_default,
     {
@@ -3624,7 +3679,7 @@ var import_jsx_runtime201 = require("@emotion/react/jsx-runtime");
 var IconLabel = ({
   variant,
   label,
-  iconSize = 4,
+  iconSize = "small",
   className,
   ...rest
 }) => {
@@ -3737,7 +3792,7 @@ var AIResponse = ({
         {
           variant: "AiMagic",
           label: "This AI summary was generated from the property information from this package. This answer may display incorrect information.",
-          iconSize: 10
+          iconSize: "large"
         }
       ),
       variant === "error" && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("div", { css: errorRetryStyles, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Button_default, { variant: "secondary", size: "xs", onClick: onErrorRetry, children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(IconLabel_default, { variant: "ArrowRotateLeft", label: "Try Again" }) }) })
@@ -3783,9 +3838,9 @@ var AIResponse = ({
 };
 var AIResponse_default = AIResponse;
 
-// src/AvailabilityChip/AvailabilityChip.styles.ts
+// src/AvailabilityBadge/AvailabilityBadge.styles.ts
 var import_react12 = require("@emotion/react");
-var availabilityChipVariantStyles = {
+var availabilityBadgeVariantStyles = {
   primary: import_react12.css`
     background-color: var(--color-primary-100);
     color: var(--text-primary);
@@ -3808,9 +3863,9 @@ var availabilityChipVariantStyles = {
   `
 };
 
-// src/AvailabilityChip/AvailabilityChip.tsx
+// src/AvailabilityBadge/AvailabilityBadge.tsx
 var import_jsx_runtime203 = require("@emotion/react/jsx-runtime");
-var AvailabilityChip = ({
+var AvailabilityBadge = ({
   children,
   variant,
   className
@@ -3823,16 +3878,17 @@ var AvailabilityChip = ({
       px: "var(--spacing-4)",
       py: "var(--spacing-1)",
       borderRadius: "var(--spacing-2)",
-      css: availabilityChipVariantStyles[variant],
+      css: availabilityBadgeVariantStyles[variant],
       className,
       children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Text_default, { size: "xs", fontWeight: "bold", children })
     }
   );
 };
-var AvailabilityChip_default = AvailabilityChip;
+var AvailabilityBadge_default = AvailabilityBadge;
 
 // src/Avatar/Avatar.tsx
-var import_react14 = require("react");
+var import_react14 = require("@emotion/react");
+var import_react15 = require("react");
 
 // src/Avatar/Avatar.styles.ts
 var import_react13 = require("@emotion/react");
@@ -3895,7 +3951,7 @@ var Avatar = ({
   size = "md",
   className
 }) => {
-  const [hasImageError, setHasImageError] = (0, import_react14.useState)(false);
+  const [hasImageError, setHasImageError] = (0, import_react15.useState)(false);
   const handleImageError = () => {
     setHasImageError(true);
   };
@@ -3921,17 +3977,17 @@ var Avatar = ({
   const getIconSize = (size2) => {
     switch (size2) {
       case "xs":
-        return 3;
+        return "xsmall";
       case "sm":
-        return 4;
+        return "small";
       case "md":
-        return 8;
+        return "xlarge";
       case "lg":
-        return 10;
+        return "large";
       case "xl":
-        return 16;
+        return "xxxlarge";
       default:
-        return 8;
+        return "xlarge";
     }
   };
   if (type === "text" && text) {
@@ -3968,22 +4024,32 @@ var Avatar = ({
       css: [avatarFallbackStyles, avatarSizeStyles[size]],
       className,
       title: alt,
-      children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(Icon_default, { variant: "User", size: getIconSize(size) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+        Icon_default,
+        {
+          variant: "User",
+          size: getIconSize(size),
+          css: size === "lg" ? import_react14.css`
+                width: 28px;
+                height: 28px;
+              ` : void 0
+        }
+      )
     }
   );
 };
 var Avatar_default = Avatar;
 
 // src/ChatWidget/ChatWidget.tsx
-var import_react23 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 
 // src/Divider/Divider.tsx
 var import_styled4 = __toESM(require("@emotion/styled"));
 var import_styled_system2 = require("styled-system");
 
 // src/Divider/Divider.styles.ts
-var import_react15 = require("@emotion/react");
-var dividerStyles = import_react15.css`
+var import_react16 = require("@emotion/react");
+var dividerStyles = import_react16.css`
   width: 100%;
   height: 1px;
   border: 0;
@@ -4002,17 +4068,17 @@ var Divider = ({ className, ...rest }) => {
 var Divider_default = Divider;
 
 // src/Form/TextArea.tsx
-var import_react17 = require("@emotion/react");
-var import_react18 = require("react");
+var import_react18 = require("@emotion/react");
+var import_react19 = require("react");
 
 // src/Form/TextArea.styles.ts
-var import_react16 = require("@emotion/react");
-var wrapperStyles = import_react16.css`
+var import_react17 = require("@emotion/react");
+var wrapperStyles = import_react17.css`
   position: relative;
   display: inline-block;
   width: 100%;
 `;
-var textareaBase = import_react16.css`
+var textareaBase = import_react17.css`
   width: 100%;
   box-sizing: border-box;
   font: inherit;
@@ -4046,32 +4112,32 @@ var textareaBase = import_react16.css`
     cursor: default;
   }
 `;
-var variantError = import_react16.css`
+var variantError = import_react17.css`
   border-color: var(--border-error);
   &:focus {
     border-color: var(--border-error);
     box-shadow: 0 0 0 3px var(--color-error-100);
   }
 `;
-var variantSuccess = import_react16.css`
+var variantSuccess = import_react17.css`
   border-color: var(--color-success-500);
   &:focus {
     border-color: var(--color-success-500);
     box-shadow: 0 0 0 3px var(--color-success-100);
   }
 `;
-var submitButtonContainer = import_react16.css`
+var submitButtonContainer = import_react17.css`
   position: absolute;
   right: var(--spacing-4);
   bottom: var(--spacing-4);
 `;
-var textareaWithSubmit = import_react16.css`
+var textareaWithSubmit = import_react17.css`
   padding-right: var(--spacing-16);
 `;
 
 // src/Form/TextArea.tsx
 var import_jsx_runtime206 = require("@emotion/react/jsx-runtime");
-var TextArea = (0, import_react18.forwardRef)(
+var TextArea = (0, import_react19.forwardRef)(
   ({
     rows = 3,
     variant = "default",
@@ -4091,8 +4157,8 @@ var TextArea = (0, import_react18.forwardRef)(
     submitOnEnter = true,
     ...props
   }, ref) => {
-    const innerRef = (0, import_react18.useRef)(null);
-    (0, import_react18.useEffect)(() => {
+    const innerRef = (0, import_react19.useRef)(null);
+    (0, import_react19.useEffect)(() => {
       const el = innerRef.current;
       if (!el || !autoExpand)
         return;
@@ -4146,7 +4212,7 @@ var TextArea = (0, import_react18.forwardRef)(
             textareaBase,
             variant === "error" && variantError,
             variant === "success" && variantSuccess,
-            import_react17.css`
+            import_react18.css`
               resize: ${resize};
             `,
             showSubmit && textareaWithSubmit
@@ -4170,7 +4236,7 @@ var TextArea = (0, import_react18.forwardRef)(
             Icon_default,
             {
               variant: "PaperPlane",
-              size: 6,
+              size: "large",
               fill: "var(--color-base-white)"
             }
           )
@@ -4183,14 +4249,14 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/MessageBubble/MessageBubble.styles.ts
-var import_react19 = require("@emotion/react");
-var getRootStyles = (variant) => import_react19.css`
+var import_react20 = require("@emotion/react");
+var getRootStyles = (variant) => import_react20.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
   align-items: ${variant === "sent" ? "flex-end" : "flex-start"};
 `;
-var getBubbleStyles = (variant) => import_react19.css`
+var getBubbleStyles = (variant) => import_react20.css`
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
@@ -4207,7 +4273,7 @@ var getBubbleStyles = (variant) => import_react19.css`
   border-bottom-left-radius: ${variant === "sent" ? "var(--radius-lg)" : "0"};
   border-bottom-right-radius: ${variant === "sent" ? "0" : "var(--radius-lg)"};
 `;
-var contentStyles = import_react19.css`
+var contentStyles = import_react20.css`
   flex: 1 1 auto;
   min-width: 1px;
   min-height: 1px;
@@ -4237,11 +4303,11 @@ var MessageBubble = ({
 var MessageBubble_default = MessageBubble;
 
 // src/Widget/Widget.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 
 // src/Widget/Widget.styles.ts
-var import_react20 = require("@emotion/react");
-var panelContainer = import_react20.css`
+var import_react21 = require("@emotion/react");
+var panelContainer = import_react21.css`
   position: absolute;
   right: 0;
   bottom: 0;
@@ -4257,7 +4323,7 @@ var panelContainer = import_react20.css`
     justify-content: stretch;
   }
 `;
-var panelCard = (width2) => import_react20.css`
+var panelCard = (width2) => import_react21.css`
   background: var(--surface-page);
   color: var(--text-primary);
   border: 1px solid var(--border-primary);
@@ -4278,16 +4344,16 @@ var panelCard = (width2) => import_react20.css`
     overflow: auto;
   }
 `;
-var widgetTrigger = import_react20.css`
+var widgetTrigger = import_react21.css`
   margin: var(--spacing-1);
   box-shadow: var(--shadow-2xl);
 `;
 
 // src/Widget/Widget.tsx
 var import_jsx_runtime208 = require("@emotion/react/jsx-runtime");
-var WidgetContext = (0, import_react21.createContext)(null);
+var WidgetContext = (0, import_react22.createContext)(null);
 var useWidgetContext = () => {
-  const ctx = (0, import_react21.useContext)(WidgetContext);
+  const ctx = (0, import_react22.useContext)(WidgetContext);
   if (!ctx)
     throw new Error("Widget subcomponents must be used within <Widget>");
   return ctx;
@@ -4303,7 +4369,7 @@ var WidgetTrigger = () => {
       "aria-haspopup": "dialog",
       onClick: toggle,
       size: "lg",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Icon_default, { variant: currentIcon, size: 12 }),
+      icon: /* @__PURE__ */ (0, import_jsx_runtime208.jsx)(Icon_default, { variant: currentIcon, size: "xxlarge" }),
       css: widgetTrigger
     }
   ) });
@@ -4345,12 +4411,12 @@ var WidgetRoot = ({
   children,
   containerProps
 }) => {
-  const [internalExpanded, setInternalExpanded] = (0, import_react21.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react22.useState)(defaultExpanded);
   const isControlled = typeof expanded === "boolean";
   const isExpanded = isControlled ? expanded : internalExpanded;
-  const triggerRef = (0, import_react21.useRef)(null);
-  const containerRef = (0, import_react21.useRef)(null);
-  const setExpanded = (0, import_react21.useCallback)(
+  const triggerRef = (0, import_react22.useRef)(null);
+  const containerRef = (0, import_react22.useRef)(null);
+  const setExpanded = (0, import_react22.useCallback)(
     (next) => {
       if (!isControlled)
         setInternalExpanded(next);
@@ -4364,11 +4430,11 @@ var WidgetRoot = ({
     },
     [isControlled, onExpandedChange]
   );
-  const toggle = (0, import_react21.useCallback)(
+  const toggle = (0, import_react22.useCallback)(
     () => setExpanded(!isExpanded),
     [isExpanded, setExpanded]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isExpanded)
       return;
     const onDocClick = (e) => {
@@ -4382,7 +4448,7 @@ var WidgetRoot = ({
     document.addEventListener("mousedown", onDocClick);
     return () => document.removeEventListener("mousedown", onDocClick);
   }, [isExpanded, setExpanded]);
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isExpanded)
       return;
     const onKey = (e) => {
@@ -4392,7 +4458,7 @@ var WidgetRoot = ({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [isExpanded, setExpanded]);
-  const value = (0, import_react21.useMemo)(
+  const value = (0, import_react22.useMemo)(
     () => ({
       expanded: isExpanded,
       toggle,
@@ -4425,8 +4491,8 @@ var Widget = Object.assign(WidgetRoot, {
 var Widget_default = Widget;
 
 // src/ChatWidget/ChatWidget.styles.ts
-var import_react22 = require("@emotion/react");
-var sentWrapperStyles = import_react22.css`
+var import_react23 = require("@emotion/react");
+var sentWrapperStyles = import_react23.css`
   align-self: flex-end;
   max-width: 90%;
   width: 100%;
@@ -4434,14 +4500,14 @@ var sentWrapperStyles = import_react22.css`
   overflow-wrap: anywhere;
   padding-top: var(--spacing-4);
 `;
-var receivedWrapperStyles = import_react22.css`
+var receivedWrapperStyles = import_react23.css`
   align-self: flex-start;
   width: 100%;
   min-width: 0;
   overflow-wrap: anywhere;
   padding-top: var(--spacing-4);
 `;
-var containerStyles = import_react22.css`
+var containerStyles = import_react23.css`
   display: flex;
   flex-direction: column;
   min-height: 0;
@@ -4451,13 +4517,13 @@ var containerStyles = import_react22.css`
     height: 100%;
   }
 `;
-var thinkingRowStyles = import_react22.css`
+var thinkingRowStyles = import_react23.css`
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
   color: var(--text-primary);
 `;
-var thinkingTextStyles = import_react22.css`
+var thinkingTextStyles = import_react23.css`
   animation: ltchat-pulse 1.6s ease-in-out infinite;
 
   @keyframes ltchat-pulse {
@@ -4470,7 +4536,7 @@ var thinkingTextStyles = import_react22.css`
     }
   }
 `;
-var badge = import_react22.css`
+var badge = import_react23.css`
   width: var(--spacing-11);
   height: var(--spacing-11);
   border-radius: var(--radius-round);
@@ -4480,7 +4546,7 @@ var badge = import_react22.css`
   background-color: var(--color-primary-500);
   color: var(--color-base-white);
 `;
-var closeButtonContent = import_react22.css`
+var closeButtonContent = import_react23.css`
   display: inline-flex;
   align-items: center;
   gap: var(--spacing-2);
@@ -4516,12 +4582,12 @@ var ChatWidget = ({
   emptyState = DEFAULT_EMPTY_STATE,
   containerProps
 }) => {
-  const [value, setValue] = (0, import_react23.useState)("");
-  const scrollRef = (0, import_react23.useRef)(null);
+  const [value, setValue] = (0, import_react24.useState)("");
+  const scrollRef = (0, import_react24.useRef)(null);
   const isControlled = typeof expanded === "boolean";
-  const [internalExpanded, setInternalExpanded] = (0, import_react23.useState)(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = (0, import_react24.useState)(defaultExpanded);
   const isExpanded = isControlled ? expanded : internalExpanded;
-  const setExpanded = (0, import_react23.useCallback)(
+  const setExpanded = (0, import_react24.useCallback)(
     (next) => {
       if (!isControlled)
         setInternalExpanded(next);
@@ -4529,14 +4595,14 @@ var ChatWidget = ({
     },
     [isControlled, onExpandedChange]
   );
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const el = scrollRef.current;
     if (!el)
       return;
     el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
   }, [messages, isThinking]);
   const messagesToRender = messages.length === 0 ? emptyState : messages;
-  const renderedMessages = (0, import_react23.useMemo)(
+  const renderedMessages = (0, import_react24.useMemo)(
     () => messagesToRender.map((element, index) => {
       var _a;
       const key = (_a = element.key) != null ? _a : index;
@@ -4546,7 +4612,7 @@ var ChatWidget = ({
       if (element.type === MessageBubble_default) {
         return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Box_default, { css: sentWrapperStyles, children: element }, key);
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react23.default.Fragment, { children: element }, key);
+      return /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(import_react24.default.Fragment, { children: element }, key);
     }),
     [messagesToRender]
   );
@@ -4580,7 +4646,7 @@ var ChatWidget = ({
                 gap: "var(--spacing-4)",
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-4)", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { css: badge, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon_default, { variant: "ConversationalSearchAi", size: 6 }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { css: badge, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon_default, { variant: "ConversationalSearchAi", size: "large" }) }),
                     /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(
                       Heading_default,
                       {
@@ -4599,7 +4665,7 @@ var ChatWidget = ({
                       "aria-label": "Close widget",
                       onClick: () => setExpanded(false),
                       children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("span", { css: closeButtonContent, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon_default, { variant: "Xmark", size: 5 }),
+                        /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Icon_default, { variant: "Xmark", size: "medium" }),
                         /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { children: "Close" })
                       ] })
                     }
@@ -4624,7 +4690,7 @@ var ChatWidget = ({
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: renderedMessages }),
                 isThinking && /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Box_default, { css: receivedWrapperStyles, children: /* @__PURE__ */ (0, import_jsx_runtime209.jsxs)("div", { css: thinkingRowStyles, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Spinner_default2, { size: 5 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime209.jsx)(Spinner_default2, { size: "medium" }),
                   /* @__PURE__ */ (0, import_jsx_runtime209.jsx)("span", { css: thinkingTextStyles, children: "Thinking..." })
                 ] }) })
               ]
@@ -4655,10 +4721,11 @@ var ChatWidget_default = ChatWidget;
 // src/FeatureList/components/FeatureListItem.tsx
 var import_jsx_runtime210 = require("@emotion/react/jsx-runtime");
 var FeatureListItem = ({
-  variant,
+  iconVariant,
   label,
   subtitle,
-  iconSize = 5,
+  iconSize = "large",
+  iconColor,
   className,
   ...rest
 }) => {
@@ -4668,17 +4735,17 @@ var FeatureListItem = ({
       {
         display: "flex",
         alignItems: "center",
-        gap: "var(--spacing-3)",
+        gap: "var(--spacing-2)",
         className,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Icon_default, { variant, size: iconSize }),
+          /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Icon_default, { variant: iconVariant, size: iconSize, fill: iconColor }),
           /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Text_default, { fontWeight: "semibold", children: label })
         ]
       }
     ),
-    subtitle && /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Box_default, { width: "24px" }),
+    subtitle && /* @__PURE__ */ (0, import_jsx_runtime210.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-3)", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Box_default, { width: "var(--spacing-6)", children: "\xA0" }),
       /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(Text_default, { size: "sm", children: subtitle })
     ] })
   ] });
@@ -4697,7 +4764,7 @@ var FeatureList = ({ heading, items, className }) => {
       className,
       children: [
         heading && /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Text_default, { fontWeight: "bold", children: heading }),
-        /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(FeatureListItem_default, { ...item }, `${item.variant}-${index}`)) })
+        /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-2)", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(FeatureListItem_default, { ...item }, `${item.iconVariant}-${index}`)) })
       ]
     }
   );
@@ -4705,8 +4772,8 @@ var FeatureList = ({ heading, items, className }) => {
 var FeatureList_default = FeatureList;
 
 // src/FieldNoteCard/FieldNoteCard.styles.ts
-var import_react24 = require("@emotion/react");
-var cardContainerStyles = import_react24.css`
+var import_react25 = require("@emotion/react");
+var cardContainerStyles = import_react25.css`
   position: relative;
   height: 335px;
 
@@ -4714,12 +4781,12 @@ var cardContainerStyles = import_react24.css`
     height: 480px;
   }
 `;
-var cardContentStyles = import_react24.css`
+var cardContentStyles = import_react25.css`
   position: relative;
   border-radius: var(--spacing-4);
   overflow: hidden;
 `;
-var getBackgroundWithGradient = (imageUrl) => import_react24.css`
+var getBackgroundWithGradient = (imageUrl) => import_react25.css`
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 48.36%,
@@ -4769,14 +4836,14 @@ var FieldNoteCard = ({
 var FieldNoteCard_default = FieldNoteCard;
 
 // src/Form/FormField.tsx
-var import_react25 = require("@emotion/react");
+var import_react26 = require("@emotion/react");
 var import_jsx_runtime213 = require("@emotion/react/jsx-runtime");
-var fieldContainerStyles = import_react25.css`
+var fieldContainerStyles = import_react26.css`
   display: flex;
   flex-direction: column;
   gap: ${space["2"]};
 `;
-var labelStyles2 = import_react25.css`
+var labelStyles2 = import_react26.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   font-weight: ${fontWeights.medium};
@@ -4784,17 +4851,17 @@ var labelStyles2 = import_react25.css`
   color: ${colors.gray["900"]};
   margin-bottom: ${space["1"]};
 `;
-var requiredIndicatorStyles = import_react25.css`
+var requiredIndicatorStyles = import_react26.css`
   color: ${colors.red["500"]};
   margin-left: ${space["1"]};
 `;
-var helpTextStyles = import_react25.css`
+var helpTextStyles = import_react26.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
   color: ${colors.gray["600"]};
 `;
-var errorTextStyles = import_react25.css`
+var errorTextStyles = import_react26.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
@@ -4803,7 +4870,7 @@ var errorTextStyles = import_react25.css`
   align-items: center;
   gap: ${space["1"]};
 `;
-var successTextStyles = import_react25.css`
+var successTextStyles = import_react26.css`
   font-family: ${fonts.base};
   font-size: ${fontSizes.sm};
   line-height: ${lineHeights.tight};
@@ -4812,7 +4879,7 @@ var successTextStyles = import_react25.css`
   align-items: center;
   gap: ${space["1"]};
 `;
-var visuallyHiddenStyles = import_react25.css`
+var visuallyHiddenStyles = import_react26.css`
   position: absolute;
   width: 1px;
   height: 1px;
@@ -4877,10 +4944,10 @@ var FormField = ({
 };
 
 // src/Form/Input.tsx
-var import_react26 = require("@emotion/react");
-var import_react27 = require("react");
+var import_react27 = require("@emotion/react");
+var import_react28 = require("react");
 var import_jsx_runtime214 = require("@emotion/react/jsx-runtime");
-var inputStyles = import_react26.css`
+var inputStyles = import_react27.css`
   position: relative;
   width: 100%;
   font-family: ${fonts.base};
@@ -4917,19 +4984,19 @@ var inputStyles = import_react26.css`
   }
 `;
 var sizeStyles = {
-  sm: import_react26.css`
+  sm: import_react27.css`
     padding: ${space["2"]} ${space["3"]};
     font-size: ${fontSizes.sm};
     line-height: ${lineHeights.tight};
     height: ${space["8"]};
   `,
-  md: import_react26.css`
+  md: import_react27.css`
     padding: ${space["3"]} ${space["4"]};
     font-size: ${fontSizes.base};
     line-height: ${lineHeights.normal};
     height: ${space["10"]};
   `,
-  lg: import_react26.css`
+  lg: import_react27.css`
     padding: ${space["4"]} ${space["5"]};
     font-size: ${fontSizes.lg};
     line-height: ${lineHeights.normal};
@@ -4937,8 +5004,8 @@ var sizeStyles = {
   `
 };
 var variantStyles = {
-  default: import_react26.css``,
-  error: import_react26.css`
+  default: import_react27.css``,
+  error: import_react27.css`
     border-color: ${colors.red["500"]};
 
     &:focus {
@@ -4946,7 +5013,7 @@ var variantStyles = {
       box-shadow: 0 0 0 3px ${colors.red["100"]};
     }
   `,
-  success: import_react26.css`
+  success: import_react27.css`
     border-color: ${colors.accent.green};
 
     &:focus {
@@ -4955,7 +5022,7 @@ var variantStyles = {
     }
   `
 };
-var inputWithIconStyles = import_react26.css`
+var inputWithIconStyles = import_react27.css`
   padding-left: ${space["10"]};
 
   &.has-end-icon {
@@ -4966,7 +5033,7 @@ var inputWithIconStyles = import_react26.css`
     padding-left: ${space["10"]};
   }
 `;
-var iconContainerStyles = import_react26.css`
+var iconContainerStyles = import_react27.css`
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -4977,20 +5044,20 @@ var iconContainerStyles = import_react26.css`
   pointer-events: none;
   z-index: 1;
 `;
-var startIconStyles = import_react26.css`
+var startIconStyles = import_react27.css`
   ${iconContainerStyles}
   left: ${space["3"]};
 `;
-var endIconStyles = import_react26.css`
+var endIconStyles = import_react27.css`
   ${iconContainerStyles}
   right: ${space["3"]};
 `;
-var inputWrapperStyles = import_react26.css`
+var inputWrapperStyles = import_react27.css`
   position: relative;
   display: inline-block;
   width: 100%;
 `;
-var Input = (0, import_react27.forwardRef)(
+var Input = (0, import_react28.forwardRef)(
   ({
     size = "md",
     variant = "default",
@@ -5035,10 +5102,10 @@ var Input = (0, import_react27.forwardRef)(
 Input.displayName = "Input";
 
 // src/Form/Select.tsx
-var import_react28 = require("@emotion/react");
-var import_react29 = require("react");
+var import_react29 = require("@emotion/react");
+var import_react30 = require("react");
 var import_jsx_runtime215 = require("@emotion/react/jsx-runtime");
-var selectStyles = import_react28.css`
+var selectStyles = import_react29.css`
   position: relative;
   width: 100%;
   font-family: ${fonts.base};
@@ -5077,19 +5144,19 @@ var selectStyles = import_react28.css`
   }
 `;
 var sizeStyles2 = {
-  sm: import_react28.css`
+  sm: import_react29.css`
     padding: ${space["2"]} ${space["3"]};
     font-size: ${fontSizes.sm};
     line-height: ${lineHeights.tight};
     height: ${space["8"]};
   `,
-  md: import_react28.css`
+  md: import_react29.css`
     padding: ${space["3"]} ${space["4"]};
     font-size: ${fontSizes.base};
     line-height: ${lineHeights.normal};
     height: ${space["10"]};
   `,
-  lg: import_react28.css`
+  lg: import_react29.css`
     padding: ${space["4"]} ${space["5"]};
     font-size: ${fontSizes.lg};
     line-height: ${lineHeights.normal};
@@ -5097,8 +5164,8 @@ var sizeStyles2 = {
   `
 };
 var variantStyles2 = {
-  default: import_react28.css``,
-  error: import_react28.css`
+  default: import_react29.css``,
+  error: import_react29.css`
     border-color: ${colors.red["500"]};
 
     &:focus {
@@ -5106,7 +5173,7 @@ var variantStyles2 = {
       box-shadow: 0 0 0 3px ${colors.red["100"]};
     }
   `,
-  success: import_react28.css`
+  success: import_react29.css`
     border-color: ${colors.accent.green};
 
     &:focus {
@@ -5115,7 +5182,7 @@ var variantStyles2 = {
     }
   `
 };
-var optionStyles = import_react28.css`
+var optionStyles = import_react29.css`
   background-color: ${colors.light["100"]};
   color: ${colors.gray["900"]};
 
@@ -5124,7 +5191,7 @@ var optionStyles = import_react28.css`
     background-color: ${colors.gray["100"]};
   }
 `;
-var Select = (0, import_react29.forwardRef)(
+var Select = (0, import_react30.forwardRef)(
   ({
     size = "md",
     variant = "default",
@@ -5162,10 +5229,10 @@ var Select = (0, import_react29.forwardRef)(
 Select.displayName = "Select";
 
 // src/Grid/Column.tsx
-var import_react31 = require("@emotion/react");
+var import_react32 = require("@emotion/react");
 
 // src/Grid/utils.ts
-var import_react30 = require("@emotion/react");
+var import_react31 = require("@emotion/react");
 var LayoutTokens = {
   containers: {
     sm: screens.sm,
@@ -5205,11 +5272,11 @@ var getResponsiveValue = (value) => {
 var generateGridColumns = (columns) => {
   const baseColumns = getResponsiveValue(columns);
   if (typeof columns === "number") {
-    return import_react30.css`
+    return import_react31.css`
       grid-template-columns: repeat(${columns}, 1fr);
     `;
   }
-  return import_react30.css`
+  return import_react31.css`
     grid-template-columns: repeat(${baseColumns}, 1fr);
 
     ${media.sm} {
@@ -5241,11 +5308,11 @@ var generateGridColumns = (columns) => {
 var generateGapStyles = (gap2) => {
   const baseGap = getResponsiveValue(gap2);
   if (typeof gap2 === "string" || typeof gap2 === "number") {
-    return import_react30.css`
+    return import_react31.css`
       gap: ${space[gap2]};
     `;
   }
-  return import_react30.css`
+  return import_react31.css`
     gap: ${space[baseGap]};
 
     ${media.sm} {
@@ -5268,11 +5335,11 @@ var generateGapStyles = (gap2) => {
 var generateRowGapStyles = (rowGap) => {
   const baseRowGap = getResponsiveValue(rowGap);
   if (typeof rowGap === "string" || typeof rowGap === "number") {
-    return import_react30.css`
+    return import_react31.css`
       row-gap: ${space[rowGap]};
     `;
   }
-  return import_react30.css`
+  return import_react31.css`
     row-gap: ${space[baseRowGap]};
 
     ${media.sm} {
@@ -5295,11 +5362,11 @@ var generateRowGapStyles = (rowGap) => {
 var generateColumnGapStyles = (columnGap) => {
   const baseColumnGap = getResponsiveValue(columnGap);
   if (typeof columnGap === "string" || typeof columnGap === "number") {
-    return import_react30.css`
+    return import_react31.css`
       column-gap: ${space[columnGap]};
     `;
   }
-  return import_react30.css`
+  return import_react31.css`
     column-gap: ${space[baseColumnGap]};
 
     ${media.sm} {
@@ -5322,11 +5389,11 @@ var generateColumnGapStyles = (columnGap) => {
 var generateColumnSpan = (span) => {
   const baseSpan = getResponsiveValue(span);
   if (typeof span === "string" || typeof span === "number") {
-    return import_react30.css`
+    return import_react31.css`
       grid-column: ${span === "auto" ? "auto" : `span ${span}`};
     `;
   }
-  return import_react30.css`
+  return import_react31.css`
     grid-column: ${baseSpan === "auto" ? "auto" : `span ${baseSpan}`};
 
     ${media.sm} {
@@ -5349,11 +5416,11 @@ var generateColumnSpan = (span) => {
 var generateAlignItems = (alignItems) => {
   const baseAlign = getResponsiveValue(alignItems);
   if (typeof alignItems === "string") {
-    return import_react30.css`
+    return import_react31.css`
       align-items: ${alignItems};
     `;
   }
-  return import_react30.css`
+  return import_react31.css`
     align-items: ${baseAlign};
 
     ${media.sm} {
@@ -5376,11 +5443,11 @@ var generateAlignItems = (alignItems) => {
 var generateJustifyItems = (justifyItems) => {
   const baseJustify = getResponsiveValue(justifyItems);
   if (typeof justifyItems === "string") {
-    return import_react30.css`
+    return import_react31.css`
       justify-items: ${justifyItems};
     `;
   }
-  return import_react30.css`
+  return import_react31.css`
     justify-items: ${baseJustify};
 
     ${media.sm} {
@@ -5415,19 +5482,19 @@ var Column = ({
 }) => {
   const columnStyles = [
     span && generateColumnSpan(span),
-    start && import_react31.css`
+    start && import_react32.css`
         grid-column-start: ${start};
       `,
-    end && import_react31.css`
+    end && import_react32.css`
         grid-column-end: ${end};
       `,
-    row && import_react31.css`
+    row && import_react32.css`
         grid-row: ${row};
       `,
-    rowSpan && import_react31.css`
+    rowSpan && import_react32.css`
         grid-row: span ${rowSpan};
       `,
-    area && import_react31.css`
+    area && import_react32.css`
         grid-area: ${area};
       `
   ].filter(Boolean);
@@ -5436,9 +5503,9 @@ var Column = ({
 var Column_default = Column;
 
 // src/Grid/Grid.tsx
-var import_react32 = require("@emotion/react");
+var import_react33 = require("@emotion/react");
 var import_jsx_runtime217 = require("@emotion/react/jsx-runtime");
-var baseGridStyles = import_react32.css`
+var baseGridStyles = import_react33.css`
   display: grid;
 `;
 var Grid = ({
@@ -5463,16 +5530,16 @@ var Grid = ({
     columnGap && generateColumnGapStyles(columnGap),
     alignItems && generateAlignItems(alignItems),
     justifyItems && generateJustifyItems(justifyItems),
-    autoRows && import_react32.css`
+    autoRows && import_react33.css`
         grid-auto-rows: ${autoRows};
       `,
-    autoColumns && import_react32.css`
+    autoColumns && import_react33.css`
         grid-auto-columns: ${autoColumns};
       `,
-    templateAreas && import_react32.css`
+    templateAreas && import_react33.css`
         grid-template-areas: ${typeof templateAreas === "string" ? templateAreas : templateAreas._};
       `,
-    justifyContent && import_react32.css`
+    justifyContent && import_react33.css`
         justify-content: ${typeof justifyContent === "string" ? justifyContent : justifyContent._};
       `
   ].filter(Boolean);
@@ -5481,9 +5548,9 @@ var Grid = ({
 var Grid_default = Grid;
 
 // src/Grid/GridContainer.tsx
-var import_react33 = require("@emotion/react");
+var import_react34 = require("@emotion/react");
 var import_jsx_runtime218 = require("@emotion/react/jsx-runtime");
-var baseContainerStyles = import_react33.css`
+var baseContainerStyles = import_react34.css`
   width: 100%;
   margin: 0 auto;
   padding-left: 1rem;
@@ -5491,14 +5558,14 @@ var baseContainerStyles = import_react33.css`
 `;
 var generateMaxWidthStyles = (maxWidth) => {
   if (maxWidth === "full") {
-    return import_react33.css`
+    return import_react34.css`
       max-width: 100%;
       padding-left: 0;
       padding-right: 0;
     `;
   }
   const width2 = LayoutTokens.containers[maxWidth] || maxWidth;
-  return import_react33.css`
+  return import_react34.css`
     max-width: ${width2};
 
     ${media.sm} {
@@ -5532,8 +5599,8 @@ var GridContainer = ({
 var GridContainer_default = GridContainer;
 
 // src/HuntCard/HuntCard.styles.ts
-var import_react34 = require("@emotion/react");
-var cardContainerStyles2 = import_react34.css`
+var import_react35 = require("@emotion/react");
+var cardContainerStyles2 = import_react35.css`
   position: relative;
   height: 335px;
 
@@ -5541,12 +5608,12 @@ var cardContainerStyles2 = import_react34.css`
     height: 480px;
   }
 `;
-var cardContentStyles2 = import_react34.css`
+var cardContentStyles2 = import_react35.css`
   position: relative;
   border-radius: var(--spacing-4);
   overflow: hidden;
 `;
-var getBackgroundWithGradient2 = (imageUrl) => import_react34.css`
+var getBackgroundWithGradient2 = (imageUrl) => import_react35.css`
   background-image: linear-gradient(
       180deg,
       rgba(0, 0, 0, 0) 48.36%,
@@ -5605,8 +5672,9 @@ var InfoBox = ({ heading, features, className }) => {
       flexDirection: "column",
       gap: "var(--spacing-3)",
       className,
+      color: "var(--text-primary)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Text_default, { fontWeight: "bold", children: heading }),
+        /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", children: heading }),
         /* @__PURE__ */ (0, import_jsx_runtime220.jsx)(
           Box_default,
           {
@@ -5634,27 +5702,27 @@ var InfoBox = ({ heading, features, className }) => {
 var InfoBox_default = InfoBox;
 
 // src/ListingChat/ListingChat.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/TagChip/TagChip.styles.ts
-var import_react35 = require("@emotion/react");
+var import_react36 = require("@emotion/react");
 var tagChipVariantStyles = {
-  primary: import_react35.css`
+  primary: import_react36.css`
     background-color: var(--surface-disabled);
     border: 1px solid var(--surface-disabled);
     color: var(--text-primary);
   `,
-  error: import_react35.css`
+  error: import_react36.css`
     background-color: var(--surface-error);
     border: 1px solid var(--color-red-300);
     color: var(--text-error);
   `,
-  success: import_react35.css`
+  success: import_react36.css`
     background-color: var(--surface-success);
     border: 1px solid var(--color-green-300);
     color: var(--text-success);
   `,
-  warning: import_react35.css`
+  warning: import_react36.css`
     background-color: var(--surface-subtle);
     border: 1px solid var(--color-brown-200);
     color: var(--text-primary);
@@ -5687,8 +5755,8 @@ var TagChip = ({
 var TagChip_default = TagChip;
 
 // src/ListingChat/ListingChat.styles.ts
-var import_react36 = require("@emotion/react");
-var containerStyles2 = import_react36.css`
+var import_react37 = require("@emotion/react");
+var containerStyles2 = import_react37.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
@@ -5696,13 +5764,13 @@ var containerStyles2 = import_react36.css`
   border-radius: var(--radius-lg);
   background: var(--surface-success);
 `;
-var headerStyles = import_react36.css`
+var headerStyles = import_react37.css`
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: var(--spacing-2);
 `;
-var chipsContainerStyles = import_react36.css`
+var chipsContainerStyles = import_react37.css`
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-4);
@@ -5715,10 +5783,10 @@ var chipsContainerStyles = import_react36.css`
     cursor: pointer;
   }
 `;
-var textAreaStyles = import_react36.css`
+var textAreaStyles = import_react37.css`
   min-height: 62px;
 `;
-var inputWrapperStyles2 = import_react36.css`
+var inputWrapperStyles2 = import_react37.css`
   position: relative;
 `;
 
@@ -5733,15 +5801,15 @@ var ListingChat = ({
   disabled = false,
   ...rest
 }) => {
-  const [value, setValue] = (0, import_react37.useState)("");
-  const handleSubmit = (0, import_react37.useCallback)(() => {
+  const [value, setValue] = (0, import_react38.useState)("");
+  const handleSubmit = (0, import_react38.useCallback)(() => {
     const trimmed = value.trim();
     if (!trimmed)
       return;
     onSubmit(trimmed);
     setValue("");
   }, [onSubmit, value]);
-  const handleTagClick = (0, import_react37.useCallback)(
+  const handleTagClick = (0, import_react38.useCallback)(
     (tag) => () => {
       const trimmed = tag.trim();
       if (!trimmed)
@@ -5757,7 +5825,7 @@ var ListingChat = ({
         /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Text_default, { size: "md", children: "Get instant answers with Buck, our AI powered assistant." })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime222.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-1)", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Icon_default, { variant: "AiMagic", size: 5 }),
+        /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Icon_default, { variant: "AiMagic", size: "medium" }),
         /* @__PURE__ */ (0, import_jsx_runtime222.jsx)(Text_default, { size: "sm", children: "Beta" })
       ] })
     ] }),
@@ -5793,7 +5861,7 @@ var ListingChat = ({
 var ListingChat_default = ListingChat;
 
 // src/Logo/Logo.tsx
-var import_react38 = require("@emotion/react");
+var import_react39 = require("@emotion/react");
 
 // src/Logo/components/LandtrustPlusDark.tsx
 var import_jsx_runtime223 = require("@emotion/react/jsx-runtime");
@@ -6015,7 +6083,7 @@ var LandtrustStandardLight_default = SvgLandtrustStandardLight;
 
 // src/Logo/Logo.tsx
 var import_jsx_runtime227 = require("@emotion/react/jsx-runtime");
-var logoStyles = (size) => import_react38.css`
+var logoStyles = (size) => import_react39.css`
   width: ${space[size]};
   height: auto;
   display: block;
@@ -6048,13 +6116,13 @@ var Logo = ({
 var Logo_default = Logo;
 
 // src/Navigation/Navigation.styles.ts
-var import_react39 = require("@emotion/react");
-var navigationStyles = import_react39.css`
+var import_react40 = require("@emotion/react");
+var navigationStyles = import_react40.css`
   width: 100%;
   background-color: white;
   border-bottom: 1px solid #e5e5e5;
 `;
-var hamburgerButtonStyles = import_react39.css`
+var hamburgerButtonStyles = import_react40.css`
   cursor: pointer;
   &:focus {
     outline: 2px solid #4f46e5;
@@ -6065,7 +6133,7 @@ var hamburgerButtonStyles = import_react39.css`
     display: none;
   }
 `;
-var centeredLogoStyles = import_react39.css`
+var centeredLogoStyles = import_react40.css`
   transform: translate(-50%, -50%);
   max-width: 150px;
 
@@ -6073,27 +6141,27 @@ var centeredLogoStyles = import_react39.css`
     display: none;
   }
 `;
-var desktopLogoStyles = import_react39.css`
+var desktopLogoStyles = import_react40.css`
   display: none;
 
   @media (min-width: 768px) {
     display: block;
   }
 `;
-var containerStyles3 = import_react39.css`
+var containerStyles3 = import_react40.css`
   @media (min-width: 768px) {
     justify-content: space-between;
     position: static;
   }
 `;
-var logoStyles2 = import_react39.css`
+var logoStyles2 = import_react40.css`
   width: 100%;
 
   @media (min-width: 768px) {
     width: initial;
   }
 `;
-var desktopNavStyles = import_react39.css`
+var desktopNavStyles = import_react40.css`
   display: none;
 
   @media (min-width: 768px) {
@@ -6102,7 +6170,7 @@ var desktopNavStyles = import_react39.css`
     gap: 32px;
   }
 `;
-var navLinksStyles = import_react39.css`
+var navLinksStyles = import_react40.css`
   display: flex;
   align-items: center;
   gap: 24px;
@@ -6110,7 +6178,7 @@ var navLinksStyles = import_react39.css`
   margin: 0;
   padding: 0;
 `;
-var navLinkStyles = import_react39.css`
+var navLinkStyles = import_react40.css`
   text-decoration: none;
   color: #374151;
   font-weight: 500;
@@ -6126,7 +6194,7 @@ var navLinkStyles = import_react39.css`
     outline-offset: 2px;
   }
 `;
-var avatarPlaceholderStyles = import_react39.css`
+var avatarPlaceholderStyles = import_react40.css`
   width: 32px;
   height: 32px;
   border-radius: 50%;
@@ -6186,7 +6254,7 @@ var Navigation = ({
             border: "none",
             padding: space[2],
             css: hamburgerButtonStyles,
-            children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Icon_default, { variant: "Bars", size: 6 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Icon_default, { variant: "Bars", size: "large" })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Box_default, { css: desktopLogoStyles, children: /* @__PURE__ */ (0, import_jsx_runtime228.jsx)(Logo_default, { variant: logoVariant, theme: logoTheme }) }),
@@ -6228,8 +6296,8 @@ var Navigation = ({
 var Navigation_default = Navigation;
 
 // src/PackageCard/PackageCard.styles.ts
-var import_react40 = require("@emotion/react");
-var cardContainerStyles3 = import_react40.css`
+var import_react41 = require("@emotion/react");
+var cardContainerStyles3 = import_react41.css`
   color: var(--text-primary);
   position: relative;
   width: 100%;
@@ -6246,14 +6314,14 @@ var cardContainerStyles3 = import_react40.css`
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
   }
 `;
-var imageContainerStyles = import_react40.css`
+var imageContainerStyles = import_react41.css`
   position: relative;
   width: 100%;
   height: 200px;
   overflow: hidden;
   border-radius: var(--spacing-4);
 `;
-var imageStyles = import_react40.css`
+var imageStyles = import_react41.css`
   width: 100%;
   height: 100%;
   background-size: cover;
@@ -6261,13 +6329,13 @@ var imageStyles = import_react40.css`
   background-repeat: no-repeat;
   border-radius: var(--spacing-4) var(--spacing-4) 0 0;
 `;
-var badgeStyles = import_react40.css`
+var badgeStyles = import_react41.css`
   position: absolute;
   top: var(--spacing-3);
   left: var(--spacing-3);
   z-index: 2;
 `;
-var heartIconStyles = import_react40.css`
+var heartIconStyles = import_react41.css`
   position: absolute;
   top: var(--spacing-3);
   right: var(--spacing-3);
@@ -6289,7 +6357,7 @@ var heartIconStyles = import_react40.css`
     transform: scale(1.1);
   }
 `;
-var contentStyles2 = import_react40.css`
+var contentStyles2 = import_react41.css`
   padding: var(--spacing-3);
 `;
 
@@ -6313,7 +6381,7 @@ var PackageCard = ({
   const mainImage = images[0] || "";
   return /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(Box_default, { css: cardContainerStyles3, className, ...rest, children: [
     /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Box_default, { css: imageContainerStyles, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(Box_default, { css: [imageStyles, { backgroundImage: `url(${mainImage})` }], children: [
-      tripsLeft && /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(AvailabilityChip_default, { variant: "warning", css: badgeStyles, children: [
+      tripsLeft && /* @__PURE__ */ (0, import_jsx_runtime229.jsxs)(AvailabilityBadge_default, { variant: "warning", css: badgeStyles, children: [
         tripsLeft,
         " Trips Left"
       ] }),
@@ -6325,7 +6393,13 @@ var PackageCard = ({
             e.stopPropagation();
             onFavoriteClick == null ? void 0 : onFavoriteClick();
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(Icon_default, { variant: isFavorited ? "HeartSolid" : "Heart", size: 5 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
+            Icon_default,
+            {
+              variant: isFavorited ? "HeartSolid" : "Heart",
+              size: "medium"
+            }
+          )
         }
       )
     ] }) }),
@@ -6371,16 +6445,43 @@ var PackageCard = ({
 };
 var PackageCard_default = PackageCard;
 
-// src/StarRating/StarRating.tsx
+// src/PackageHeader/PackageHeader.tsx
 var import_jsx_runtime230 = require("@emotion/react/jsx-runtime");
+var PackageHeader = ({
+  header,
+  subheader,
+  features,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime230.jsxs)(
+    Box_default,
+    {
+      display: "flex",
+      flexDirection: "column",
+      gap: "var(--spacing-2)",
+      color: "var(--text-primary)",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Heading_default, { size: "xs", fontWeight: "bold", children: header }),
+        subheader && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(Text_default, { children: subheader }),
+        features && /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(FeatureList_default, { items: features })
+      ]
+    }
+  );
+};
+var PackageHeader_default = PackageHeader;
+
+// src/StarRating/StarRating.tsx
+var import_react42 = require("@emotion/react");
+var import_jsx_runtime231 = require("@emotion/react/jsx-runtime");
 var starSize = {
   sm: {
-    size: 5,
+    size: "medium",
     spacing: "var(--spacing-2)"
   },
   md: {
-    size: 7,
-    spacing: "var(--spacing-3)"
+    size: "large",
+    spacing: "var(--spacing-1)"
   }
 };
 var StarRating = ({
@@ -6391,18 +6492,21 @@ var StarRating = ({
   const stars = [];
   for (let i = 1; i <= 5; i++) {
     stars.push(
-      /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
         Icon_default,
         {
           variant: "StarSolid",
           size: starSize[size].size,
-          fill: i <= rating ? "var(--color-yellow-500)" : "var(--color-neutral-100)"
+          fill: i <= rating ? "var(--color-yellow-500)" : "var(--color-neutral-100)",
+          css: import_react42.css`
+          ${size === "md" && "width: 40px; height: 40px;"}
+        `
         },
         i
       )
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(
     Box_default,
     {
       className,
@@ -6416,7 +6520,7 @@ var StarRating = ({
 var StarRating_default = StarRating;
 
 // src/UserCard/UserCard.tsx
-var import_jsx_runtime231 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime232 = require("@emotion/react/jsx-runtime");
 var UserCard = ({
   avatarSrc,
   title,
@@ -6425,7 +6529,7 @@ var UserCard = ({
   showRating = true,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -6433,11 +6537,11 @@ var UserCard = ({
       gap: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Avatar_default, { type: "image", src: avatarSrc, alt: `${title}'s avatar` }),
-        /* @__PURE__ */ (0, import_jsx_runtime231.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "2px", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(Text_default, { size: "sm", color: "text-secondary", children: subtitle }),
-          showRating && rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime231.jsx)(StarRating_default, { rating, size: "sm" })
+        /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Avatar_default, { type: "image", src: avatarSrc, alt: `${title}'s avatar` }),
+        /* @__PURE__ */ (0, import_jsx_runtime232.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "2px", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Text_default, { size: "md", fontWeight: "bold", children: title }),
+          subtitle && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Text_default, { size: "sm", color: "text-secondary", children: subtitle }),
+          showRating && rating !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StarRating_default, { rating, size: "sm" })
         ] })
       ]
     }
@@ -6446,8 +6550,8 @@ var UserCard = ({
 var UserCard_default = UserCard;
 
 // src/ReviewCard/components/ReviewImages.styles.ts
-var import_react41 = require("@emotion/react");
-var imageStyles2 = import_react41.css`
+var import_react43 = require("@emotion/react");
+var imageStyles2 = import_react43.css`
   flex: 1;
   min-width: 0;
   aspect-ratio: 1;
@@ -6457,13 +6561,13 @@ var imageStyles2 = import_react41.css`
 `;
 
 // src/ReviewCard/components/ReviewImages.tsx
-var import_jsx_runtime232 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime233 = require("@emotion/react/jsx-runtime");
 var ReviewImages = ({ images, maxImages = 3 }) => {
   const displayImages = images.slice(0, maxImages);
   if (displayImages.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Box_default, { display: "flex", gap: "var(--spacing-2)", flexWrap: "wrap", children: displayImages.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
     "img",
     {
       src: image,
@@ -6476,7 +6580,7 @@ var ReviewImages = ({ images, maxImages = 3 }) => {
 var ReviewImages_default = ReviewImages;
 
 // src/ReviewCard/components/ReviewReply.tsx
-var import_jsx_runtime233 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime234 = require("@emotion/react/jsx-runtime");
 var ReviewReply = ({
   avatarSrc,
   name,
@@ -6485,7 +6589,7 @@ var ReviewReply = ({
   label,
   rating
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
     Box_default,
     {
       backgroundColor: "var(--surface-neutral)",
@@ -6495,7 +6599,7 @@ var ReviewReply = ({
       flexDirection: "column",
       gap: "var(--spacing-3)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime233.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -6503,7 +6607,7 @@ var ReviewReply = ({
             justifyContent: "space-between",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
                 UserCard_default,
                 {
                   avatarSrc,
@@ -6512,11 +6616,11 @@ var ReviewReply = ({
                   rating
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(AvailabilityChip_default, { variant: "neutral", children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(AvailabilityBadge_default, { variant: "neutral", children: label })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime233.jsx)(Text_default, { children: content })
+        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Text_default, { children: content })
       ]
     }
   );
@@ -6524,19 +6628,19 @@ var ReviewReply = ({
 var ReviewReply_default = ReviewReply;
 
 // src/ReviewCard/ReviewCard.tsx
-var import_jsx_runtime234 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime235 = require("@emotion/react/jsx-runtime");
 var ReviewCard = ({
   avatarSrc,
   name,
   date,
   rating,
-  availabilityChip,
+  availabilityBadge,
   content,
   images = [],
   replies = [],
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
     Box_default,
     {
       backgroundColor: "white",
@@ -6548,7 +6652,7 @@ var ReviewCard = ({
       border: "1px solid var(--color-neutral-200)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
           UserCard_default,
           {
             avatarSrc,
@@ -6557,10 +6661,10 @@ var ReviewCard = ({
             rating
           }
         ),
-        availabilityChip && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(AvailabilityChip_default, { variant: availabilityChip.variant, children: availabilityChip.text }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Text_default, { size: "md", children: content }),
-        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(ReviewImages_default, { images }),
-        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(
+        availabilityBadge && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Box_default, { children: /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(AvailabilityBadge_default, { variant: availabilityBadge.variant, children: availabilityBadge.text }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Text_default, { size: "md", children: content }),
+        images.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(ReviewImages_default, { images }),
+        replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-3)", children: replies.map((reply, index) => /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(
           ReviewReply_default,
           {
             avatarSrc: reply.avatarSrc,
@@ -6579,9 +6683,9 @@ var ReviewCard = ({
 var ReviewCard_default = ReviewCard;
 
 // src/Reviews/components/ReviewItem.tsx
-var import_jsx_runtime235 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime236 = require("@emotion/react/jsx-runtime");
 var ReviewItem = ({ label, rating }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -6589,10 +6693,10 @@ var ReviewItem = ({ label, rating }) => {
       alignItems: "center",
       width: "100%",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Text_default, { fontWeight: "semibold", children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime235.jsx)(Icon_default, { variant: "StarSolid", size: 5, fill: "var(--surface-action-2)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime235.jsxs)(Text_default, { fontWeight: "semibold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Text_default, { fontWeight: "semibold", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(Box_default, { display: "flex", alignItems: "center", gap: "var(--spacing-2)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Icon_default, { variant: "StarSolid", size: "large", fill: "var(--surface-action-2)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(Text_default, { fontWeight: "semibold", children: [
             rating,
             "/5"
           ] })
@@ -6604,14 +6708,14 @@ var ReviewItem = ({ label, rating }) => {
 var ReviewItem_default = ReviewItem;
 
 // src/Reviews/Reviews.tsx
-var import_jsx_runtime236 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime237 = require("@emotion/react/jsx-runtime");
 var Reviews = ({
   averageRating,
   totalReviews,
   items,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
     Box_default,
     {
       width: "100%",
@@ -6624,7 +6728,7 @@ var Reviews = ({
       p: "var(--spacing-4)",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
           Box_default,
           {
             display: "flex",
@@ -6632,9 +6736,9 @@ var Reviews = ({
             alignItems: "center",
             gap: "var(--spacing-2)",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
-              /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(StarRating_default, { rating: Math.floor(averageRating) }),
-              /* @__PURE__ */ (0, import_jsx_runtime236.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Heading_default, { size: "sm", fontWeight: "bold", color: "text-primary", children: averageRating.toFixed(1) }),
+              /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(StarRating_default, { rating: Math.floor(averageRating) }),
+              /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Text_default, { size: "sm", color: "text-secondary", children: [
                 "Overall Rating \u2022 ",
                 totalReviews,
                 " Review",
@@ -6643,14 +6747,14 @@ var Reviews = ({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
           Box_default,
           {
             display: "flex",
             flexDirection: "column",
             gap: "var(--spacing-2)",
             width: "100%",
-            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
+            children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ReviewItem_default, { label: item.label, rating: item.rating }, index))
           }
         )
       ]
@@ -6660,7 +6764,7 @@ var Reviews = ({
 var Reviews_default = Reviews;
 
 // src/Reviews/ReviewsShowcase.tsx
-var import_jsx_runtime237 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime238 = require("@emotion/react/jsx-runtime");
 var ReviewsShowcase = () => {
   const sampleData = {
     averageRating: 4,
@@ -6682,7 +6786,7 @@ var ReviewsShowcase = () => {
       { label: "Game Abundance", rating: 5 }
     ]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -6690,24 +6794,24 @@ var ReviewsShowcase = () => {
       gap: "var(--spacing-8)",
       p: "var(--spacing-6)",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Reviews_default, { ...sampleData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Heading_default, { size: "lg", children: "Reviews Component Showcase" }),
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Heading_default, { size: "md", children: "Default Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Reviews_default, { ...sampleData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Reviews_default, { ...highRatingData }) })
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Heading_default, { size: "md", children: "High Rating Reviews" }),
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Box_default, { maxWidth: "400px", children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Reviews_default, { ...highRatingData }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime237.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
-          /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime238.jsxs)(Box_default, { display: "flex", flexDirection: "column", gap: "var(--spacing-4)", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Heading_default, { size: "md", children: "Mobile Layout (320px width)" }),
+          /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(
             Box_default,
             {
               maxWidth: "320px",
               border: "1px solid var(--color-neutral-200)",
               p: "var(--spacing-4)",
-              children: /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(Reviews_default, { ...sampleData })
+              children: /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(Reviews_default, { ...sampleData })
             }
           )
         ] })
@@ -6719,7 +6823,7 @@ var ReviewsShowcase_default = ReviewsShowcase;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AIResponse,
-  AvailabilityChip,
+  AvailabilityBadge,
   Avatar,
   Box,
   Button,
@@ -6737,6 +6841,7 @@ var ReviewsShowcase_default = ReviewsShowcase;
   HuntCard,
   Icon,
   IconLabel,
+  IconSizeMap,
   InfoBox,
   Input,
   LayoutTokens,
@@ -6745,6 +6850,7 @@ var ReviewsShowcase_default = ReviewsShowcase;
   MessageBubble,
   Navigation,
   PackageCard,
+  PackageHeader,
   ReviewCard,
   Reviews,
   ReviewsShowcase,