@razorpay/blade 12.98.0 → 12.110.0

package/build/lib/web/production/components/GenUI/GenUIComponents.web.js

@@ -1,15 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
-import { memo, useMemo, useState } from 'react';
+import React__default, { useState, memo, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import dayjs from 'dayjs';
 import { formatNumber } from '@razorpay/i18nify-js';
 import ReactMarkdown from 'react-markdown';
-import { createGlobalStyle } from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import { useGenUIAnimation, useGenUIAction } from './GenUIContext.web.js';
 import { ComponentRenderer } from './GenUISchemaRenderer.web.js';
 import { createRehypeAnimate } from './rehypeAnimate.js';
+import { genUISpacingContract } from './GenUISpacing.js';
+export { getGenUIComponentTopSpacing } from './GenUISpacing.js';
 import '../Box/index.js';
 import '../Typography/index.js';
 import '../Skeleton/index.js';
@@ -28,26 +30,25 @@ import '../Indicator/index.js';
 import '../Alert/index.js';
 import '../Tooltip/index.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Tooltip } from '../Tooltip/Tooltip.web.js';
+import { TooltipInteractiveWrapper } from '../Tooltip/TooltipInteractiveWrapper.web.js';
+import { IconButton } from '../Button/IconButton/IconButton.js';
+import CheckIcon from '../Icons/CheckIcon/CheckIcon.js';
+import CopyIcon from '../Icons/CopyIcon/CopyIcon.js';
 import { Box } from '../Box/Box.js';
 import { Text } from '../Typography/Text/Text.js';
 import { Skeleton } from '../Skeleton/Skeleton.js';
 import { Heading } from '../Typography/Heading/Heading.js';
 import Link from '../Link/Link/Link.js';
-import DotIcon from '../Icons/DotIcon/DotIcon.js';
 import { Divider } from '../Divider/Divider.js';
 import { ChartBarWrapper, ChartBar } from '../Charts/BarChart/BarChart.web.js';
 import { ChartCartesianGrid, ChartXAxis, ChartYAxis, ChartLegend, ChartTooltip } from '../Charts/CommonChartComponents/CommonChartComponents.web.js';
 import { ChartLineWrapper, ChartLine } from '../Charts/LineChart/LineChart.web.js';
 import { ChartAreaWrapper, ChartArea } from '../Charts/AreaChart/AreaChart.web.js';
 import { ChartDonutWrapper, ChartDonut } from '../Charts/DonutChart/DonutChart.web.js';
-import { Tooltip } from '../Tooltip/Tooltip.web.js';
-import { TooltipInteractiveWrapper } from '../Tooltip/TooltipInteractiveWrapper.web.js';
-import { IconButton } from '../Button/IconButton/IconButton.js';
-import CopyIcon from '../Icons/CopyIcon/CopyIcon.js';
 import { Badge } from '../Badge/Badge.js';
 import { Indicator } from '../Indicator/Indicator.js';
 import { Amount } from '../Amount/Amount.js';
-import CheckIcon from '../Icons/CheckIcon/CheckIcon.js';
 import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
 import EditIcon from '../Icons/EditIcon/EditIcon.js';
 import TrashIcon from '../Icons/TrashIcon/TrashIcon.js';
@@ -70,6 +71,362 @@ var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TextAnimationStyles = /*#__PURE__*/createGlobalStyle(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  @keyframes animate-fadeIn {\n    from {\n      opacity: 0;\n      color: #48D08C;\n      filter: blur(2px);\n    }\n    to {\n      opacity: 1;\n      color: inherit;\n      filter: blur(0px);\n    }\n  }\n\n  [data-animate-word] {\n    display: inline-block;\n    animation: animate-fadeIn\n      var(--animate-duration, 400ms)\n      var(--animate-easing, ease) both;\n  }\n"])));
+var MarkdownUnorderedList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownUnorderedList",
+  componentId: "sc-30cio-0"
+})(["display:flex;flex-direction:column;row-gap:", "px;list-style:none;margin:0 0 ", "px 0;padding:0;"], function (_ref) {
+  var theme = _ref.theme;
+  return theme.spacing[3] + theme.spacing[1];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.spacing[2];
+});
+var MarkdownOrderedList = /*#__PURE__*/styled.ol.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownOrderedList",
+  componentId: "sc-30cio-1"
+})(["display:flex;flex-direction:column;row-gap:", "px;counter-reset:markdown-ordered-list;list-style:none;margin:0 0 ", "px 0;padding:0;"], function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.spacing[3] + theme.spacing[1];
+}, function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.spacing[2];
+});
+var MarkdownHeadingContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownHeadingContainer",
+  componentId: "sc-30cio-2"
+})(["", " & + &{margin-top:0;}", ""], function (_ref5) {
+  var theme = _ref5.theme,
+    $level = _ref5.$level;
+  var spacing = {
+    1: {
+      marginTop: 0,
+      marginBottom: theme.spacing[4]
+    },
+    2: {
+      marginTop: theme.spacing[7],
+      marginBottom: theme.spacing[3]
+    },
+    3: {
+      marginTop: theme.spacing[7],
+      marginBottom: theme.spacing[3]
+    },
+    4: {
+      marginTop: theme.spacing[7],
+      marginBottom: theme.spacing[2]
+    },
+    5: {
+      marginTop: theme.spacing[5],
+      marginBottom: theme.spacing[2]
+    },
+    6: {
+      marginTop: theme.spacing[5],
+      marginBottom: theme.spacing[2]
+    }
+  }[$level];
+  return "\n      margin: ".concat(spacing.marginTop, "px 0 ").concat(spacing.marginBottom, "px;\n    ");
+}, function (_ref6) {
+  var theme = _ref6.theme,
+    $level = _ref6.$level;
+  return $level === 6 ? "\n        > h6 {\n          font-family: ".concat(theme.typography.fonts.family.text, ";\n          font-size: ").concat(theme.typography.fonts.size[100], "px;\n          line-height: ").concat(theme.typography.lineHeights[300], "px;\n          letter-spacing: 0.03em;\n        }\n      ") : '';
+});
+var MarkdownListItem = /*#__PURE__*/styled.li.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownListItem",
+  componentId: "sc-30cio-3"
+})(["display:flex;align-items:flex-start;gap:", "px;margin-bottom:0;color:", ";font-family:", ";font-size:", "px;line-height:", "px;list-style:none;", " > ul,> ol{margin-top:", "px;margin-bottom:0;row-gap:", "px;}&:last-child{margin-bottom:0;}"], function (_ref7) {
+  var theme = _ref7.theme,
+    $ordered = _ref7.$ordered;
+  return theme.spacing[$ordered ? 3 : 4];
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.colors.surface.text.gray.subtle;
+}, function (_ref9) {
+  var theme = _ref9.theme;
+  return theme.typography.fonts.family.text;
+}, function (_ref0) {
+  var theme = _ref0.theme;
+  return theme.typography.fonts.size[100];
+}, function (_ref1) {
+  var theme = _ref1.theme;
+  return theme.typography.lineHeights[100];
+}, function (_ref10) {
+  var $ordered = _ref10.$ordered;
+  return $ordered ? 'counter-increment: markdown-ordered-list;' : '';
+}, function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.spacing[2];
+}, function (_ref12) {
+  var theme = _ref12.theme;
+  return theme.spacing[2];
+});
+var MarkdownListMarker = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownListMarker",
+  componentId: "sc-30cio-4"
+})(["flex-shrink:0;color:", ";height:", "px;"], function (_ref13) {
+  var theme = _ref13.theme;
+  return theme.colors.surface.text.gray.muted;
+}, function (_ref14) {
+  var theme = _ref14.theme;
+  return theme.typography.lineHeights[100];
+});
+var MarkdownUnorderedListMarker = /*#__PURE__*/styled(MarkdownListMarker).withConfig({
+  displayName: "GenUIComponentsweb__MarkdownUnorderedListMarker",
+  componentId: "sc-30cio-5"
+})(["display:inline-flex;align-items:center;justify-content:flex-end;width:", "px;min-width:", "px;&::before{content:'';width:", "px;height:", "px;border-radius:", "px;background:", ";}"], function (_ref15) {
+  var theme = _ref15.theme;
+  return theme.spacing[4];
+}, function (_ref16) {
+  var theme = _ref16.theme;
+  return theme.spacing[4];
+}, function (_ref17) {
+  var theme = _ref17.theme;
+  return theme.spacing[2];
+}, function (_ref18) {
+  var theme = _ref18.theme;
+  return theme.spacing[2];
+}, function (_ref19) {
+  var theme = _ref19.theme;
+  return theme.border.radius.max;
+}, function (_ref20) {
+  var theme = _ref20.theme;
+  return theme.colors.surface.text.gray.subtle;
+});
+var MarkdownOrderedListMarker = /*#__PURE__*/styled(MarkdownListMarker).withConfig({
+  displayName: "GenUIComponentsweb__MarkdownOrderedListMarker",
+  componentId: "sc-30cio-6"
+})(["display:inline-block;min-width:", "px;text-align:right;&::before{content:counter(markdown-ordered-list) '.';}"], function (_ref21) {
+  var theme = _ref21.theme;
+  return theme.spacing[5];
+});
+var MarkdownListItemBody = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownListItemBody",
+  componentId: "sc-30cio-7"
+})(["flex:1;min-width:0;> ul,> ol{margin-top:", "px;margin-bottom:0;row-gap:", "px;}"], function (_ref22) {
+  var theme = _ref22.theme;
+  return theme.spacing[2];
+}, function (_ref23) {
+  var theme = _ref23.theme;
+  return theme.spacing[2];
+});
+var MarkdownListContext = /*#__PURE__*/React__default.createContext({
+  ordered: false
+});
+var MarkdownInlineCode = /*#__PURE__*/styled.code.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownInlineCode",
+  componentId: "sc-30cio-8"
+})(["display:inline-flex;align-items:center;box-sizing:border-box;vertical-align:1.5px;color:", ";font-family:", ";font-size:", "px;font-style:normal;font-weight:", ";line-height:", "px;letter-spacing:0;background:", ";border-radius:", "px;box-shadow:inset 0 0 0 ", "px ", ";margin:0 ", "px;padding:", "px ", "px;"], function (_ref24) {
+  var theme = _ref24.theme;
+  return theme.colors.interactive.text.information.normal;
+}, function (_ref25) {
+  var theme = _ref25.theme;
+  return theme.typography.fonts.family.code;
+}, function (_ref26) {
+  var theme = _ref26.theme;
+  return theme.typography.fonts.size[50];
+}, function (_ref27) {
+  var theme = _ref27.theme;
+  return theme.typography.fonts.weight.regular;
+}, function (_ref28) {
+  var theme = _ref28.theme;
+  return theme.typography.lineHeights[50];
+}, function (_ref29) {
+  var theme = _ref29.theme;
+  return theme.colors.surface.background.gray.intense;
+}, function (_ref30) {
+  var theme = _ref30.theme;
+  return theme.border.radius.xsmall;
+}, function (_ref31) {
+  var theme = _ref31.theme;
+  return theme.border.width.thin;
+}, function (_ref32) {
+  var theme = _ref32.theme;
+  return theme.colors.surface.border.gray.subtle;
+}, function (_ref33) {
+  var theme = _ref33.theme;
+  return theme.spacing[1];
+}, function (_ref34) {
+  var theme = _ref34.theme;
+  return theme.spacing[1];
+}, function (_ref35) {
+  var theme = _ref35.theme;
+  return theme.spacing[2];
+});
+var MarkdownItalic = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownItalic",
+  componentId: "sc-30cio-9"
+})(["color:", ";font-family:", ";font-size:", "px;font-style:italic;font-weight:inherit;line-height:", "px;"], function (_ref36) {
+  var theme = _ref36.theme;
+  return theme.colors.surface.text.gray.subtle;
+}, function (_ref37) {
+  var theme = _ref37.theme;
+  return theme.typography.fonts.family.text;
+}, function (_ref38) {
+  var theme = _ref38.theme;
+  return theme.typography.fonts.size[100];
+}, function (_ref39) {
+  var theme = _ref39.theme;
+  return theme.typography.lineHeights[100];
+});
+var MarkdownBlockquote = /*#__PURE__*/styled.blockquote.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownBlockquote",
+  componentId: "sc-30cio-10"
+})(["border-left:", "px solid ", ";margin:0 0 ", "px 0;padding:0 0 0 ", "px;p{margin:0;color:", ";font-style:italic;}"], function (_ref40) {
+  var theme = _ref40.theme;
+  return theme.border.width.thicker;
+}, function (_ref41) {
+  var theme = _ref41.theme;
+  return theme.colors.surface.border.gray.normal;
+}, function (_ref42) {
+  var theme = _ref42.theme;
+  return theme.spacing[5];
+}, function (_ref43) {
+  var theme = _ref43.theme;
+  return theme.spacing[5];
+}, function (_ref44) {
+  var theme = _ref44.theme;
+  return theme.colors.surface.text.gray.muted;
+});
+var MarkdownCodeBlock = /*#__PURE__*/styled.pre.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownCodeBlock",
+  componentId: "sc-30cio-11"
+})(["display:inline-block;max-width:660px;width:fit-content;margin:", "px 0 ", "px;overflow:hidden;padding:0;background:", ";border:", "px solid ", ";border-radius:", "px;"], function (_ref45) {
+  var theme = _ref45.theme;
+  return theme.spacing[1];
+}, function (_ref46) {
+  var theme = _ref46.theme;
+  return theme.spacing[0];
+}, function (_ref47) {
+  var theme = _ref47.theme;
+  return theme.colors.interactive.background.gray.faded;
+}, function (_ref48) {
+  var theme = _ref48.theme;
+  return theme.border.width.thin;
+}, function (_ref49) {
+  var theme = _ref49.theme;
+  return theme.colors.feedback.border.neutral.subtle;
+}, function (_ref50) {
+  var theme = _ref50.theme;
+  return theme.border.radius.medium;
+});
+var MarkdownCodeBlockHeader = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownCodeBlockHeader",
+  componentId: "sc-30cio-12"
+})(["display:flex;align-items:center;gap:", "px;padding:", "px ", "px;border-bottom:", "px solid ", ";"], function (_ref51) {
+  var theme = _ref51.theme;
+  return theme.spacing[2];
+}, function (_ref52) {
+  var theme = _ref52.theme;
+  return theme.spacing[3];
+}, function (_ref53) {
+  var theme = _ref53.theme;
+  return theme.spacing[4];
+}, function (_ref54) {
+  var theme = _ref54.theme;
+  return theme.border.width.thin;
+}, function (_ref55) {
+  var theme = _ref55.theme;
+  return theme.colors.surface.border.gray.muted;
+});
+var MarkdownCodeBlockActions = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownCodeBlockActions",
+  componentId: "sc-30cio-13"
+})(["display:inline-flex;align-items:center;margin-left:auto;"]);
+var MarkdownCodeBlockCopyAnimation = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownCodeBlockCopyAnimation",
+  componentId: "sc-30cio-14"
+})(["display:inline-flex;align-items:center;animation:", " 180ms cubic-bezier(0.2,0.8,0.2,1);@keyframes markdown-code-copy-success{0%{opacity:0;transform:scale(0.72) rotate(-12deg);}100%{opacity:1;transform:scale(1) rotate(0deg);}}@keyframes markdown-code-copy-reset{0%{opacity:0;transform:scale(0.88);}100%{opacity:1;transform:scale(1);}}"], function (_ref56) {
+  var $copied = _ref56.$copied;
+  return $copied ? 'markdown-code-copy-success' : 'markdown-code-copy-reset';
+});
+var MarkdownCodeBlockLanguage = /*#__PURE__*/styled.span.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownCodeBlockLanguage",
+  componentId: "sc-30cio-15"
+})(["display:inline-flex;align-items:center;color:", ";font-family:", ";font-size:", "px;font-weight:", ";letter-spacing:", "px;line-height:", "px;"], function (_ref57) {
+  var theme = _ref57.theme;
+  return theme.colors.surface.text.gray.muted;
+}, function (_ref58) {
+  var theme = _ref58.theme;
+  return theme.typography.fonts.family.code;
+}, function (_ref59) {
+  var theme = _ref59.theme;
+  return theme.typography.fonts.size[50];
+}, function (_ref60) {
+  var theme = _ref60.theme;
+  return theme.typography.fonts.weight.regular;
+}, function (_ref61) {
+  var theme = _ref61.theme;
+  return theme.typography.letterSpacings[100];
+}, function (_ref62) {
+  var theme = _ref62.theme;
+  return theme.typography.lineHeights[50];
+});
+var MarkdownCodeBlockCode = /*#__PURE__*/styled.code.withConfig({
+  displayName: "GenUIComponentsweb__MarkdownCodeBlockCode",
+  componentId: "sc-30cio-16"
+})(["display:block;overflow-x:auto;padding:", "px;color:", ";font-family:", ";font-size:", "px;font-weight:", ";line-height:", "px;white-space:pre;background:none;border:none;"], function (_ref63) {
+  var theme = _ref63.theme;
+  return theme.spacing[4];
+}, function (_ref64) {
+  var theme = _ref64.theme;
+  return theme.colors.surface.text.gray.normal;
+}, function (_ref65) {
+  var theme = _ref65.theme;
+  return theme.typography.fonts.family.code;
+}, function (_ref66) {
+  var theme = _ref66.theme;
+  return theme.typography.fonts.size[75];
+}, function (_ref67) {
+  var theme = _ref67.theme;
+  return theme.typography.fonts.weight.regular;
+}, function (_ref68) {
+  var theme = _ref68.theme;
+  return theme.typography.lineHeights[100];
+});
+var MarkdownCodeBlockCopyButton = function MarkdownCodeBlockCopyButton(_ref69) {
+  var code = _ref69.code;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    copied = _useState2[0],
+    setCopied = _useState2[1];
+  var handleCopy = function handleCopy() {
+    void navigator.clipboard.writeText(String(code !== null && code !== void 0 ? code : ''));
+    setCopied(true);
+    setTimeout(function () {
+      return setCopied(false);
+    }, 2000);
+  };
+  return /*#__PURE__*/jsx(MarkdownCodeBlockActions, {
+    children: /*#__PURE__*/jsx(Tooltip, {
+      content: copied ? 'Copied!' : 'Copy',
+      placement: "top",
+      children: /*#__PURE__*/jsx(TooltipInteractiveWrapper, {
+        children: /*#__PURE__*/jsx(MarkdownCodeBlockCopyAnimation, {
+          $copied: copied,
+          children: /*#__PURE__*/jsx(IconButton, {
+            icon: copied ? CheckIcon : CopyIcon,
+            size: "small",
+            emphasis: "intense",
+            accessibilityLabel: "Copy code block",
+            onClick: handleCopy
+          })
+        }, copied ? 'copied' : 'copy')
+      })
+    })
+  });
+};
+var getMarkdownCodeBlockDetails = function getMarkdownCodeBlockDetails(children) {
+  var child = React__default.Children.toArray(children)[0];
+  if (/*#__PURE__*/React__default.isValidElement(child)) {
+    var _child$props$classNam;
+    var language = (_child$props$classNam = child.props.className) === null || _child$props$classNam === void 0 ? void 0 : _child$props$classNam.replace(/^language-/, '');
+    return {
+      code: child.props.children,
+      language: language
+    };
+  }
+  return {
+    code: children
+  };
+};
 
 /**
  * Built-in component types supported by GenUI
@@ -130,16 +487,16 @@ var ComponentErrorFallback = function ComponentErrorFallback() {
     width: "100%",
     children: /*#__PURE__*/jsx(Text, {
       size: "medium",
-      weight: "semibold",
+      weight: "regular",
       children: "Error rendering component"
     })
   });
 };
-var ChartSkeletonLoader = function ChartSkeletonLoader(_ref) {
-  var title = _ref.title,
-    isTiny = _ref.isTiny,
-    _ref$chartHeight = _ref.chartHeight,
-    chartHeight = _ref$chartHeight === void 0 ? '350px' : _ref$chartHeight;
+var ChartSkeletonLoader = function ChartSkeletonLoader(_ref70) {
+  var title = _ref70.title,
+    isTiny = _ref70.isTiny,
+    _ref70$chartHeight = _ref70.chartHeight,
+    chartHeight = _ref70$chartHeight === void 0 ? '350px' : _ref70$chartHeight;
   return /*#__PURE__*/jsxs(Box, {
     width: "100%",
     display: "flex",
@@ -179,56 +536,146 @@ var ChartSkeletonLoader = function ChartSkeletonLoader(_ref) {
     })]
   });
 };
+var MarkdownListItemRenderer = function MarkdownListItemRenderer(_ref71) {
+  var children = _ref71.children;
+  var _React$useContext = React__default.useContext(MarkdownListContext),
+    ordered = _React$useContext.ordered;
+  return /*#__PURE__*/jsxs(MarkdownListItem, {
+    $ordered: ordered,
+    children: [ordered ? /*#__PURE__*/jsx(MarkdownOrderedListMarker, {}) : /*#__PURE__*/jsx(MarkdownUnorderedListMarker, {}), /*#__PURE__*/jsx(MarkdownListItemBody, {
+      children: children
+    })]
+  });
+};
+var markdownHeadingStyles = {
+  h1: {
+    level: 1,
+    size: 'large',
+    color: 'surface.text.gray.normal',
+    as: 'h1'
+  },
+  h2: {
+    level: 2,
+    size: 'medium',
+    color: 'surface.text.gray.normal',
+    as: 'h2'
+  },
+  h3: {
+    level: 3,
+    size: 'medium',
+    color: 'surface.text.gray.subtle',
+    as: 'h3'
+  },
+  h4: {
+    level: 4,
+    size: 'small',
+    color: 'surface.text.gray.subtle',
+    as: 'h4'
+  },
+  h5: {
+    level: 5,
+    size: 'small',
+    color: 'surface.text.gray.muted',
+    as: 'h5'
+  },
+  h6: {
+    level: 6,
+    size: 'small',
+    color: 'surface.text.gray.muted',
+    as: 'h6'
+  }
+};
+var MarkdownHeadingRenderer = function MarkdownHeadingRenderer(_ref72) {
+  var tag = _ref72.tag,
+    children = _ref72.children;
+  var _markdownHeadingStyle = markdownHeadingStyles[tag],
+    level = _markdownHeadingStyle.level,
+    size = _markdownHeadingStyle.size,
+    color = _markdownHeadingStyle.color,
+    as = _markdownHeadingStyle.as;
+  return /*#__PURE__*/jsx(MarkdownHeadingContainer, {
+    $level: level,
+    children: /*#__PURE__*/jsx(Heading, {
+      as: as,
+      size: size,
+      weight: "medium",
+      color: color,
+      textTransform: level === 6 ? 'uppercase' : undefined,
+      children: children
+    })
+  });
+};
 
 /**
  * Stable components object for ReactMarkdown to prevent re-renders during streaming.
  * Defined outside the component to maintain referential equality.
  */
 var markdownComponents = {
-  h1: function h1(_ref2) {
-    var children = _ref2.children;
-    return /*#__PURE__*/jsx(Heading, {
-      marginBottom: "spacing.4",
-      size: "large",
+  h1: function h1(_ref73) {
+    var children = _ref73.children;
+    return /*#__PURE__*/jsx(MarkdownHeadingRenderer, {
+      tag: "h1",
       children: children
     });
   },
-  h2: function h2(_ref3) {
-    var children = _ref3.children;
-    return /*#__PURE__*/jsx(Heading, {
-      marginBottom: "spacing.3",
-      size: "medium",
+  h2: function h2(_ref74) {
+    var children = _ref74.children;
+    return /*#__PURE__*/jsx(MarkdownHeadingRenderer, {
+      tag: "h2",
+      children: children
+    });
+  },
+  h3: function h3(_ref75) {
+    var children = _ref75.children;
+    return /*#__PURE__*/jsx(MarkdownHeadingRenderer, {
+      tag: "h3",
+      children: children
+    });
+  },
+  h4: function h4(_ref76) {
+    var children = _ref76.children;
+    return /*#__PURE__*/jsx(MarkdownHeadingRenderer, {
+      tag: "h4",
       children: children
     });
   },
-  h3: function h3(_ref4) {
-    var children = _ref4.children;
-    return /*#__PURE__*/jsx(Heading, {
-      marginBottom: "spacing.3",
-      size: "small",
+  h5: function h5(_ref77) {
+    var children = _ref77.children;
+    return /*#__PURE__*/jsx(MarkdownHeadingRenderer, {
+      tag: "h5",
       children: children
     });
   },
-  h4: function h4(_ref5) {
-    var children = _ref5.children;
-    return /*#__PURE__*/jsx(Heading, {
-      marginBottom: "spacing.3",
-      size: "small",
+  h6: function h6(_ref78) {
+    var children = _ref78.children;
+    return /*#__PURE__*/jsx(MarkdownHeadingRenderer, {
+      tag: "h6",
       children: children
     });
   },
-  b: function b(_ref6) {
-    var children = _ref6.children;
+  b: function b(_ref79) {
+    var children = _ref79.children;
     return /*#__PURE__*/jsx(Text, {
+      as: "span",
       size: "medium",
       weight: "semibold",
       color: "surface.text.gray.subtle",
       children: children
     });
   },
-  a: function a(_ref7) {
-    var href = _ref7.href,
-      children = _ref7.children;
+  strong: function strong(_ref80) {
+    var children = _ref80.children;
+    return /*#__PURE__*/jsx(Text, {
+      as: "span",
+      size: "medium",
+      weight: "semibold",
+      color: "surface.text.gray.subtle",
+      children: children
+    });
+  },
+  a: function a(_ref81) {
+    var href = _ref81.href,
+      children = _ref81.children;
     return /*#__PURE__*/jsx(Link, {
       href: href,
       size: "medium",
@@ -239,61 +686,92 @@ var markdownComponents = {
       children: children
     });
   },
-  li: function li(_ref8) {
-    var children = _ref8.children;
-    return /*#__PURE__*/jsxs(Text, {
-      marginY: "spacing.3",
-      size: "medium",
-      children: [/*#__PURE__*/jsx(DotIcon, {
-        marginBottom: "1px",
-        size: "xsmall"
-      }), " ", children]
+  li: MarkdownListItemRenderer,
+  ol: function ol(_ref82) {
+    var children = _ref82.children;
+    return /*#__PURE__*/jsx(MarkdownListContext.Provider, {
+      value: {
+        ordered: true
+      },
+      children: /*#__PURE__*/jsx(MarkdownOrderedList, {
+        children: children
+      })
     });
   },
-  ol: function ol(_ref9) {
-    var children = _ref9.children;
-    return /*#__PURE__*/jsx(Box, {
-      display: "flex",
-      flexDirection: "column",
-      marginLeft: "spacing.4",
+  ul: function ul(_ref83) {
+    var children = _ref83.children;
+    return /*#__PURE__*/jsx(MarkdownListContext.Provider, {
+      value: {
+        ordered: false
+      },
+      children: /*#__PURE__*/jsx(MarkdownUnorderedList, {
+        children: children
+      })
+    });
+  },
+  hr: function hr() {
+    return /*#__PURE__*/jsx(Divider, {
+      marginY: "spacing.7"
+    });
+  },
+  code: function code(_ref84) {
+    var inline = _ref84.inline,
+      className = _ref84.className,
+      children = _ref84.children;
+    return inline || !className ? /*#__PURE__*/jsx(MarkdownInlineCode, {
+      children: children
+    }) : /*#__PURE__*/jsx("code", {
+      className: className,
       children: children
     });
   },
-  ul: function ul(_ref0) {
-    var children = _ref0.children;
-    return /*#__PURE__*/jsx(Box, {
-      display: "flex",
-      flexDirection: "column",
-      marginLeft: "spacing.4",
+  pre: function pre(_ref85) {
+    var children = _ref85.children;
+    var _getMarkdownCodeBlock = getMarkdownCodeBlockDetails(children),
+      code = _getMarkdownCodeBlock.code,
+      language = _getMarkdownCodeBlock.language;
+    return /*#__PURE__*/jsxs(MarkdownCodeBlock, {
+      children: [/*#__PURE__*/jsxs(MarkdownCodeBlockHeader, {
+        children: [language ? /*#__PURE__*/jsx(MarkdownCodeBlockLanguage, {
+          children: language
+        }) : null, /*#__PURE__*/jsx(MarkdownCodeBlockCopyButton, {
+          code: code
+        })]
+      }), /*#__PURE__*/jsx(MarkdownCodeBlockCode, {
+        children: code
+      })]
+    });
+  },
+  blockquote: function blockquote(_ref86) {
+    var children = _ref86.children;
+    return /*#__PURE__*/jsx(MarkdownBlockquote, {
       children: children
     });
   },
-  hr: function hr() {
-    return /*#__PURE__*/jsx(Divider, {
-      marginY: "spacing.4"
+  em: function em(_ref87) {
+    var children = _ref87.children;
+    return /*#__PURE__*/jsx(MarkdownItalic, {
+      children: children
     });
   },
-  i: function i(_ref1) {
-    var children = _ref1.children;
-    return /*#__PURE__*/jsx(Text, {
-      size: "medium",
-      variant: "caption",
-      color: "surface.text.gray.subtle",
+  i: function i(_ref88) {
+    var children = _ref88.children;
+    return /*#__PURE__*/jsx(MarkdownItalic, {
       children: children
     });
   },
-  p: function p(_ref10) {
-    var children = _ref10.children;
+  p: function p(_ref89) {
+    var children = _ref89.children;
     return /*#__PURE__*/jsx(Text, {
-      marginY: "spacing.2",
+      marginBottom: genUISpacingContract.textParagraphGap,
       size: "medium",
       color: "surface.text.gray.subtle",
       children: children
     });
   }
 };
-var RenderTextComponent = /*#__PURE__*/memo(function (_ref11) {
-  var content = _ref11.content;
+var RenderTextComponent = /*#__PURE__*/memo(function (_ref90) {
+  var content = _ref90.content;
   var _useGenUIAnimation = useGenUIAnimation(),
     isAnimating = _useGenUIAnimation.isAnimating,
     animateOptions = _useGenUIAnimation.animateOptions;
@@ -311,16 +789,16 @@ var RenderTextComponent = /*#__PURE__*/memo(function (_ref11) {
     })]
   });
 });
-var RenderChartComponent = /*#__PURE__*/memo(function (_ref12) {
-  var chartType = _ref12.chartType,
-    title = _ref12.title,
-    xAxis = _ref12.xAxis,
-    data = _ref12.data,
-    _ref12$unit = _ref12.unit,
-    unit = _ref12$unit === void 0 ? '' : _ref12$unit,
-    _ref12$variant = _ref12.variant,
-    variant = _ref12$variant === void 0 ? 'full' : _ref12$variant,
-    valueFormatter = _ref12.valueFormatter;
+var RenderChartComponent = /*#__PURE__*/memo(function (_ref91) {
+  var chartType = _ref91.chartType,
+    title = _ref91.title,
+    xAxis = _ref91.xAxis,
+    data = _ref91.data,
+    _ref91$unit = _ref91.unit,
+    unit = _ref91$unit === void 0 ? '' : _ref91$unit,
+    _ref91$variant = _ref91.variant,
+    variant = _ref91$variant === void 0 ? 'full' : _ref91$variant,
+    valueFormatter = _ref91.valueFormatter;
   var isTiny = variant === 'tiny';
   var chartHeight = isTiny ? '100px' : '350px';
   var minHeight = isTiny ? '100px' : '350px';
@@ -449,7 +927,7 @@ var RenderChartComponent = /*#__PURE__*/memo(function (_ref12) {
       minHeight: chartHeight,
       children: [title && !isTiny ? /*#__PURE__*/jsx(Text, {
         size: "large",
-        weight: "semibold",
+        weight: "regular",
         color: "surface.text.gray.subtle",
         marginBottom: "spacing.3",
         children: title
@@ -529,12 +1007,12 @@ function (prevProps, nextProps) {
 
 // Primitive copy button — just the icon + tooltip, no text label.
 // Compose this inside any cell that needs copy behaviour.
-var Copyable = function Copyable(_ref13) {
-  var value = _ref13.value;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    copied = _useState2[0],
-    setCopied = _useState2[1];
+var Copyable = function Copyable(_ref92) {
+  var value = _ref92.value;
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    copied = _useState4[0],
+    setCopied = _useState4[1];
   var handleCopy = function handleCopy() {
     void navigator.clipboard.writeText(value !== null && value !== void 0 ? value : '');
     setCopied(true);
@@ -558,8 +1036,8 @@ var Copyable = function Copyable(_ref13) {
 };
 
 // Text + copy icon
-var CopyableText = function CopyableText(_ref14) {
-  var value = _ref14.value;
+var CopyableText = function CopyableText(_ref93) {
+  var value = _ref93.value;
   return /*#__PURE__*/jsxs(Box, {
     display: "flex",
     alignItems: "center",
@@ -574,9 +1052,9 @@ var CopyableText = function CopyableText(_ref14) {
 };
 
 // Table cell link renderer - fires action for consumer to handle
-var TableCellLinkRenderer = function TableCellLinkRenderer(_ref15) {
+var TableCellLinkRenderer = function TableCellLinkRenderer(_ref94) {
   var _cell$text;
-  var cell = _ref15.cell;
+  var cell = _ref94.cell;
   var onActionClick = useGenUIAction();
   var linkNode = cell !== null && cell !== void 0 && cell.action ? /*#__PURE__*/jsx(Link, {
     variant: "button",
@@ -604,8 +1082,8 @@ var TableCellLinkRenderer = function TableCellLinkRenderer(_ref15) {
 };
 
 // Helper to render a single table cell based on its component type
-var RenderTableCellContent = function RenderTableCellContent(_ref16) {
-  var cell = _ref16.cell;
+var RenderTableCellContent = function RenderTableCellContent(_ref95) {
+  var cell = _ref95.cell;
   if (!cell) {
     return /*#__PURE__*/jsx(Text, {
       size: "medium",
@@ -749,10 +1227,10 @@ var rowActionIconMap = {
 };
 
 // Separate component for table row hover actions to avoid render issues
-var TableRowHoverActions = function TableRowHoverActions(_ref17) {
-  var rowActions = _ref17.rowActions,
-    rowIndex = _ref17.rowIndex,
-    rowData = _ref17.rowData;
+var TableRowHoverActions = function TableRowHoverActions(_ref96) {
+  var rowActions = _ref96.rowActions,
+    rowIndex = _ref96.rowIndex,
+    rowData = _ref96.rowData;
   var onActionClick = useGenUIAction();
   var createActionEvent = function createActionEvent(eventName) {
     return {
@@ -812,10 +1290,10 @@ var calculateColumnWidths = function calculateColumnWidths(headers, _rows) {
     return 'minmax(max-content, 1fr)';
   });
 };
-var RenderTableComponent = /*#__PURE__*/memo(function (_ref18) {
-  var headers = _ref18.headers,
-    rows = _ref18.rows,
-    rowActions = _ref18.rowActions;
+var RenderTableComponent = /*#__PURE__*/memo(function (_ref97) {
+  var headers = _ref97.headers,
+    rows = _ref97.rows,
+    rowActions = _ref97.rowActions;
   var columnWidths = useMemo(function () {
     return headers && rows ? calculateColumnWidths(headers, rows) : [];
   }, [headers, rows]);
@@ -835,7 +1313,7 @@ var RenderTableComponent = /*#__PURE__*/memo(function (_ref18) {
   return /*#__PURE__*/jsx(Box, {
     display: "flex",
     flexDirection: "column",
-    gap: "spacing.3",
+    gap: genUISpacingContract.compactCardRowGap,
     children: /*#__PURE__*/jsx(Table, {
       data: tableData,
       backgroundColor: "transparent",
@@ -878,21 +1356,21 @@ var RenderTableComponent = /*#__PURE__*/memo(function (_ref18) {
     })
   });
 });
-var RenderCardComponent = /*#__PURE__*/memo(function (_ref19) {
-  var title = _ref19.title,
-    description = _ref19.description,
-    footer = _ref19.footer,
-    children = _ref19.children;
+var RenderCardComponent = /*#__PURE__*/memo(function (_ref98) {
+  var title = _ref98.title,
+    description = _ref98.description,
+    footer = _ref98.footer,
+    children = _ref98.children;
   var hasHeader = title || description;
   return /*#__PURE__*/jsx(Box, {
     height: "100%",
     display: "flex",
     flexDirection: "column",
-    gap: "spacing.3",
+    gap: genUISpacingContract.compactCardRowGap,
     children: /*#__PURE__*/jsxs(Card, {
       width: "100%",
       height: "100%",
-      padding: "spacing.7",
+      padding: genUISpacingContract.compactCardPadding,
       children: [hasHeader ? /*#__PURE__*/jsx(CardHeader, {
         children: /*#__PURE__*/jsx(CardHeaderLeading, {
           title: title || '',
@@ -903,7 +1381,7 @@ var RenderCardComponent = /*#__PURE__*/memo(function (_ref19) {
         children: /*#__PURE__*/jsx(Box, {
           display: "flex",
           flexDirection: "column",
-          gap: "spacing.5",
+          gap: genUISpacingContract.compactCardRowGap,
           children: children.map(function (child, index) {
             return /*#__PURE__*/jsx(GenUIComponentRenderer, {
               component: child,
@@ -913,6 +1391,8 @@ var RenderCardComponent = /*#__PURE__*/memo(function (_ref19) {
         })
       }) : null, footer ? /*#__PURE__*/jsx(CardFooter, {
         showDivider: true,
+        marginTop: genUISpacingContract.cardTableToFooterAction,
+        paddingTop: genUISpacingContract.cardTableToFooterAction,
         children: /*#__PURE__*/jsx(CardFooterLeading, {
           subtitle: footer
         })
@@ -920,9 +1400,9 @@ var RenderCardComponent = /*#__PURE__*/memo(function (_ref19) {
     })
   });
 });
-var RenderBadgeComponent = /*#__PURE__*/memo(function (_ref20) {
-  var text = _ref20.text,
-    color = _ref20.color;
+var RenderBadgeComponent = /*#__PURE__*/memo(function (_ref99) {
+  var text = _ref99.text,
+    color = _ref99.color;
   if (!text) return null;
   return /*#__PURE__*/jsx(Badge, {
     color: color || 'neutral',
@@ -930,8 +1410,8 @@ var RenderBadgeComponent = /*#__PURE__*/memo(function (_ref20) {
     children: text
   });
 });
-var RenderSpacerComponent = /*#__PURE__*/memo(function (_ref21) {
-  var size = _ref21.size;
+var RenderSpacerComponent = /*#__PURE__*/memo(function (_ref100) {
+  var size = _ref100.size;
   if (!size) return null;
   var sizeMap = {
     small: 'spacing.2',
@@ -943,12 +1423,12 @@ var RenderSpacerComponent = /*#__PURE__*/memo(function (_ref21) {
     width: sizeMap[size]
   });
 });
-var RenderDividerComponent = /*#__PURE__*/memo(function (_ref22) {
-  var _ref22$orientation = _ref22.orientation,
-    orientation = _ref22$orientation === void 0 ? 'horizontal' : _ref22$orientation;
+var RenderDividerComponent = /*#__PURE__*/memo(function (_ref101) {
+  var _ref101$orientation = _ref101.orientation,
+    orientation = _ref101$orientation === void 0 ? 'horizontal' : _ref101$orientation;
   return /*#__PURE__*/jsx(Box, {
     display: "flex",
-    paddingY: "spacing.4",
+    paddingY: "spacing.7",
     children: /*#__PURE__*/jsx(Divider, _objectSpread({
       orientation: orientation
     }, orientation === 'vertical' ? {
@@ -956,11 +1436,11 @@ var RenderDividerComponent = /*#__PURE__*/memo(function (_ref22) {
     } : {}))
   });
 });
-var RenderStackComponent = /*#__PURE__*/memo(function (_ref23) {
-  var _ref23$direction = _ref23.direction,
-    direction = _ref23$direction === void 0 ? 'vertical' : _ref23$direction,
-    gap = _ref23.gap,
-    children = _ref23.children;
+var RenderStackComponent = /*#__PURE__*/memo(function (_ref102) {
+  var _ref102$direction = _ref102.direction,
+    direction = _ref102$direction === void 0 ? 'vertical' : _ref102$direction,
+    gap = _ref102.gap,
+    children = _ref102.children;
   if (!children || children.length === 0) {
     return null;
   }
@@ -983,10 +1463,10 @@ var RenderStackComponent = /*#__PURE__*/memo(function (_ref23) {
     })
   });
 });
-var RenderGridComponent = /*#__PURE__*/memo(function (_ref24) {
-  var columns = _ref24.columns,
-    gap = _ref24.gap,
-    children = _ref24.children;
+var RenderGridComponent = /*#__PURE__*/memo(function (_ref103) {
+  var columns = _ref103.columns,
+    gap = _ref103.gap,
+    children = _ref103.children;
   if (!columns || !children || children.length === 0) {
     return null;
   }
@@ -1009,8 +1489,8 @@ var RenderGridComponent = /*#__PURE__*/memo(function (_ref24) {
     })
   });
 });
-var RenderInfoGroupComponent = /*#__PURE__*/memo(function (_ref25) {
-  var items = _ref25.items;
+var RenderInfoGroupComponent = /*#__PURE__*/memo(function (_ref104) {
+  var items = _ref104.items;
   if (!items || items.length === 0) {
     return null;
   }
@@ -1062,9 +1542,9 @@ var RenderInfoGroupComponent = /*#__PURE__*/memo(function (_ref25) {
     })
   });
 });
-var RenderButtonComponent = /*#__PURE__*/memo(function (_ref26) {
-  var text = _ref26.text,
-    action = _ref26.action;
+var RenderButtonComponent = /*#__PURE__*/memo(function (_ref105) {
+  var text = _ref105.text,
+    action = _ref105.action;
   var onActionClick = useGenUIAction();
   if (!text) return null;
   var handleClick = function handleClick() {
@@ -1079,9 +1559,9 @@ var RenderButtonComponent = /*#__PURE__*/memo(function (_ref26) {
     children: text
   });
 });
-var RenderLinkComponent = /*#__PURE__*/memo(function (_ref27) {
-  var text = _ref27.text,
-    action = _ref27.action;
+var RenderLinkComponent = /*#__PURE__*/memo(function (_ref106) {
+  var text = _ref106.text,
+    action = _ref106.action;
   var onActionClick = useGenUIAction();
   if (!text) return null;
   if (!action) {
@@ -1106,13 +1586,13 @@ var RenderLinkComponent = /*#__PURE__*/memo(function (_ref27) {
     })
   });
 });
-var RenderAlertComponent = /*#__PURE__*/memo(function (_ref28) {
+var RenderAlertComponent = /*#__PURE__*/memo(function (_ref107) {
   var _actions$primary, _actions$secondary;
-  var title = _ref28.title,
-    description = _ref28.description,
-    _ref28$color = _ref28.color,
-    color = _ref28$color === void 0 ? 'neutral' : _ref28$color,
-    actions = _ref28.actions;
+  var title = _ref107.title,
+    description = _ref107.description,
+    _ref107$color = _ref107.color,
+    color = _ref107$color === void 0 ? 'neutral' : _ref107$color,
+    actions = _ref107.actions;
   var onActionClick = useGenUIAction();
   if (!title && !description) return null;
 
@@ -1162,9 +1642,9 @@ var RenderAlertComponent = /*#__PURE__*/memo(function (_ref28) {
     }
   });
 });
-var RenderAmountComponent = /*#__PURE__*/memo(function (_ref29) {
-  var value = _ref29.value,
-    currency = _ref29.currency;
+var RenderAmountComponent = /*#__PURE__*/memo(function (_ref108) {
+  var value = _ref108.value,
+    currency = _ref108.currency;
   var resolvedCurrency = currency || 'INR';
   var numValue = typeof value === 'string' ? parseFloat(value) : value;
   if (typeof numValue !== 'number' || isNaN(numValue)) {
@@ -1185,8 +1665,8 @@ var GenUIComponentRenderer = ComponentRenderer;
  * Default registry of built-in components
  */
 var createBuiltInRegistry = function createBuiltInRegistry() {
-  var _ref30;
-  return _ref30 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref30, ComponentType.TEXT, {
+  var _ref109;
+  return _ref109 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref109, ComponentType.TEXT, {
     renderer: RenderTextComponent
   }), ComponentType.CHART, {
     renderer: RenderChartComponent
@@ -1206,7 +1686,7 @@ var createBuiltInRegistry = function createBuiltInRegistry() {
     renderer: RenderGridComponent
   }), ComponentType.INFO_GROUP, {
     renderer: RenderInfoGroupComponent
-  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref30, ComponentType.BUTTON, {
+  }), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref109, ComponentType.BUTTON, {
     renderer: RenderButtonComponent
   }), ComponentType.LINK, {
     renderer: RenderLinkComponent
@@ -1217,5 +1697,5 @@ var createBuiltInRegistry = function createBuiltInRegistry() {
   });
 };
 
-export { ComponentType, createBuiltInRegistry };
+export { ComponentType, createBuiltInRegistry, genUISpacingContract, markdownComponents };
 //# sourceMappingURL=GenUIComponents.web.js.map