@landtrustinc/design-system 1.1.2 → 1.1.4-beta.1

package/dist/index.js

@@ -519,12 +519,12 @@ var GlobalStyle = import_react.css`
 `;
 
 // src/AIResponse/AIResponse.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/Button/Button.tsx
-var import_react4 = require("@emotion/react");
+var import_react5 = require("@emotion/react");
 var import_lodash = require("lodash");
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/Icon/Icon.tsx
 var import_react2 = require("@emotion/react");
@@ -2785,8 +2785,39 @@ var Icon = ({
 };
 var Icon_default = Icon;
 
-// src/Button/Button.styles.ts
+// src/Spinner/Spinner.styles.ts
 var import_react3 = require("@emotion/react");
+var spinnerStyles = import_react3.css`
+  animation: lt-spin 1s linear infinite;
+
+  @keyframes lt-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
+// src/Spinner/Spinner.tsx
+var import_jsx_runtime196 = require("@emotion/react/jsx-runtime");
+var Spinner = ({ size = 5, className, fill }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+    Icon_default,
+    {
+      variant: "Spinner",
+      size,
+      className,
+      css: spinnerStyles,
+      fill
+    }
+  );
+};
+var Spinner_default2 = Spinner;
+
+// src/Button/Button.styles.ts
+var import_react4 = require("@emotion/react");
 
 // src/Button/TopoPattern.ts
 var topoPattern = `data:image/svg+xml;base64,${btoa(`
@@ -2830,7 +2861,7 @@ var topoPattern = `data:image/svg+xml;base64,${btoa(`
 var TopoPattern_default = topoPattern;
 
 // src/Button/Button.styles.ts
-var rootStyles = import_react3.css`
+var rootStyles = import_react4.css`
   position: relative;
   padding: ${space["4"]} ${space["10"]};
   max-height: ${space["12"]};
@@ -2859,40 +2890,40 @@ var rootStyles = import_react3.css`
   }
 `;
 var styles = {
-  primary: import_react3.css`
-    background-color: ${colors.olive["500"]};
-    color: ${colors.light["100"]};
-    border-color: ${colors.olive["500"]};
+  primary: import_react4.css`
+    background-color: var(--surface-action);
+    color: var(--text-on-action);
+    border-color: var(--border-action);
 
     &:hover {
-      background-color: ${colors.olive["700"]};
-      border-color: ${colors.olive["700"]};
+      background-color: var(--surface-action-hover);
+      border-color: var(--border-action-hover);
     }
 
     &:active {
-      background-color: ${colors.olive["700"]};
-      border-color: ${colors.olive["700"]};
+      background-color: var(--surface-action-hover);
+      border-color: var(--border-action-hover);
     }
 
     &:focus {
-      outline: 2px solid ${colors.olive["200"]};
+      outline: 2px solid var(--color-primary-100);
     }
   `,
-  secondary: import_react3.css`
+  secondary: import_react4.css`
     background-color: transparent;
-    color: ${colors.olive["900"]};
-    border-color: ${colors.olive["900"]};
+    color: var(--text-primary);
+    border-color: var(--border-secondary);
 
     &:hover {
-      background-color: ${colors.olive["50"]};
-      color: ${colors.olive["900"]};
+      background-color: var(--surface-action-3-hover);
+      color: var(--text-primary);
     }
 
     &:focus {
-      outline: 2px solid ${colors.olive["900"]};
+      outline: 2px solid var(--color-neutral-700);
     }
   `,
-  tertiary: import_react3.css`
+  tertiary: import_react4.css`
     background-color: ${colors.gray["900"]};
     color: ${colors.light["100"]};
     border-color: ${colors.gray["900"]};
@@ -2911,25 +2942,25 @@ var styles = {
       outline: 2px solid ${colors.olive["600"]};
     }
   `,
-  plus: import_react3.css`
-    background-color: ${colors.yellow["500"]};
-    color: ${colors.dark["900"]};
-    border-color: ${colors.dark["900"]};
-    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
+  plus: import_react4.css`
+    background-color: var(--surface-action-2);
+    color: var(--text-primary);
+    border-color: var(--border-secondary);
+    box-shadow: var(--shadow-md);
 
     &:hover {
-      background-color: ${colors.yellow["600"]};
+      background-color: var(--surface-action-2-hover);
     }
 
     &:active {
-      background-color: ${colors.yellow["600"]};
+      background-color: var(--surface-action-2-hover);
     }
 
     &:focus {
-      outline: 2px solid ${colors.yellow["500"]};
+      outline: 2px solid var(--surface-action-2);
     }
   `,
-  simple: import_react3.css`
+  simple: import_react4.css`
     background-color: ${colors.light["100"]};
     color: ${colors.dark["900"]};
     border-color: ${colors.gray["200"]};
@@ -2946,37 +2977,22 @@ var styles = {
       outline: 2px solid ${colors.gray["300"]};
     }
   `,
-  text: import_react3.css`
+  text: import_react4.css`
     text-decoration: none;
     border-color: transparent;
-    color: ${colors.dark["900"]};
+    color: var(--text-primary);
 
     &:hover {
       text-decoration: none;
-      background-color: ${colors.gray["100"]};
-      border-color: ${colors.gray["100"]};
-    }
-
-    &:focus {
-      outline: 2px solid ${colors.gray["900"]};
-    }
-  `,
-  "text-underline": import_react3.css`
-    text-decoration: underline;
-    border-color: transparent;
-    color: ${colors.dark["900"]};
-
-    &:hover {
-      text-decoration: underline;
-      background-color: ${colors.gray["100"]};
-      border-color: ${colors.gray["100"]};
+      background-color: var(--surface-action-3-hover);
+      border-color: var(--surface-action-3-hover);
     }
 
     &:focus {
-      outline: 2px solid ${colors.gray["900"]};
+      outline: 2px solid var(--border-secondary);
     }
   `,
-  topo: import_react3.css`
+  topo: import_react4.css`
     background-color: ${colors.gray["900"]};
     background-image: url(${TopoPattern_default});
     background-size: cover;
@@ -2997,10 +3013,10 @@ var styles = {
       outline: 2px solid ${colors.olive["500"]};
     }
   `,
-  fullWidth: import_react3.css`
+  fullWidth: import_react4.css`
     width: 100%;
   `,
-  sizeXs: import_react3.css`
+  sizeXs: import_react4.css`
     padding-top: ${space["2"]};
     padding-bottom: ${space["2"]};
     padding-left: ${space["3"]};
@@ -3009,12 +3025,12 @@ var styles = {
     font-size: ${fontSizes.xs};
     font-weight: ${fontWeights.bold};
   `,
-  sizeSm: import_react3.css`
+  sizeSm: import_react4.css`
     padding-top: ${space["3"]};
     padding-bottom: ${space["3"]};
   `,
-  sizeBase: () => import_react3.css``,
-  sizeLg: import_react3.css`
+  sizeBase: () => import_react4.css``,
+  sizeLg: import_react4.css`
     padding-top: ${space["5"]};
     padding-bottom: ${space["5"]};
     padding-left: ${space["12"]};
@@ -3022,58 +3038,55 @@ var styles = {
     max-height: ${space["14"]};
     font-size: ${fontSizes.base};
   `,
-  iconOnly: import_react3.css`
+  iconOnly: import_react4.css`
     height: var(--spacing-11);
     min-width: var(--spacing-11);
     max-height: var(--spacing-11);
     padding: 0;
     border-radius: var(--radius-round);
   `,
-  iconOnlyLg: import_react3.css`
+  iconOnlyLg: import_react4.css`
     height: var(--spacing-20);
     min-width: var(--spacing-20);
     max-height: var(--spacing-20);
     padding: 0;
     border-radius: var(--radius-round);
   `,
-  disabled: import_react3.css`
+  disabled: import_react4.css`
     opacity: ${opacity["50"]};
     pointer-events: none;
+  `,
+  withIcon: import_react4.css`
+    gap: var(--spacing-3);
   `
 };
-var spinnerStyles = (variant) => import_react3.css`
+var spinnerStyles2 = (variant) => import_react4.css`
   position: absolute;
-  left: calc(50% - ${space["3"]});
-  stroke: ${colors.light["100"]};
-  stroke-width: 3px;
+  left: calc(50% - var(--spacing-2));
 
   ${variant === "secondary" && `
-    stroke: ${colors.gray["900"]};
+    fill: var(--text-primary);
   `}
 
   ${variant === "plus" && `
-    stroke: ${colors.gray["900"]};
+    fill: var(--text-primary);
   `}
 
   ${variant === "text" && `
-    stroke: ${colors.gray["900"]};
+    fill: var(--text-primary);
   `}
-
-  ${variant === "text-underline" && `
-    stroke: ${colors.gray["900"]};
-  `}
-
+ 
   ${variant === "simple" && `
-    stroke: ${colors.gray["900"]};
+    fill: var(--text-primary);
   `}
 `;
-var labelStyles = (isVisible) => () => import_react3.css`
+var labelStyles = (isVisible) => () => import_react4.css`
     visibility: ${isVisible ? "visible" : "hidden"};
   `;
 
 // src/Button/Button.tsx
-var import_jsx_runtime196 = require("@emotion/react/jsx-runtime");
-var Button = import_react5.default.forwardRef(
+var import_jsx_runtime197 = require("@emotion/react/jsx-runtime");
+var Button = import_react6.default.forwardRef(
   ({
     as: Component = "button",
     variant = "primary",
@@ -3084,14 +3097,14 @@ var Button = import_react5.default.forwardRef(
     type = "button",
     isLoading = false,
     className = "",
-    labelStyleOverrides = import_react4.css``,
+    labelStyleOverrides = import_react5.css``,
     icon,
     ...props
   }, ref) => {
     const componentType = Component === "button" ? type : void 0;
     const sizeKey = `size${(0, import_lodash.upperFirst)(size)}`;
     const isIconOnly = icon && !children;
-    return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
       Component,
       {
         ref,
@@ -3104,13 +3117,14 @@ var Button = import_react5.default.forwardRef(
           size && styles[sizeKey],
           isIconOnly && size === "lg" && styles.iconOnlyLg,
           isIconOnly && size !== "lg" && styles.iconOnly,
-          (isLoading || disabled) && styles.disabled
+          (isLoading || disabled) && styles.disabled,
+          icon && children && styles.withIcon
         ],
         ...props,
         children: [
           icon,
-          children && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)("span", { css: [labelStyles(!isLoading), labelStyleOverrides], children }),
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(Icon_default, { variant: "Spinner", css: spinnerStyles(variant) })
+          children && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)("span", { css: [labelStyles(!isLoading), labelStyleOverrides], children }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(Spinner_default2, { css: spinnerStyles2(variant) })
         ]
       }
     );
@@ -3143,9 +3157,9 @@ var Box = import_styled.default.div`
 var Box_default = Box;
 
 // src/Box/Container.tsx
-var import_react6 = require("@emotion/react");
-var import_jsx_runtime197 = require("@emotion/react/jsx-runtime");
-var baseStyles = import_react6.css`
+var import_react7 = require("@emotion/react");
+var import_jsx_runtime198 = require("@emotion/react/jsx-runtime");
+var baseStyles = import_react7.css`
   width: 100%;
   margin: 0 auto;
   padding-left: 1rem;
@@ -3167,7 +3181,7 @@ var baseStyles = import_react6.css`
     max-width: ${screens.xl};
   }
 `;
-var fullWidthStyles = import_react6.css`
+var fullWidthStyles = import_react7.css`
   ${media.sm} {
     max-width: 100%;
   }
@@ -3178,7 +3192,7 @@ var Container = ({
   isFullWidth = false,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
     Box_default,
     {
       css: [baseStyles, isFullWidth && fullWidthStyles],
@@ -3214,9 +3228,9 @@ var resolveColor = (colorToken) => {
 };
 
 // src/Typography/Heading.styles.ts
-var import_react7 = require("@emotion/react");
+var import_react8 = require("@emotion/react");
 var { fontWeights: fontWeights2, media: media2 } = ThemeTokens;
-var headingXl = import_react7.css`
+var headingXl = import_react8.css`
   letter-spacing: 0;
   font-size: 32px;
   line-height: 40px;
@@ -3234,7 +3248,7 @@ var headingXl = import_react7.css`
     line-height: 72px;
   }
 `;
-var headingLg = import_react7.css`
+var headingLg = import_react8.css`
   letter-spacing: 0;
   font-size: 28px;
   line-height: 32px;
@@ -3252,7 +3266,7 @@ var headingLg = import_react7.css`
     line-height: 56px;
   }
 `;
-var headingMd = import_react7.css`
+var headingMd = import_react8.css`
   letter-spacing: 0;
   font-size: 24px;
   line-height: 28px;
@@ -3270,7 +3284,7 @@ var headingMd = import_react7.css`
     line-height: 48px;
   }
 `;
-var headingSm = import_react7.css`
+var headingSm = import_react8.css`
   letter-spacing: 0;
   font-size: 24px;
   line-height: 24px;
@@ -3288,7 +3302,7 @@ var headingSm = import_react7.css`
     line-height: 40px;
   }
 `;
-var headingXs = import_react7.css`
+var headingXs = import_react8.css`
   letter-spacing: 0;
   font-size: 20px;
   line-height: 24px;
@@ -3306,7 +3320,7 @@ var headingXs = import_react7.css`
     line-height: 28px;
   }
 `;
-var heading2xs = import_react7.css`
+var heading2xs = import_react8.css`
   letter-spacing: 0;
   font-size: 20px;
   line-height: 24px;
@@ -3324,37 +3338,37 @@ var heading2xs = import_react7.css`
     line-height: 24px;
   }
 `;
-var headingUppercase = import_react7.css`
+var headingUppercase = import_react8.css`
   text-transform: uppercase;
 `;
-var headingBold = import_react7.css`
+var headingBold = import_react8.css`
   font-weight: 500;
 `;
-var textNormal = import_react7.css`
+var textNormal = import_react8.css`
   font-weight: ${fontWeights2.normal};
 `;
-var textSemibold = import_react7.css`
+var textSemibold = import_react8.css`
   font-weight: ${fontWeights2.medium};
 `;
-var textBold = import_react7.css`
+var textBold = import_react8.css`
   font-weight: ${fontWeights2.bold};
 `;
-var textExtrabold = import_react7.css`
+var textExtrabold = import_react8.css`
   font-weight: ${fontWeights2.bolder};
 `;
-var wrapPretty = import_react7.css`
+var wrapPretty = import_react8.css`
   text-wrap: pretty;
 `;
-var wrapBalance = import_react7.css`
+var wrapBalance = import_react8.css`
   text-wrap: balance;
 `;
-var wrapNowrap = import_react7.css`
+var wrapNowrap = import_react8.css`
   text-wrap: nowrap;
 `;
-var wrapWrap = import_react7.css`
+var wrapWrap = import_react8.css`
   text-wrap: wrap;
 `;
-var wrapStable = import_react7.css`
+var wrapStable = import_react8.css`
   text-wrap: stable;
 `;
 var headingSizeStyles = {
@@ -3380,7 +3394,7 @@ var textFontWeightStyles = {
 };
 
 // src/Typography/Heading.tsx
-var import_jsx_runtime198 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime199 = require("@emotion/react/jsx-runtime");
 var SIZE_TO_ELEMENT_MAP = {
   xl: "h1",
   lg: "h2",
@@ -3410,7 +3424,7 @@ var Heading = ({
   ...props
 }) => {
   const elementType = as != null ? as : SIZE_TO_ELEMENT_MAP[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime198.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
     StyledHeading,
     {
       as: elementType,
@@ -3432,9 +3446,9 @@ var Heading_default = Heading;
 var import_styled3 = __toESM(require("@emotion/styled"));
 
 // src/Typography/Text.styles.ts
-var import_react8 = require("@emotion/react");
+var import_react9 = require("@emotion/react");
 var { fontWeights: fontWeights3, media: media3 } = ThemeTokens;
-var textMd = import_react8.css`
+var textMd = import_react9.css`
   font-size: 16px;
   line-height: 22px;
   letter-spacing: 0;
@@ -3452,7 +3466,7 @@ var textMd = import_react8.css`
     line-height: 22px;
   }
 `;
-var textSm = import_react8.css`
+var textSm = import_react9.css`
   font-size: 14px;
   line-height: 20px;
   letter-spacing: 0;
@@ -3470,7 +3484,7 @@ var textSm = import_react8.css`
     line-height: 20px;
   }
 `;
-var textXs = import_react8.css`
+var textXs = import_react9.css`
   font-size: 14px;
   line-height: 16px;
   letter-spacing: 0;
@@ -3488,7 +3502,7 @@ var textXs = import_react8.css`
     line-height: 16px;
   }
 `;
-var text2xs = import_react8.css`
+var text2xs = import_react9.css`
   font-size: 10px;
   line-height: 24px;
   letter-spacing: 0;
@@ -3506,34 +3520,34 @@ var text2xs = import_react8.css`
     line-height: 14px;
   }
 `;
-var textNormal2 = import_react8.css`
+var textNormal2 = import_react9.css`
   font-weight: ${fontWeights3.normal};
 `;
-var textSemibold2 = import_react8.css`
+var textSemibold2 = import_react9.css`
   font-weight: ${fontWeights3.medium};
 `;
-var textBold2 = import_react8.css`
+var textBold2 = import_react9.css`
   font-weight: ${fontWeights3.bold};
 `;
-var textExtrabold2 = import_react8.css`
+var textExtrabold2 = import_react9.css`
   font-weight: ${fontWeights3.bolder};
 `;
-var textUppercase = import_react8.css`
+var textUppercase = import_react9.css`
   text-transform: uppercase;
 `;
-var wrapPretty2 = import_react8.css`
+var wrapPretty2 = import_react9.css`
   text-wrap: pretty;
 `;
-var wrapBalance2 = import_react8.css`
+var wrapBalance2 = import_react9.css`
   text-wrap: balance;
 `;
-var wrapNowrap2 = import_react8.css`
+var wrapNowrap2 = import_react9.css`
   text-wrap: nowrap;
 `;
-var wrapWrap2 = import_react8.css`
+var wrapWrap2 = import_react9.css`
   text-wrap: wrap;
 `;
-var wrapStable2 = import_react8.css`
+var wrapStable2 = import_react9.css`
   text-wrap: stable;
 `;
 var textSizeStyles = {
@@ -3557,7 +3571,7 @@ var textWrapStyles2 = {
 };
 
 // src/Typography/Text.tsx
-var import_jsx_runtime199 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime200 = require("@emotion/react/jsx-runtime");
 var StyledText = (0, import_styled3.default)("p")`
   ${({ size = "md" }) => textSizeStyles[size]}
   ${({ fontWeight = "normal" }) => textFontWeightStyles2[fontWeight]}
@@ -3579,7 +3593,7 @@ var Text = ({
   ...props
 }) => {
   const elementType = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime199.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(
     StyledText,
     {
       as: elementType,
@@ -3598,7 +3612,7 @@ var Text = ({
 var Text_default = Text;
 
 // src/IconLabel/IconLabel.tsx
-var import_jsx_runtime200 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime201 = require("@emotion/react/jsx-runtime");
 var IconLabel = ({
   variant,
   label,
@@ -3606,7 +3620,7 @@ var IconLabel = ({
   className,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)(
     Box_default,
     {
       display: "flex",
@@ -3615,8 +3629,8 @@ var IconLabel = ({
       className,
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Icon_default, { variant, size: iconSize }),
-        /* @__PURE__ */ (0, import_jsx_runtime200.jsx)(Text_default, { size: "xs", children: label })
+        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Icon_default, { variant, size: iconSize }),
+        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Text_default, { size: "xs", children: label })
       ]
     }
   );
@@ -3624,13 +3638,13 @@ var IconLabel = ({
 var IconLabel_default = IconLabel;
 
 // src/AIResponse/AIResponse.styles.ts
-var import_react9 = require("@emotion/react");
-var rootStyles2 = import_react9.css`
+var import_react10 = require("@emotion/react");
+var rootStyles2 = import_react10.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-4);
 `;
-var getBannerStyles = (variant) => import_react9.css`
+var getBannerStyles = (variant) => import_react10.css`
   background-color: ${variant === "error" ? "var(--surface-error)" : "var(--surface-neutral)"};
   border: ${variant === "error" ? "1px solid var(--border-error)" : "none"};
   border-radius: var(--radius-lg);
@@ -3640,23 +3654,23 @@ var getBannerStyles = (variant) => import_react9.css`
   gap: var(--spacing-5);
   min-width: 335px;
 `;
-var footerStyles = import_react9.css`
+var footerStyles = import_react10.css`
   display: flex;
   gap: var(--spacing-4);
   align-items: center;
 `;
-var actionsStyles = import_react9.css`
+var actionsStyles = import_react10.css`
   display: flex;
   align-items: center;
   gap: var(--spacing-2);
 `;
-var errorRetryStyles = import_react9.css`
+var errorRetryStyles = import_react10.css`
   display: flex;
   align-items: center;
 `;
 
 // src/AIResponse/AIResponse.tsx
-var import_jsx_runtime201 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime202 = require("@emotion/react/jsx-runtime");
 var AIResponse = ({
   title = `Here\u2019s what I found`,
   showDisclaimer = true,
@@ -3669,10 +3683,10 @@ var AIResponse = ({
   onErrorRetry,
   helpfulDebounceMs = 1e3
 }) => {
-  const [visualHelpful, setVisualHelpful] = (0, import_react10.useState)(
+  const [visualHelpful, setVisualHelpful] = (0, import_react11.useState)(
     void 0
   );
-  const debounceTimerRef = (0, import_react10.useRef)(null);
+  const debounceTimerRef = (0, import_react11.useRef)(null);
   const DEBOUNCE_MS = helpfulDebounceMs;
   const scheduleCallback = (next) => {
     if (debounceTimerRef.current) {
@@ -3699,18 +3713,18 @@ var AIResponse = ({
     setVisualHelpful(next);
     scheduleCallback(next);
   };
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
       if (debounceTimerRef.current) {
         clearTimeout(debounceTimerRef.current);
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { className, css: rootStyles2, children: [
-    variant !== "error" && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", color: "var(--text-primary)", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { css: getBannerStyles(variant), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Text_default, { size: "md", color: "var(--text-primary)", children: variant === "error" ? "An error occurred while generating your summary. Please try again." : children }),
-      variant !== "error" && showDisclaimer && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { className, css: rootStyles2, children: [
+    variant !== "error" && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Heading_default, { size: "2xs", fontWeight: "bold", color: "var(--text-primary)", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { css: getBannerStyles(variant), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Text_default, { size: "md", color: "var(--text-primary)", children: variant === "error" ? "An error occurred while generating your summary. Please try again." : children }),
+      variant !== "error" && showDisclaimer && /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
         IconLabel_default,
         {
           variant: "AiMagic",
@@ -3718,19 +3732,19 @@ var AIResponse = ({
           iconSize: 10
         }
       ),
-      variant === "error" && /* @__PURE__ */ (0, import_jsx_runtime201.jsx)("div", { css: errorRetryStyles, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Button_default, { variant: "secondary", size: "xs", onClick: onErrorRetry, children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(IconLabel_default, { variant: "ArrowRotateLeft", label: "Try Again" }) }) })
+      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" }) }) })
     ] }),
-    showHelpfulQuestion && variant !== "error" && /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { css: footerStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(Text_default, { size: "md", color: "var(--text-primary)", children: "Was this helpful?" }),
-      /* @__PURE__ */ (0, import_jsx_runtime201.jsxs)("div", { css: actionsStyles, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+    showHelpfulQuestion && variant !== "error" && /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { css: footerStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Text_default, { size: "md", color: "var(--text-primary)", children: "Was this helpful?" }),
+      /* @__PURE__ */ (0, import_jsx_runtime202.jsxs)("div", { css: actionsStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
           Button_default,
           {
             variant: "text",
             size: "xs",
             onClick: handleHelpfulYes,
             "aria-pressed": visualHelpful === "yes",
-            children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
               IconLabel_default,
               {
                 variant: visualHelpful === "yes" ? "ThumbsUpSolid" : "ThumbsUp",
@@ -3739,14 +3753,14 @@ var AIResponse = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
           Button_default,
           {
             variant: "text",
             size: "xs",
             onClick: handleHelpfulNo,
             "aria-pressed": visualHelpful === "no",
-            children: /* @__PURE__ */ (0, import_jsx_runtime201.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
               IconLabel_default,
               {
                 variant: visualHelpful === "no" ? "ThumbsDownSolid" : "ThumbsDown",
@@ -3762,34 +3776,34 @@ var AIResponse = ({
 var AIResponse_default = AIResponse;
 
 // src/AvailabilityChip/AvailabilityChip.styles.ts
-var import_react11 = require("@emotion/react");
+var import_react12 = require("@emotion/react");
 var availabilityChipVariantStyles = {
-  primary: import_react11.css`
+  primary: import_react12.css`
     background-color: var(--color-primary-100);
     color: var(--text-primary);
   `,
-  error: import_react11.css`
+  error: import_react12.css`
     background-color: var(--surface-error);
     color: var(--text-error);
   `,
-  action: import_react11.css`
+  action: import_react12.css`
     background-color: var(--surface-action-2);
     color: var(--text-primary);
   `,
-  warning: import_react11.css`
+  warning: import_react12.css`
     background-color: var(--color-brown-200);
     color: var(--text-primary);
   `
 };
 
 // src/AvailabilityChip/AvailabilityChip.tsx
-var import_jsx_runtime202 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime203 = require("@emotion/react/jsx-runtime");
 var AvailabilityChip = ({
   children,
   variant,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(
     Box_default,
     {
       display: "inline-flex",
@@ -3799,7 +3813,7 @@ var AvailabilityChip = ({
       borderRadius: "var(--spacing-2)",
       css: availabilityChipVariantStyles[variant],
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime202.jsx)(Text_default, { size: "xs", fontWeight: "bold", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(Text_default, { size: "xs", fontWeight: "bold", children })
     }
   );
 };
@@ -3813,8 +3827,8 @@ var import_styled4 = __toESM(require("@emotion/styled"));
 var import_styled_system2 = require("styled-system");
 
 // src/Divider/Divider.styles.ts
-var import_react12 = require("@emotion/react");
-var dividerStyles = import_react12.css`
+var import_react13 = require("@emotion/react");
+var dividerStyles = import_react13.css`
   width: 100%;
   height: 1px;
   border: 0;
@@ -3822,28 +3836,28 @@ var dividerStyles = import_react12.css`
 `;
 
 // src/Divider/Divider.tsx
-var import_jsx_runtime203 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime204 = require("@emotion/react/jsx-runtime");
 var StyledHr = import_styled4.default.hr`
   ${dividerStyles}
   ${import_styled_system2.space}
 `;
 var Divider = ({ className, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime203.jsx)(StyledHr, { className, ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(StyledHr, { className, ...rest });
 };
 var Divider_default = Divider;
 
 // src/Form/TextArea.tsx
-var import_react14 = require("@emotion/react");
-var import_react15 = require("react");
+var import_react15 = require("@emotion/react");
+var import_react16 = require("react");
 
 // src/Form/TextArea.styles.ts
-var import_react13 = require("@emotion/react");
-var wrapperStyles = import_react13.css`
+var import_react14 = require("@emotion/react");
+var wrapperStyles = import_react14.css`
   position: relative;
   display: inline-block;
   width: 100%;
 `;
-var textareaBase = import_react13.css`
+var textareaBase = import_react14.css`
   width: 100%;
   box-sizing: border-box;
   font: inherit;
@@ -3877,32 +3891,32 @@ var textareaBase = import_react13.css`
     cursor: default;
   }
 `;
-var variantError = import_react13.css`
+var variantError = import_react14.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_react13.css`
+var variantSuccess = import_react14.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_react13.css`
+var submitButtonContainer = import_react14.css`
   position: absolute;
   right: var(--spacing-4);
   bottom: var(--spacing-4);
 `;
-var textareaWithSubmit = import_react13.css`
+var textareaWithSubmit = import_react14.css`
   padding-right: var(--spacing-16);
 `;
 
 // src/Form/TextArea.tsx
-var import_jsx_runtime204 = require("@emotion/react/jsx-runtime");
-var TextArea = (0, import_react15.forwardRef)(
+var import_jsx_runtime205 = require("@emotion/react/jsx-runtime");
+var TextArea = (0, import_react16.forwardRef)(
   ({
     rows = 3,
     variant = "default",
@@ -3922,8 +3936,8 @@ var TextArea = (0, import_react15.forwardRef)(
     submitOnEnter = true,
     ...props
   }, ref) => {
-    const innerRef = (0, import_react15.useRef)(null);
-    (0, import_react15.useEffect)(() => {
+    const innerRef = (0, import_react16.useRef)(null);
+    (0, import_react16.useEffect)(() => {
       const el = innerRef.current;
       if (!el || !autoExpand)
         return;
@@ -3959,8 +3973,8 @@ var TextArea = (0, import_react15.forwardRef)(
         onSubmit();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime204.jsxs)("div", { css: wrapperStyles, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { css: wrapperStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
         "textarea",
         {
           ref: (node) => {
@@ -3977,7 +3991,7 @@ var TextArea = (0, import_react15.forwardRef)(
             textareaBase,
             variant === "error" && variantError,
             variant === "success" && variantSuccess,
-            import_react14.css`
+            import_react15.css`
               resize: ${resize};
             `,
             showSubmit && textareaWithSubmit
@@ -3990,14 +4004,14 @@ var TextArea = (0, import_react15.forwardRef)(
           ...props
         }
       ),
-      showSubmit && /* @__PURE__ */ (0, import_jsx_runtime204.jsx)("div", { css: submitButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+      showSubmit && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { css: submitButtonContainer, children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
         Button_default,
         {
           size: "xs",
           "aria-label": submitAriaLabel,
           onClick: onSubmit,
           disabled: disabled || submitDisabled,
-          icon: /* @__PURE__ */ (0, import_jsx_runtime204.jsx)(
+          icon: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
             Icon_default,
             {
               variant: "PaperPlane",
@@ -4014,14 +4028,14 @@ TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
 
 // src/MessageBubble/MessageBubble.styles.ts
-var import_react16 = require("@emotion/react");
-var getRootStyles = (variant) => import_react16.css`
+var import_react17 = require("@emotion/react");
+var getRootStyles = (variant) => import_react17.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-1);
   align-items: ${variant === "sent" ? "flex-end" : "flex-start"};
 `;
-var getBubbleStyles = (variant) => import_react16.css`
+var getBubbleStyles = (variant) => import_react17.css`
   max-width: 100%;
   width: 100%;
   box-sizing: border-box;
@@ -4038,22 +4052,22 @@ var getBubbleStyles = (variant) => import_react16.css`
   border-bottom-left-radius: ${variant === "sent" ? "var(--radius-lg)" : "0"};
   border-bottom-right-radius: ${variant === "sent" ? "0" : "var(--radius-lg)"};
 `;
-var contentStyles = import_react16.css`
+var contentStyles = import_react17.css`
   flex: 1 1 auto;
   min-width: 1px;
   min-height: 1px;
 `;
 
 // src/MessageBubble/MessageBubble.tsx
-var import_jsx_runtime205 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime206 = require("@emotion/react/jsx-runtime");
 var MessageBubble = ({
   variant = "sent",
   timestamp,
   className,
   children
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsxs)("div", { className, css: getRootStyles(variant), children: [
-    timestamp && /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime206.jsxs)("div", { className, css: getRootStyles(variant), children: [
+    timestamp && /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
       Text_default,
       {
         size: "xs",
@@ -4062,42 +4076,11 @@ var MessageBubble = ({
         children: timestamp
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { css: getBubbleStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime205.jsx)("div", { css: contentStyles, children }) })
+    /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { css: getBubbleStyles(variant), children: /* @__PURE__ */ (0, import_jsx_runtime206.jsx)("div", { css: contentStyles, children }) })
   ] });
 };
 var MessageBubble_default = MessageBubble;
 
-// src/Spinner/Spinner.styles.ts
-var import_react17 = require("@emotion/react");
-var spinnerStyles2 = import_react17.css`
-  animation: lt-spin 1s linear infinite;
-
-  @keyframes lt-spin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-`;
-
-// src/Spinner/Spinner.tsx
-var import_jsx_runtime206 = require("@emotion/react/jsx-runtime");
-var Spinner = ({ size = 5, className, fill }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime206.jsx)(
-    Icon_default,
-    {
-      variant: "Spinner",
-      size,
-      className,
-      css: spinnerStyles2,
-      fill
-    }
-  );
-};
-var Spinner_default2 = Spinner;
-
 // src/Widget/Widget.tsx
 var import_react19 = require("react");