@landtrustinc/design-system 1.1.8 → 1.2.2

package/dist/index.js

@@ -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,
@@ -2571,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
@@ -2788,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,
@@ -2834,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,
     {
@@ -3648,7 +3679,7 @@ var import_jsx_runtime201 = require("@emotion/react/jsx-runtime");
 var IconLabel = ({
   variant,
   label,
-  iconSize = 4,
+  iconSize = "small",
   className,
   ...rest
 }) => {
@@ -3761,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" }) }) })
@@ -3856,7 +3887,8 @@ var AvailabilityBadge = ({
 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");
@@ -3919,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);
   };
@@ -3945,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) {
@@ -3992,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;
@@ -4026,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;
@@ -4070,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",
@@ -4115,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;
@@ -4170,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
@@ -4194,7 +4236,7 @@ var TextArea = (0, import_react18.forwardRef)(
             Icon_default,
             {
               variant: "PaperPlane",
-              size: 6,
+              size: "large",
               fill: "var(--color-base-white)"
             }
           )
@@ -4207,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;
@@ -4231,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;
@@ -4261,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;
@@ -4281,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);
@@ -4302,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;
@@ -4327,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
     }
   ) });
@@ -4369,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);
@@ -4388,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) => {
@@ -4406,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) => {
@@ -4416,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,
@@ -4449,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%;
@@ -4458,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;
@@ -4475,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 {
@@ -4494,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);
@@ -4504,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);
@@ -4540,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);
@@ -4553,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;
@@ -4570,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]
   );
@@ -4604,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,
                       {
@@ -4623,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" })
                       ] })
                     }
@@ -4648,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..." })
                 ] }) })
               ]
@@ -4677,13 +4719,12 @@ var ChatWidget = ({
 var ChatWidget_default = ChatWidget;
 
 // src/FeatureList/components/FeatureListItem.tsx
-var import_react24 = require("@emotion/react");
 var import_jsx_runtime210 = require("@emotion/react/jsx-runtime");
 var FeatureListItem = ({
   iconVariant,
   label,
   subtitle,
-  iconSize = 6,
+  iconSize = "large",
   iconColor,
   className,
   ...rest
@@ -4698,18 +4739,7 @@ var FeatureListItem = ({
         className,
         ...rest,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime210.jsx)(
-            Icon_default,
-            {
-              variant: iconVariant,
-              size: iconSize,
-              fill: iconColor,
-              css: import_react24.css`
-            width: 26px;
-            height: 26px;
-          `
-            }
-          ),
+          /* @__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 })
         ]
       }
@@ -5795,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" })
       ] })
     ] }),
@@ -6224,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 }) }),
@@ -6363,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"
+            }
+          )
         }
       )
     ] }) }),
@@ -6436,15 +6472,16 @@ var PackageHeader = ({
 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 = ({
@@ -6460,7 +6497,10 @@ var StarRating = ({
         {
           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
       )
@@ -6510,8 +6550,8 @@ var UserCard = ({
 var UserCard_default = UserCard;
 
 // src/ReviewCard/components/ReviewImages.styles.ts
-var import_react42 = require("@emotion/react");
-var imageStyles2 = import_react42.css`
+var import_react43 = require("@emotion/react");
+var imageStyles2 = import_react43.css`
   flex: 1;
   min-width: 0;
   aspect-ratio: 1;
@@ -6655,7 +6695,7 @@ var ReviewItem = ({ label, rating }) => {
       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: 5, fill: "var(--surface-action-2)" }),
+          /* @__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"
@@ -6801,6 +6841,7 @@ var ReviewsShowcase_default = ReviewsShowcase;
   HuntCard,
   Icon,
   IconLabel,
+  IconSizeMap,
   InfoBox,
   Input,
   LayoutTokens,