@xsolla/xui-markdown 0.219.0 → 0.221.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +15 -0
  2. package/native/index.d.mts +7 -0
  3. package/native/index.d.ts +7 -0
  4. package/native/index.js +14 -11
  5. package/native/index.js.map +1 -1
  6. package/native/index.mjs +14 -11
  7. package/native/index.mjs.map +1 -1
  8. package/package.json +3 -3
  9. package/web/index.d.mts +7 -0
  10. package/web/index.d.ts +7 -0
  11. package/web/index.js +14 -11
  12. package/web/index.js.map +1 -1
  13. package/web/index.mjs +14 -11
  14. package/web/index.mjs.map +1 -1
package/README.md CHANGED
@@ -39,6 +39,21 @@ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
39
39
 
40
40
  The component pulls heading and body fonts from the resolved theme (`theme.fonts.heading`, `theme.fonts.body`, falling back to `theme.fonts.primary`) and uses `theme.colors.content.primary`, `theme.colors.border.brand`, and `theme.colors.control.link.primary` for styling.
41
41
 
42
+ ### Block spacing
43
+
44
+ Headings, paragraphs and images are spaced with **padding** (their margins are zeroed). The values come from `theme.sizing.markdown()`, which mirrors the Figma `markdown/{element}/padding-top|padding-bottom` tokens:
45
+
46
+ | Element | `padding-top` | `padding-bottom` |
47
+ | ------- | ------------- | ---------------- |
48
+ | `h1` | 40px | 8px |
49
+ | `h2` | 32px | 8px |
50
+ | `h3` | 16px | 8px |
51
+ | `h4` | 8px | 8px |
52
+ | `p` | 0 | 16px |
53
+ | `img` | 0 | 24px |
54
+
55
+ A paragraph inside a blockquote keeps `padding-bottom: 0`.
56
+
42
57
  ### Supported syntax
43
58
 
44
59
  | Element | Syntax |
package/native/index.d.mts CHANGED
@@ -6,6 +6,13 @@ interface MarkdownProps extends ThemeOverrideProps {
6
6
  className?: string;
7
7
  testID?: string;
8
8
  }
9
+ /**
10
+ * Renders markdown with theme-aware typography.
11
+ *
12
+ * Block spacing for headings (h1–h4), paragraphs and images comes from
13
+ * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),
14
+ * matching the Figma `markdown/*` padding tokens.
15
+ */
9
16
  declare const Markdown: React.FC<MarkdownProps>;
10
17
 
11
18
  export { Markdown, type MarkdownProps };
package/native/index.d.ts CHANGED
@@ -6,6 +6,13 @@ interface MarkdownProps extends ThemeOverrideProps {
6
6
  className?: string;
7
7
  testID?: string;
8
8
  }
9
+ /**
10
+ * Renders markdown with theme-aware typography.
11
+ *
12
+ * Block spacing for headings (h1–h4), paragraphs and images comes from
13
+ * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),
14
+ * matching the Figma `markdown/*` padding tokens.
15
+ */
9
16
  declare const Markdown: React.FC<MarkdownProps>;
10
17
 
11
18
  export { Markdown, type MarkdownProps };
package/native/index.js CHANGED
@@ -55,8 +55,8 @@ var MarkdownContainer = import_styled_components.default.div`
55
55
  font-weight: 700;
56
56
  line-height: 48px;
57
57
  margin: 0;
58
- padding-top: 0px;
59
- padding-bottom: 6px;
58
+ padding-top: ${(props) => props.sizing.h1.paddingTop}px;
59
+ padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;
60
60
  }
61
61
 
62
62
  h2 {
@@ -64,8 +64,8 @@ var MarkdownContainer = import_styled_components.default.div`
64
64
  font-weight: 700;
65
65
  line-height: 38px;
66
66
  margin: 0;
67
- padding-top: 2px;
68
- padding-bottom: 8px;
67
+ padding-top: ${(props) => props.sizing.h2.paddingTop}px;
68
+ padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;
69
69
  }
70
70
 
71
71
  h3 {
@@ -73,8 +73,8 @@ var MarkdownContainer = import_styled_components.default.div`
73
73
  font-weight: 700;
74
74
  line-height: 34px;
75
75
  margin: 0;
76
- padding-top: 4px;
77
- padding-bottom: 8px;
76
+ padding-top: ${(props) => props.sizing.h3.paddingTop}px;
77
+ padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;
78
78
  }
79
79
 
80
80
  h4 {
@@ -82,8 +82,8 @@ var MarkdownContainer = import_styled_components.default.div`
82
82
  font-weight: 700;
83
83
  line-height: 28px;
84
84
  margin: 0;
85
- padding-top: 6px;
86
- padding-bottom: 10px;
85
+ padding-top: ${(props) => props.sizing.h4.paddingTop}px;
86
+ padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;
87
87
  }
88
88
 
89
89
  p {
@@ -91,15 +91,17 @@ var MarkdownContainer = import_styled_components.default.div`
91
91
  font-weight: 400;
92
92
  line-height: 22px;
93
93
  margin: 0;
94
- padding-top: 0px;
95
- padding-bottom: 4px;
94
+ padding-top: ${(props) => props.sizing.p.paddingTop}px;
95
+ padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;
96
96
  }
97
97
 
98
98
  img {
99
99
  max-width: 100%;
100
100
  height: auto;
101
101
  display: block;
102
- margin: 16px 0;
102
+ margin: 0;
103
+ padding-top: ${(props) => props.sizing.image.paddingTop}px;
104
+ padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;
103
105
  }
104
106
 
105
107
  ul,
@@ -168,6 +170,7 @@ var Markdown = ({
168
170
  className,
169
171
  themeColors: theme.colors,
170
172
  fonts: theme.fonts,
173
+ sizing: theme.sizing.markdown(),
171
174
  "data-testid": testID,
172
175
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { children })
173
176
  }
package/native/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AAsJD;AA5IN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ntype MarkdownSpacing = { paddingTop: number; paddingBottom: number };\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /**\n * Block paddings from `theme.sizing.markdown()` (Figma\n * `markdown/{element}/padding-top|bottom`).\n */\n sizing: {\n h1: MarkdownSpacing;\n h2: MarkdownSpacing;\n h3: MarkdownSpacing;\n h4: MarkdownSpacing;\n p: MarkdownSpacing;\n image: MarkdownSpacing;\n };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h1.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h2.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h3.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h4.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: ${(props) => props.sizing.p.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0;\n padding-top: ${(props) => props.sizing.image.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\n/**\n * Renders markdown with theme-aware typography.\n *\n * Block spacing for headings (h1–h4), paragraphs and images comes from\n * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),\n * matching the Figma `markdown/*` padding tokens.\n */\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n sizing={theme.sizing.markdown()}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AA8KD;AAtJN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ/C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,EAAE,UAAU;AAAA,sBACjC,CAAC,UAAU,MAAM,OAAO,EAAE,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ1C,CAAC,UAAU,MAAM,OAAO,MAAM,UAAU;AAAA,sBACrC,CAAC,UAAU,MAAM,OAAO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqCzD,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM,OAAO,SAAS;AAAA,MAC9B,eAAa;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
package/native/index.mjs CHANGED
@@ -21,8 +21,8 @@ var MarkdownContainer = styled.div`
21
21
  font-weight: 700;
22
22
  line-height: 48px;
23
23
  margin: 0;
24
- padding-top: 0px;
25
- padding-bottom: 6px;
24
+ padding-top: ${(props) => props.sizing.h1.paddingTop}px;
25
+ padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;
26
26
  }
27
27
 
28
28
  h2 {
@@ -30,8 +30,8 @@ var MarkdownContainer = styled.div`
30
30
  font-weight: 700;
31
31
  line-height: 38px;
32
32
  margin: 0;
33
- padding-top: 2px;
34
- padding-bottom: 8px;
33
+ padding-top: ${(props) => props.sizing.h2.paddingTop}px;
34
+ padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;
35
35
  }
36
36
 
37
37
  h3 {
@@ -39,8 +39,8 @@ var MarkdownContainer = styled.div`
39
39
  font-weight: 700;
40
40
  line-height: 34px;
41
41
  margin: 0;
42
- padding-top: 4px;
43
- padding-bottom: 8px;
42
+ padding-top: ${(props) => props.sizing.h3.paddingTop}px;
43
+ padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;
44
44
  }
45
45
 
46
46
  h4 {
@@ -48,8 +48,8 @@ var MarkdownContainer = styled.div`
48
48
  font-weight: 700;
49
49
  line-height: 28px;
50
50
  margin: 0;
51
- padding-top: 6px;
52
- padding-bottom: 10px;
51
+ padding-top: ${(props) => props.sizing.h4.paddingTop}px;
52
+ padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;
53
53
  }
54
54
 
55
55
  p {
@@ -57,15 +57,17 @@ var MarkdownContainer = styled.div`
57
57
  font-weight: 400;
58
58
  line-height: 22px;
59
59
  margin: 0;
60
- padding-top: 0px;
61
- padding-bottom: 4px;
60
+ padding-top: ${(props) => props.sizing.p.paddingTop}px;
61
+ padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;
62
62
  }
63
63
 
64
64
  img {
65
65
  max-width: 100%;
66
66
  height: auto;
67
67
  display: block;
68
- margin: 16px 0;
68
+ margin: 0;
69
+ padding-top: ${(props) => props.sizing.image.paddingTop}px;
70
+ padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;
69
71
  }
70
72
 
71
73
  ul,
@@ -134,6 +136,7 @@ var Markdown = ({
134
136
  className,
135
137
  themeColors: theme.colors,
136
138
  fonts: theme.fonts,
139
+ sizing: theme.sizing.markdown(),
137
140
  "data-testid": testID,
138
141
  children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
139
142
  }
package/native/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AAsJD;AA5IN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ntype MarkdownSpacing = { paddingTop: number; paddingBottom: number };\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /**\n * Block paddings from `theme.sizing.markdown()` (Figma\n * `markdown/{element}/padding-top|bottom`).\n */\n sizing: {\n h1: MarkdownSpacing;\n h2: MarkdownSpacing;\n h3: MarkdownSpacing;\n h4: MarkdownSpacing;\n p: MarkdownSpacing;\n image: MarkdownSpacing;\n };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h1.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h2.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h3.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h4.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: ${(props) => props.sizing.p.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0;\n padding-top: ${(props) => props.sizing.image.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\n/**\n * Renders markdown with theme-aware typography.\n *\n * Block spacing for headings (h1–h4), paragraphs and images comes from\n * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),\n * matching the Figma `markdown/*` padding tokens.\n */\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n sizing={theme.sizing.markdown()}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AA8KD;AAtJN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ/C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,EAAE,UAAU;AAAA,sBACjC,CAAC,UAAU,MAAM,OAAO,EAAE,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ1C,CAAC,UAAU,MAAM,OAAO,MAAM,UAAU;AAAA,sBACrC,CAAC,UAAU,MAAM,OAAO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqCzD,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM,OAAO,SAAS;AAAA,MAC9B,eAAa;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-markdown",
3
- "version": "0.219.0",
3
+ "version": "0.221.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.219.0",
14
- "@xsolla/xui-primitives-core": "0.219.0",
13
+ "@xsolla/xui-core": "0.221.0",
14
+ "@xsolla/xui-primitives-core": "0.221.0",
15
15
  "react-markdown": "^9.0.0"
16
16
  },
17
17
  "peerDependencies": {
package/web/index.d.mts CHANGED
@@ -6,6 +6,13 @@ interface MarkdownProps extends ThemeOverrideProps {
6
6
  className?: string;
7
7
  testID?: string;
8
8
  }
9
+ /**
10
+ * Renders markdown with theme-aware typography.
11
+ *
12
+ * Block spacing for headings (h1–h4), paragraphs and images comes from
13
+ * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),
14
+ * matching the Figma `markdown/*` padding tokens.
15
+ */
9
16
  declare const Markdown: React.FC<MarkdownProps>;
10
17
 
11
18
  export { Markdown, type MarkdownProps };
package/web/index.d.ts CHANGED
@@ -6,6 +6,13 @@ interface MarkdownProps extends ThemeOverrideProps {
6
6
  className?: string;
7
7
  testID?: string;
8
8
  }
9
+ /**
10
+ * Renders markdown with theme-aware typography.
11
+ *
12
+ * Block spacing for headings (h1–h4), paragraphs and images comes from
13
+ * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),
14
+ * matching the Figma `markdown/*` padding tokens.
15
+ */
9
16
  declare const Markdown: React.FC<MarkdownProps>;
10
17
 
11
18
  export { Markdown, type MarkdownProps };
package/web/index.js CHANGED
@@ -55,8 +55,8 @@ var MarkdownContainer = import_styled_components.default.div`
55
55
  font-weight: 700;
56
56
  line-height: 48px;
57
57
  margin: 0;
58
- padding-top: 0px;
59
- padding-bottom: 6px;
58
+ padding-top: ${(props) => props.sizing.h1.paddingTop}px;
59
+ padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;
60
60
  }
61
61
 
62
62
  h2 {
@@ -64,8 +64,8 @@ var MarkdownContainer = import_styled_components.default.div`
64
64
  font-weight: 700;
65
65
  line-height: 38px;
66
66
  margin: 0;
67
- padding-top: 2px;
68
- padding-bottom: 8px;
67
+ padding-top: ${(props) => props.sizing.h2.paddingTop}px;
68
+ padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;
69
69
  }
70
70
 
71
71
  h3 {
@@ -73,8 +73,8 @@ var MarkdownContainer = import_styled_components.default.div`
73
73
  font-weight: 700;
74
74
  line-height: 34px;
75
75
  margin: 0;
76
- padding-top: 4px;
77
- padding-bottom: 8px;
76
+ padding-top: ${(props) => props.sizing.h3.paddingTop}px;
77
+ padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;
78
78
  }
79
79
 
80
80
  h4 {
@@ -82,8 +82,8 @@ var MarkdownContainer = import_styled_components.default.div`
82
82
  font-weight: 700;
83
83
  line-height: 28px;
84
84
  margin: 0;
85
- padding-top: 6px;
86
- padding-bottom: 10px;
85
+ padding-top: ${(props) => props.sizing.h4.paddingTop}px;
86
+ padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;
87
87
  }
88
88
 
89
89
  p {
@@ -91,15 +91,17 @@ var MarkdownContainer = import_styled_components.default.div`
91
91
  font-weight: 400;
92
92
  line-height: 22px;
93
93
  margin: 0;
94
- padding-top: 0px;
95
- padding-bottom: 4px;
94
+ padding-top: ${(props) => props.sizing.p.paddingTop}px;
95
+ padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;
96
96
  }
97
97
 
98
98
  img {
99
99
  max-width: 100%;
100
100
  height: auto;
101
101
  display: block;
102
- margin: 16px 0;
102
+ margin: 0;
103
+ padding-top: ${(props) => props.sizing.image.paddingTop}px;
104
+ padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;
103
105
  }
104
106
 
105
107
  ul,
@@ -168,6 +170,7 @@ var Markdown = ({
168
170
  className,
169
171
  themeColors: theme.colors,
170
172
  fonts: theme.fonts,
173
+ sizing: theme.sizing.markdown(),
171
174
  "data-testid": testID,
172
175
  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { children })
173
176
  }
package/web/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AAsJD;AA5IN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
1
+ {"version":3,"sources":["../../src/index.tsx","../../src/Markdown.tsx"],"sourcesContent":["export * from \"./Markdown\";\n","import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ntype MarkdownSpacing = { paddingTop: number; paddingBottom: number };\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /**\n * Block paddings from `theme.sizing.markdown()` (Figma\n * `markdown/{element}/padding-top|bottom`).\n */\n sizing: {\n h1: MarkdownSpacing;\n h2: MarkdownSpacing;\n h3: MarkdownSpacing;\n h4: MarkdownSpacing;\n p: MarkdownSpacing;\n image: MarkdownSpacing;\n };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h1.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h2.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h3.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h4.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: ${(props) => props.sizing.p.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0;\n padding-top: ${(props) => props.sizing.image.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\n/**\n * Renders markdown with theme-aware typography.\n *\n * Block spacing for headings (h1–h4), paragraphs and images comes from\n * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),\n * matching the Figma `markdown/*` padding tokens.\n */\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n sizing={theme.sizing.markdown()}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAIO;AA8KD;AAtJN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ/C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,EAAE,UAAU;AAAA,sBACjC,CAAC,UAAU,MAAM,OAAO,EAAE,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ1C,CAAC,UAAU,MAAM,OAAO,MAAM,UAAU;AAAA,sBACrC,CAAC,UAAU,MAAM,OAAO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqCzD,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,QAAI,kCAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM,OAAO,SAAS;AAAA,MAC9B,eAAa;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
package/web/index.mjs CHANGED
@@ -21,8 +21,8 @@ var MarkdownContainer = styled.div`
21
21
  font-weight: 700;
22
22
  line-height: 48px;
23
23
  margin: 0;
24
- padding-top: 0px;
25
- padding-bottom: 6px;
24
+ padding-top: ${(props) => props.sizing.h1.paddingTop}px;
25
+ padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;
26
26
  }
27
27
 
28
28
  h2 {
@@ -30,8 +30,8 @@ var MarkdownContainer = styled.div`
30
30
  font-weight: 700;
31
31
  line-height: 38px;
32
32
  margin: 0;
33
- padding-top: 2px;
34
- padding-bottom: 8px;
33
+ padding-top: ${(props) => props.sizing.h2.paddingTop}px;
34
+ padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;
35
35
  }
36
36
 
37
37
  h3 {
@@ -39,8 +39,8 @@ var MarkdownContainer = styled.div`
39
39
  font-weight: 700;
40
40
  line-height: 34px;
41
41
  margin: 0;
42
- padding-top: 4px;
43
- padding-bottom: 8px;
42
+ padding-top: ${(props) => props.sizing.h3.paddingTop}px;
43
+ padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;
44
44
  }
45
45
 
46
46
  h4 {
@@ -48,8 +48,8 @@ var MarkdownContainer = styled.div`
48
48
  font-weight: 700;
49
49
  line-height: 28px;
50
50
  margin: 0;
51
- padding-top: 6px;
52
- padding-bottom: 10px;
51
+ padding-top: ${(props) => props.sizing.h4.paddingTop}px;
52
+ padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;
53
53
  }
54
54
 
55
55
  p {
@@ -57,15 +57,17 @@ var MarkdownContainer = styled.div`
57
57
  font-weight: 400;
58
58
  line-height: 22px;
59
59
  margin: 0;
60
- padding-top: 0px;
61
- padding-bottom: 4px;
60
+ padding-top: ${(props) => props.sizing.p.paddingTop}px;
61
+ padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;
62
62
  }
63
63
 
64
64
  img {
65
65
  max-width: 100%;
66
66
  height: auto;
67
67
  display: block;
68
- margin: 16px 0;
68
+ margin: 0;
69
+ padding-top: ${(props) => props.sizing.image.paddingTop}px;
70
+ padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;
69
71
  }
70
72
 
71
73
  ul,
@@ -134,6 +136,7 @@ var Markdown = ({
134
136
  className,
135
137
  themeColors: theme.colors,
136
138
  fonts: theme.fonts,
139
+ sizing: theme.sizing.markdown(),
137
140
  "data-testid": testID,
138
141
  children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
139
142
  }
package/web/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 6px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: 2px;\n padding-bottom: 8px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: 4px;\n padding-bottom: 8px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: 6px;\n padding-bottom: 10px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: 0px;\n padding-bottom: 4px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 16px 0;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AAsJD;AA5IN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAyF1D,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,eAAa;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}
1
+ {"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport {\n useResolvedTheme,\n ThemeColors,\n type ThemeOverrideProps,\n} from \"@xsolla/xui-core\";\n\ntype MarkdownSpacing = { paddingTop: number; paddingBottom: number };\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n /**\n * Block paddings from `theme.sizing.markdown()` (Figma\n * `markdown/{element}/padding-top|bottom`).\n */\n sizing: {\n h1: MarkdownSpacing;\n h2: MarkdownSpacing;\n h3: MarkdownSpacing;\n h4: MarkdownSpacing;\n p: MarkdownSpacing;\n image: MarkdownSpacing;\n };\n testID?: string;\n /** Test ID for testing frameworks (web) */\n \"data-testid\"?: string;\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) =>\n props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) =>\n props.fonts?.heading || props.fonts?.primary || \"sans-serif\"};\n }\n\n h1 {\n font-size: 40px;\n font-weight: 700;\n line-height: 48px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h1.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h1.paddingBottom}px;\n }\n\n h2 {\n font-size: 32px;\n font-weight: 700;\n line-height: 38px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h2.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h2.paddingBottom}px;\n }\n\n h3 {\n font-size: 28px;\n font-weight: 700;\n line-height: 34px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h3.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h3.paddingBottom}px;\n }\n\n h4 {\n font-size: 24px;\n font-weight: 700;\n line-height: 28px;\n margin: 0;\n padding-top: ${(props) => props.sizing.h4.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.h4.paddingBottom}px;\n }\n\n p {\n font-size: 16px;\n font-weight: 400;\n line-height: 22px;\n margin: 0;\n padding-top: ${(props) => props.sizing.p.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.p.paddingBottom}px;\n }\n\n img {\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0;\n padding-top: ${(props) => props.sizing.image.paddingTop}px;\n padding-bottom: ${(props) => props.sizing.image.paddingBottom}px;\n }\n\n ul,\n ol {\n margin: 8px 0;\n padding-left: 24px;\n }\n\n li {\n font-size: 16px;\n line-height: 22px;\n margin-bottom: 4px;\n }\n\n code {\n background: rgba(255, 255, 255, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n font-family: monospace;\n }\n\n pre {\n background: rgba(255, 255, 255, 0.05);\n padding: 16px;\n border-radius: 8px;\n overflow-x: auto;\n margin: 16px 0;\n\n code {\n background: none;\n padding: 0;\n }\n }\n\n blockquote {\n border-left: 4px solid\n ${(props) => props.themeColors?.border?.brand || \"#66e6ff\"};\n margin: 16px 0;\n padding: 8px 16px;\n background: rgba(102, 230, 255, 0.05);\n\n p {\n padding-bottom: 0;\n }\n }\n\n a {\n color: ${(props) => props.themeColors?.control?.link?.primary || \"#66e6ff\"};\n text-decoration: none;\n &:hover {\n text-decoration: underline;\n }\n }\n`;\n\nexport interface MarkdownProps extends ThemeOverrideProps {\n children: string;\n className?: string;\n testID?: string;\n}\n\n/**\n * Renders markdown with theme-aware typography.\n *\n * Block spacing for headings (h1–h4), paragraphs and images comes from\n * `theme.sizing.markdown()` and is applied as padding (margins are zeroed),\n * matching the Figma `markdown/*` padding tokens.\n */\nexport const Markdown: React.FC<MarkdownProps> = ({\n children,\n className,\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n sizing={theme.sizing.markdown()}\n data-testid={testID}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB;AAAA,EACE;AAAA,OAGK;AA8KD;AAtJN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UACd,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAM1C,CAAC,UACd,MAAM,OAAO,WAAW,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ/C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,GAAG,UAAU;AAAA,sBAClC,CAAC,UAAU,MAAM,OAAO,GAAG,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ3C,CAAC,UAAU,MAAM,OAAO,EAAE,UAAU;AAAA,sBACjC,CAAC,UAAU,MAAM,OAAO,EAAE,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQ1C,CAAC,UAAU,MAAM,OAAO,MAAM,UAAU;AAAA,sBACrC,CAAC,UAAU,MAAM,OAAO,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAqCzD,CAAC,UAAU,MAAM,aAAa,QAAQ,SAAS,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAWnD,CAAC,UAAU,MAAM,aAAa,SAAS,MAAM,WAAW,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvE,IAAM,WAAoC,CAAC;AAAA,EAChD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,IAAI,iBAAiB,EAAE,WAAW,oBAAoB,CAAC;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MACb,QAAQ,MAAM,OAAO,SAAS;AAAA,MAC9B,eAAa;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}