@shapesos/clay 0.8.2 → 0.10.0

package/dist/index.cjs

@@ -16342,8 +16342,12 @@ var require_lottie = __commonJS({
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  BUTTON_INTENT: () => BUTTON_INTENT,
   BUTTON_SIZE: () => BUTTON_SIZE,
   BUTTON_VARIANT: () => BUTTON_VARIANT,
+  Block: () => Block,
+  BlockContext: () => BlockContext,
+  BlockServices: () => BlockServices,
   Button: () => Button2,
   ChatContext: () => ChatContext,
   ChatMessage: () => ChatMessage,
@@ -16356,6 +16360,8 @@ __export(src_exports, {
   Lottie: () => Lottie,
   MESSAGE_ROLE: () => MESSAGE_ROLE,
   TextArea: () => TextArea,
+  TextBlockService: () => TextBlockService,
+  blockTypes: () => blockTypes,
   colors: () => colors,
   convertTableToCSV: () => convertTableToCSV,
   fontFamilies: () => fontFamilies,
@@ -16365,6 +16371,7 @@ __export(src_exports, {
   typographyMixin: () => typographyMixin,
   typographyStyles: () => typographyStyles,
   typographyTypes: () => typographyTypes,
+  useBlockContext: () => useBlockContext,
   useChatContext: () => useChatContext,
   useCopyToClipboard: () => useCopyToClipboard
 });
@@ -16753,26 +16760,19 @@ function typographyMixin(type) {
   ].join(";\n  ");
 }
 
-// src/components/chat/chat-message-content/chat-message-content.tsx
+// src/components/blocks/text-block/text-block.tsx
 var import_react_markdown = __toESM(require("react-markdown"), 1);
 var import_remark_breaks = __toESM(require("remark-breaks"), 1);
 var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 
-// src/components/chat/scrollable-table/scrollable-table.tsx
-var import_react2 = require("react");
-
-// src/components/chat/chat-context/chat-context.ts
+// src/components/blocks/block-context/block-context.tsx
 var import_react = require("react");
-var ChatContext = (0, import_react.createContext)(null);
-function useChatContext() {
-  const context = (0, import_react.useContext)(ChatContext);
-  if (!context) {
-    throw new Error("useChatContext must be used within a Chat.Root component");
-  }
-  return context;
+var BlockContext = (0, import_react.createContext)(null);
+function useBlockContext() {
+  return (0, import_react.useContext)(BlockContext) ?? {};
 }
 
-// src/components/chat/scrollable-table/scrollable-table-styles.ts
+// src/components/blocks/scrollable-table/scrollable-table-styles.ts
 var import_styled_components = __toESM(require("styled-components"), 1);
 var TableContainer = import_styled_components.default.div`
   position: relative;
@@ -16794,27 +16794,34 @@ var TableActionsDivider = import_styled_components.default.div`
   margin-block: 8px 0;
 `;
 
-// src/components/chat/scrollable-table/scrollable-table.tsx
+// src/components/blocks/scrollable-table/scrollable-table.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-function ScrollableTable({ node: _node, messageId, counter, ...props }) {
+function ScrollableTable({ node: _node, counter, ...props }) {
   const currentIndex = counter ? counter.value : 0;
   if (counter) {
     counter.value += 1;
   }
-  const context = (0, import_react2.useContext)(ChatContext);
-  const TableActions = context?.TableActions;
+  const { TableActions } = useBlockContext();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TableContainer, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableScroll, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", { ...props }) }),
-    TableActions && messageId && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActions, { messageId, tableIndex: currentIndex }) }),
+    TableActions && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActions, { tableIndex: currentIndex }) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TableActionsDivider, {})
     ] })
   ] });
 }
 
-// src/components/chat/chat-message-content/chat-message-content-styles.ts
+// src/components/blocks/text-block/sanitize.ts
+function sanitize(text2) {
+  return text2.split("\n").filter((line) => {
+    const t = line.trim();
+    return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
+  }).join("\n");
+}
+
+// src/components/blocks/text-block/text-block-styles.ts
 var import_styled_components2 = __toESM(require("styled-components"), 1);
-var ContentWrapper = import_styled_components2.default.div`
+var TextBlockWrapper = import_styled_components2.default.div`
   ${typographyMixin(typographyTypes.GEIST_BODY_S_REGULAR)};
   color: ${colors["brown-100"]};
   word-break: break-word;
@@ -16931,18 +16938,53 @@ var ContentWrapper = import_styled_components2.default.div`
   }
 `;
 
-// src/components/chat/chat-message-content/chat-message-content.tsx
+// src/components/blocks/text-block/text-block.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-function ChatMessageContent({ content: content2, messageId }) {
+function TextBlock({ block }) {
   const counter = { value: 0 };
-  const sanitizedContent = content2.split("\n").filter((line) => {
-    const t = line.trim();
-    return !(t.startsWith("<!-- table-title:") && t.endsWith("-->"));
-  }).join("\n");
   const markdownComponents = {
-    table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScrollableTable, { ...tableProps, messageId, counter }))
+    table: ((tableProps) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScrollableTable, { ...tableProps, counter }))
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ContentWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitizedContent }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TextBlockWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default, import_remark_breaks.default], components: markdownComponents, children: sanitize(block.payload.text) }) });
+}
+
+// src/components/blocks/types.ts
+var blockTypes = {
+  TEXT: "TEXT"
+};
+
+// src/components/blocks/block-services/text-block-service.ts
+var TextBlockService = {
+  type: blockTypes.TEXT,
+  Component: TextBlock
+};
+
+// src/components/blocks/block-services/index.ts
+var BlockServices = {
+  [TextBlockService.type]: TextBlockService
+};
+
+// src/components/blocks/block/block.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Block({ block }) {
+  const service = BlockServices[block.type];
+  if (!service) return null;
+  const { Component } = service;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { block });
+}
+
+// src/components/chat/chat-message/chat-message.tsx
+var import_react7 = require("react");
+
+// src/components/chat/chat-context/chat-context.ts
+var import_react2 = require("react");
+var ChatContext = (0, import_react2.createContext)(null);
+function useChatContext() {
+  const context = (0, import_react2.useContext)(ChatContext);
+  if (!context) {
+    throw new Error("useChatContext must be used within a Chat.Root component");
+  }
+  return context;
 }
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
@@ -17046,10 +17088,10 @@ var IconWrapper = import_styled_components3.default.span`
 `;
 
 // src/components/icon/icon.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var DEFAULT_SIZE = 16;
 var Icon = (0, import_react4.forwardRef)(function Icon2({ icon: IconComponent, size = DEFAULT_SIZE, color, className, "aria-label": ariaLabel }, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     IconWrapper,
     {
       ref,
@@ -17057,7 +17099,7 @@ var Icon = (0, import_react4.forwardRef)(function Icon2({ icon: IconComponent, s
       $color: color,
       "aria-label": ariaLabel,
       role: ariaLabel ? "img" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconComponent, { width: size, height: size, strokeWidth: getStrokeWidth(size) })
     }
   );
 });
@@ -17106,7 +17148,7 @@ var Button = import_styled_components4.default.button`
 `;
 
 // src/components/icon-button/icon-button.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var ICON_SIZE_BY_BUTTON_SIZE = {
   small: 16,
   medium: 20
@@ -17123,7 +17165,7 @@ function IconButton({
   as,
   "aria-label": ariaLabel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     Button,
     {
       className,
@@ -17135,7 +17177,7 @@ function IconButton({
       disabled,
       onClick: disabled ? void 0 : onClick,
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon, size: ICON_SIZE_BY_BUTTON_SIZE[size] })
     }
   );
 }
@@ -17220,7 +17262,7 @@ var AnimatedAction = import_styled_components5.default.div`
 `;
 
 // src/components/chat/chat-message-actions/chat-message-actions.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function ChatMessageActions({ className, messageId, content: content2, role, isHelpful }) {
   const { onCopyMessage, onThumbUpClick, onThumbDownClick } = useChatContext();
   const { isCopied, copy } = useCopyToClipboard();
@@ -17236,8 +17278,8 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
   }, [messageId, isHelpful, onThumbDownClick]);
   const isAssistant = role === MESSAGE_ROLE.ASSISTANT;
   const hasFeedback = isAssistant && (onThumbUpClick || onThumbDownClick);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ActionsContainer, { $role: role, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ActionsContainer, { $role: role, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       IconButton,
       {
         icon: isCopied ? IconCheck : IconCopy,
@@ -17245,7 +17287,7 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
         "aria-label": isCopied ? "Copied" : "Copy message"
       }
     ),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnimatedAction, { $visible: isHelpful !== false, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       IconButton,
       {
         icon: IconThumbUp,
@@ -17254,7 +17296,7 @@ function ChatMessageActions({ className, messageId, content: content2, role, isH
         "aria-label": "Good response"
       }
     ) }),
-    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    hasFeedback && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AnimatedAction, { $visible: isHelpful !== true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       IconButton,
       {
         icon: IconThumbDown,
@@ -17296,15 +17338,22 @@ var MessageBubble = import_styled_components6.default.div`
 `;
 
 // src/components/chat/chat-message/chat-message.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function ChatMessage({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(MessageContainer, { $role: message.role, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChatMessageContent, { content: message.content, messageId: message.id }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  const { TableActions: ChatTableActions } = useChatContext();
+  const blockContextValue = (0, import_react7.useMemo)(
+    () => ({
+      TableActions: ChatTableActions ? ({ tableIndex }) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatTableActions, { messageId: message.id, tableIndex }) : void 0
+    }),
+    [ChatTableActions, message.id]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageRow, { $role: message.role, role: "article", "aria-label": `${message.role} message`, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(MessageContainer, { $role: message.role, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MessageBubble, { $role: message.role, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BlockContext.Provider, { value: blockContextValue, children: message.blocks.map((block, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Block, { block }, index2)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       ChatMessageActions,
       {
         messageId: message.id,
-        content: message.content,
+        content: message.fallbackText,
         role: message.role,
         isHelpful: message.isHelpful
       }
@@ -17349,20 +17398,20 @@ var Key = import_styled_components7.default.kbd`
 `;
 
 // src/components/keyboard-shortcut/keyboard-shortcut.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function KeyboardShortcut({
   keys,
   variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Wrapper, { className, children: keys.map((KeyComponent, index2) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Key, { $variant: variant, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon: KeyComponent, size: 12 }) }, index2)) });
 }
 
 // src/components/keyboard-shortcut/icons/icon-ctrl.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function IconCtrl(props) {
   const { width: width2 = 24, height: height2 = 24, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: width2, height: height2, fill: "none", ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "text",
     {
       x: "50%",
@@ -17379,7 +17428,7 @@ function IconCtrl(props) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/components/lottie/lottie-styles.ts
 var import_styled_components8 = __toESM(require("styled-components"), 1);
@@ -17395,7 +17444,7 @@ var LottieContainer = import_styled_components8.default.div`
 `;
 
 // src/components/lottie/use-lottie.ts
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_lottie_web = __toESM(require_lottie(), 1);
 function useLottie({
   animationData: animationData2,
@@ -17410,17 +17459,17 @@ function useLottie({
   onLoopComplete,
   onEnterFrame
 }) {
-  const containerRef = (0, import_react7.useRef)(null);
-  const animationRef = (0, import_react7.useRef)(null);
-  const onAnimationLoadedRef = (0, import_react7.useRef)(onAnimationLoaded);
-  const onCompleteRef = (0, import_react7.useRef)(onComplete);
-  const onLoopCompleteRef = (0, import_react7.useRef)(onLoopComplete);
-  const onEnterFrameRef = (0, import_react7.useRef)(onEnterFrame);
+  const containerRef = (0, import_react8.useRef)(null);
+  const animationRef = (0, import_react8.useRef)(null);
+  const onAnimationLoadedRef = (0, import_react8.useRef)(onAnimationLoaded);
+  const onCompleteRef = (0, import_react8.useRef)(onComplete);
+  const onLoopCompleteRef = (0, import_react8.useRef)(onLoopComplete);
+  const onEnterFrameRef = (0, import_react8.useRef)(onEnterFrame);
   onAnimationLoadedRef.current = onAnimationLoaded;
   onCompleteRef.current = onComplete;
   onLoopCompleteRef.current = onLoopComplete;
   onEnterFrameRef.current = onEnterFrame;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (!containerRef.current) return;
     const anim = import_lottie_web.default.loadAnimation({
       container: containerRef.current,
@@ -17512,8 +17561,8 @@ function createLottieRef(animationRef) {
 }
 
 // src/components/lottie/lottie.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Lottie = (0, import_react8.forwardRef)(function Lottie2({
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Lottie = (0, import_react9.forwardRef)(function Lottie2({
   animationData: animationData2,
   autoplay,
   loop,
@@ -17543,8 +17592,8 @@ var Lottie = (0, import_react8.forwardRef)(function Lottie2({
     onLoopComplete,
     onEnterFrame
   });
-  (0, import_react8.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  (0, import_react9.useImperativeHandle)(ref, () => createLottieRef(animationRef), [animationRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     LottieContainer,
     {
       ref: containerRef,
@@ -17558,7 +17607,7 @@ var Lottie = (0, import_react8.forwardRef)(function Lottie2({
 });
 
 // src/components/text-area/text-area.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/utils/merge-refs.ts
 function mergeRefs(...refs) {
@@ -17598,23 +17647,23 @@ var StyledTextArea = import_styled_components9.default.textarea`
 `;
 
 // src/components/text-area/text-area.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var TextArea = (0, import_react9.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
-  const internalRef = (0, import_react9.useRef)(null);
-  (0, import_react9.useLayoutEffect)(() => {
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TextArea = (0, import_react10.forwardRef)(function TextArea2({ value: value2, onChange, placeholder, maxHeight, rows = 1, autoFocus, onKeyDown, disabled, className }, externalRef) {
+  const internalRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useLayoutEffect)(() => {
     const el = internalRef.current;
     if (el) {
       el.style.height = "auto";
       el.style.height = `${el.scrollHeight}px`;
     }
   }, [value2]);
-  const handleChange = (0, import_react9.useCallback)(
+  const handleChange = (0, import_react10.useCallback)(
     (e) => {
       onChange(e.target.value);
     },
     [onChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     StyledTextArea,
     {
       ref: mergeRefs(internalRef, externalRef),
@@ -17698,70 +17747,111 @@ function convertTableToCSV(table) {
 }
 
 // src/components/button/button.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/components/button/button-styles.ts
 var import_styled_components10 = __toESM(require("styled-components"), 1);
-var sizeStyles = {
-  xs: import_styled_components10.css`
-    padding: 6px 10px;
-    border-radius: 8px;
-    gap: 4px;
-  `,
-  s: import_styled_components10.css`
-    padding: 8px 12px;
-    border-radius: 10px;
-    gap: 6px;
-  `,
-  m: import_styled_components10.css`
-    padding: 10px 14px;
-    border-radius: 10px;
-    gap: 6px;
-  `
-};
-var variantStyles2 = {
-  solid: import_styled_components10.css`
-    background: ${colors["brown-100"]};
-    color: ${colors.white};
-    border: none;
 
-    &:hover:not(:disabled) {
-      background: ${colors["brown-90"]};
-    }
-
-    &:disabled {
-      background: ${colors["brown-20"]};
-      color: ${colors["brown-50"]};
-    }
-  `,
-  outline: import_styled_components10.css`
-    background: ${colors.white};
-    color: ${colors["brown-100"]};
-    border: 1px solid ${colors["brown-40"]};
-
-    &:hover:not(:disabled) {
-      background: ${colors["brown-20"]};
-    }
+// src/components/button/constants.ts
+var BUTTON_VARIANT = {
+  SOLID: "solid",
+  OUTLINE: "outline",
+  GHOST: "ghost"
+};
+var BUTTON_SIZE = {
+  XS: "xs",
+  S: "s",
+  M: "m"
+};
+var BUTTON_INTENT = {
+  PRIMARY: "primary",
+  ERROR: "error"
+};
+var ICON_POSITION = {
+  LEADING: "leading",
+  TRAILING: "trailing"
+};
 
-    &:disabled {
-      border-color: ${colors["brown-20"]};
-      color: ${colors["brown-50"]};
-    }
-  `,
-  ghost: import_styled_components10.css`
-    background: transparent;
-    color: ${colors["brown-100"]};
-    border: none;
+// src/components/button/button-styles.ts
+var intentColors = {
+  [BUTTON_INTENT.PRIMARY]: {
+    base: colors["brown-100"],
+    hover: colors["brown-90"],
+    disabledBg: colors["brown-20"],
+    disabledText: colors["brown-50"],
+    subtleHover: colors["brown-20"],
+    border: colors["brown-40"],
+    disabledBorder: colors["brown-20"]
+  },
+  [BUTTON_INTENT.ERROR]: {
+    base: colors["red-500"],
+    hover: colors["red-600"],
+    disabledBg: colors["red-100"],
+    disabledText: colors["red-200"],
+    subtleHover: colors["red-50"],
+    border: colors["red-200"],
+    disabledBorder: colors["red-100"]
+  }
+};
+var sizeValues = {
+  [BUTTON_SIZE.XS]: { padding: "6px 10px", borderRadius: "8px", gap: "4px" },
+  [BUTTON_SIZE.S]: { padding: "8px 12px", borderRadius: "10px", gap: "6px" },
+  [BUTTON_SIZE.M]: { padding: "10px 14px", borderRadius: "10px", gap: "6px" }
+};
+function sizeMixin({ $size }) {
+  const s = sizeValues[$size];
+  return import_styled_components10.css`
+    padding: ${s.padding};
+    border-radius: ${s.borderRadius};
+    gap: ${s.gap};
+  `;
+}
+var variantColorMap = {
+  [BUTTON_VARIANT.SOLID]: (c) => ({
+    background: c.base,
+    color: colors.white,
+    border: "none",
+    hoverBg: c.hover,
+    disabledBg: c.disabledBg,
+    disabledColor: c.disabledText
+  }),
+  [BUTTON_VARIANT.OUTLINE]: (c) => ({
+    background: colors.white,
+    color: c.base,
+    border: `1px solid ${c.border}`,
+    hoverBg: c.subtleHover,
+    disabledColor: c.disabledText,
+    disabledBorder: c.disabledBorder
+  }),
+  [BUTTON_VARIANT.GHOST]: (c) => ({
+    background: "transparent",
+    color: c.base,
+    border: "none",
+    hoverBg: c.subtleHover,
+    disabledColor: c.disabledText
+  })
+};
+function variantMixin({
+  $variant,
+  $intent
+}) {
+  const v = variantColorMap[$variant](intentColors[$intent]);
+  return import_styled_components10.css`
+    background: ${v.background};
+    color: ${v.color};
+    border: ${v.border};
 
     &:hover:not(:disabled) {
-      background: ${colors["brown-20"]};
+      background: ${v.hoverBg};
     }
 
     &:disabled {
-      color: ${colors["brown-50"]};
+      color: ${v.disabledColor};
+      ${v.disabledBg ? `background: ${v.disabledBg};` : ""}
+      ${v.disabledBorder ? `border-color: ${v.disabledBorder};` : ""}
     }
-  `
-};
+  `;
+}
 var StyledButton = import_styled_components10.default.button`
   display: inline-flex;
   align-items: center;
@@ -17774,31 +17864,16 @@ var StyledButton = import_styled_components10.default.button`
     cursor: not-allowed;
   }
 
-  ${({ $size }) => sizeStyles[$size]}
-  ${({ $variant }) => variantStyles2[$variant]}
+  ${sizeMixin}
+  ${variantMixin}
 `;
 
-// src/components/button/constants.ts
-var BUTTON_VARIANT = {
-  SOLID: "solid",
-  OUTLINE: "outline",
-  GHOST: "ghost"
-};
-var BUTTON_SIZE = {
-  XS: "xs",
-  S: "s",
-  M: "m"
-};
-var ICON_POSITION = {
-  LEADING: "leading",
-  TRAILING: "trailing"
-};
-
 // src/components/button/button.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var Button2 = (0, import_react10.forwardRef)(function Button3({
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Button2 = (0, import_react11.forwardRef)(function Button3({
   children,
   variant = BUTTON_VARIANT.SOLID,
+  intent = BUTTON_INTENT.PRIMARY,
   size = BUTTON_SIZE.M,
   icon,
   iconPosition = ICON_POSITION.LEADING,
@@ -17807,13 +17882,14 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
   className,
   "aria-label": ariaLabel
 }, ref) {
-  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon, { icon, size: 16 }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  const iconElement = icon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon, size: 16 }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     StyledButton,
     {
       ref,
       type: "button",
       $variant: variant,
+      $intent: intent,
       $size: size,
       disabled,
       onClick: disabled ? void 0 : onClick,
@@ -17821,7 +17897,7 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
       "aria-label": ariaLabel,
       children: [
         iconPosition === ICON_POSITION.LEADING && iconElement,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children }),
         iconPosition === ICON_POSITION.TRAILING && iconElement
       ]
     }
@@ -17829,8 +17905,12 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUTTON_INTENT,
   BUTTON_SIZE,
   BUTTON_VARIANT,
+  Block,
+  BlockContext,
+  BlockServices,
   Button,
   ChatContext,
   ChatMessage,
@@ -17843,6 +17923,8 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
   Lottie,
   MESSAGE_ROLE,
   TextArea,
+  TextBlockService,
+  blockTypes,
   colors,
   convertTableToCSV,
   fontFamilies,
@@ -17852,6 +17934,7 @@ var Button2 = (0, import_react10.forwardRef)(function Button3({
   typographyMixin,
   typographyStyles,
   typographyTypes,
+  useBlockContext,
   useChatContext,
   useCopyToClipboard
 });