@xsolla/xui-markdown 0.102.0 → 0.104.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.
- package/native/index.js +8 -1
- package/native/index.js.map +1 -1
- package/native/index.mjs +8 -1
- package/native/index.mjs.map +1 -1
- package/package.json +3 -3
- package/web/index.js +8 -1
- package/web/index.js.map +1 -1
- package/web/index.mjs +8 -1
- package/web/index.mjs.map +1 -1
package/native/index.js
CHANGED
|
@@ -41,7 +41,14 @@ var import_xui_core = require("@xsolla/xui-core");
|
|
|
41
41
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
42
|
var MarkdownContainer = import_styled_components.default.div`
|
|
43
43
|
color: ${(props) => props.themeColors?.content?.primary || "white"};
|
|
44
|
-
font-family: ${(props) => props.fonts?.primary || "sans-serif"};
|
|
44
|
+
font-family: ${(props) => props.fonts?.body || props.fonts?.primary || "sans-serif"};
|
|
45
|
+
|
|
46
|
+
h1,
|
|
47
|
+
h2,
|
|
48
|
+
h3,
|
|
49
|
+
h4 {
|
|
50
|
+
font-family: ${(props) => props.fonts?.heading || props.fonts?.primary || "sans-serif"};
|
|
51
|
+
}
|
|
45
52
|
|
|
46
53
|
h1 {
|
|
47
54
|
font-size: 40px;
|
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 { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.primary || \"sans-serif\"};\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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAA6C;
|
|
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 { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) => 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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAA6C;AAyIvC;AAlIN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UAAU,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMlE,CAAC,UAAU,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,QAyFlF,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;AAavE,IAAM,WAAoC,CAAC,EAAE,UAAU,UAAU,MAAM;AAC5E,QAAM,EAAE,MAAM,QAAI,iCAAgB;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
|
package/native/index.mjs
CHANGED
|
@@ -5,7 +5,14 @@ import { useDesignSystem } from "@xsolla/xui-core";
|
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
var MarkdownContainer = styled.div`
|
|
7
7
|
color: ${(props) => props.themeColors?.content?.primary || "white"};
|
|
8
|
-
font-family: ${(props) => props.fonts?.primary || "sans-serif"};
|
|
8
|
+
font-family: ${(props) => props.fonts?.body || props.fonts?.primary || "sans-serif"};
|
|
9
|
+
|
|
10
|
+
h1,
|
|
11
|
+
h2,
|
|
12
|
+
h3,
|
|
13
|
+
h4 {
|
|
14
|
+
font-family: ${(props) => props.fonts?.heading || props.fonts?.primary || "sans-serif"};
|
|
15
|
+
}
|
|
9
16
|
|
|
10
17
|
h1 {
|
|
11
18
|
font-size: 40px;
|
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 { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.primary || \"sans-serif\"};\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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB,SAAS,uBAAoC;
|
|
1
|
+
{"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) => 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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB,SAAS,uBAAoC;AAyIvC;AAlIN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UAAU,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMlE,CAAC,UAAU,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,QAyFlF,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;AAavE,IAAM,WAAoC,CAAC,EAAE,UAAU,UAAU,MAAM;AAC5E,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;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.
|
|
3
|
+
"version": "0.104.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.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.104.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.104.0",
|
|
15
15
|
"react-markdown": "^9.0.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
package/web/index.js
CHANGED
|
@@ -41,7 +41,14 @@ var import_xui_core = require("@xsolla/xui-core");
|
|
|
41
41
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
42
|
var MarkdownContainer = import_styled_components.default.div`
|
|
43
43
|
color: ${(props) => props.themeColors?.content?.primary || "white"};
|
|
44
|
-
font-family: ${(props) => props.fonts?.primary || "sans-serif"};
|
|
44
|
+
font-family: ${(props) => props.fonts?.body || props.fonts?.primary || "sans-serif"};
|
|
45
|
+
|
|
46
|
+
h1,
|
|
47
|
+
h2,
|
|
48
|
+
h3,
|
|
49
|
+
h4 {
|
|
50
|
+
font-family: ${(props) => props.fonts?.heading || props.fonts?.primary || "sans-serif"};
|
|
51
|
+
}
|
|
45
52
|
|
|
46
53
|
h1 {
|
|
47
54
|
font-size: 40px;
|
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 { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.primary || \"sans-serif\"};\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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAA6C;
|
|
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 { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) => 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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,4BAA0B;AAC1B,+BAAmB;AACnB,sBAA6C;AAyIvC;AAlIN,IAAM,oBAAoB,yBAAAA,QAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UAAU,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMlE,CAAC,UAAU,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,QAyFlF,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;AAavE,IAAM,WAAoC,CAAC,EAAE,UAAU,UAAU,MAAM;AAC5E,QAAM,EAAE,MAAM,QAAI,iCAAgB;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MAEb,sDAAC,sBAAAC,SAAA,EAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":["styled","ReactMarkdown"]}
|
package/web/index.mjs
CHANGED
|
@@ -5,7 +5,14 @@ import { useDesignSystem } from "@xsolla/xui-core";
|
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
var MarkdownContainer = styled.div`
|
|
7
7
|
color: ${(props) => props.themeColors?.content?.primary || "white"};
|
|
8
|
-
font-family: ${(props) => props.fonts?.primary || "sans-serif"};
|
|
8
|
+
font-family: ${(props) => props.fonts?.body || props.fonts?.primary || "sans-serif"};
|
|
9
|
+
|
|
10
|
+
h1,
|
|
11
|
+
h2,
|
|
12
|
+
h3,
|
|
13
|
+
h4 {
|
|
14
|
+
font-family: ${(props) => props.fonts?.heading || props.fonts?.primary || "sans-serif"};
|
|
15
|
+
}
|
|
9
16
|
|
|
10
17
|
h1 {
|
|
11
18
|
font-size: 40px;
|
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 { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.primary || \"sans-serif\"};\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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB,SAAS,uBAAoC;
|
|
1
|
+
{"version":3,"sources":["../../src/Markdown.tsx"],"sourcesContent":["import React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport styled from \"styled-components\";\nimport { useDesignSystem, ThemeColors } from \"@xsolla/xui-core\";\n\ninterface MarkdownContainerProps {\n themeColors: ThemeColors;\n fonts: { primary: string; heading?: string; body?: string };\n}\n\nconst MarkdownContainer = styled.div<MarkdownContainerProps>`\n color: ${(props) => props.themeColors?.content?.primary || \"white\"};\n font-family: ${(props) => props.fonts?.body || props.fonts?.primary || \"sans-serif\"};\n\n h1,\n h2,\n h3,\n h4 {\n font-family: ${(props) => 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 {\n children: string;\n className?: string;\n}\n\nexport const Markdown: React.FC<MarkdownProps> = ({ children, className }) => {\n const { theme } = useDesignSystem();\n\n return (\n <MarkdownContainer\n className={className}\n themeColors={theme.colors}\n fonts={theme.fonts}\n >\n <ReactMarkdown>{children}</ReactMarkdown>\n </MarkdownContainer>\n );\n};\n"],"mappings":";AACA,OAAO,mBAAmB;AAC1B,OAAO,YAAY;AACnB,SAAS,uBAAoC;AAyIvC;AAlIN,IAAM,oBAAoB,OAAO;AAAA,WACtB,CAAC,UAAU,MAAM,aAAa,SAAS,WAAW,OAAO;AAAA,iBACnD,CAAC,UAAU,MAAM,OAAO,QAAQ,MAAM,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMlE,CAAC,UAAU,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,QAyFlF,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;AAavE,IAAM,WAAoC,CAAC,EAAE,UAAU,UAAU,MAAM;AAC5E,QAAM,EAAE,MAAM,IAAI,gBAAgB;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAa,MAAM;AAAA,MACnB,OAAO,MAAM;AAAA,MAEb,8BAAC,iBAAe,UAAS;AAAA;AAAA,EAC3B;AAEJ;","names":[]}
|