@medusajs/ui 2.2.2 → 2.2.3-next-20231124092248

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.
@@ -41,22 +41,62 @@ const Body = ({ className, ...props }) => {
41
41
  ...prism_react_renderer_1.themes.palenight,
42
42
  plain: {
43
43
  color: "rgba(249, 250, 251, 1)",
44
- backgroundColor: "#111827",
44
+ backgroundColor: "rgb(17,24,39)",
45
45
  },
46
46
  styles: [
47
+ ...prism_react_renderer_1.themes.palenight.styles,
47
48
  {
48
49
  types: ["keyword"],
49
50
  style: {
50
- color: "var(--fg-on-color)",
51
+ fontStyle: "normal",
52
+ color: "rgb(187,160,255)",
53
+ },
54
+ },
55
+ {
56
+ types: ["punctuation", "operator"],
57
+ style: {
58
+ fontStyle: "normal",
59
+ color: "rgb(255,255,255)",
60
+ },
61
+ },
62
+ {
63
+ types: ["constant", "boolean"],
64
+ style: {
65
+ fontStyle: "normal",
66
+ color: "rgb(187,77,96)",
67
+ },
68
+ },
69
+ {
70
+ types: ["function"],
71
+ style: {
72
+ fontStyle: "normal",
73
+ color: "rgb(27,198,242)",
74
+ },
75
+ },
76
+ {
77
+ types: ["number"],
78
+ style: {
79
+ color: "rgb(247,208,25)",
51
80
  },
52
81
  },
53
82
  {
54
83
  types: ["maybe-class-name"],
55
84
  style: {
56
- color: "rgb(255, 203, 107)",
85
+ color: "rgb(255,203,107)",
86
+ },
87
+ },
88
+ {
89
+ types: ["string"],
90
+ style: {
91
+ color: "rgb(73,209,110)",
92
+ },
93
+ },
94
+ {
95
+ types: ["comment"],
96
+ style: {
97
+ color: "rgb(52,211,153)",
57
98
  },
58
99
  },
59
- ...prism_react_renderer_1.themes.palenight.styles,
60
100
  ],
61
101
  }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: (0, clx_1.clx)("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
62
102
  "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
@@ -1 +1 @@
1
- {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"#111827\",\n },\n styles: [\n {\n types: [\"keyword\"],\n style: {\n color: \"var(--fg-on-color)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255, 203, 107)\",\n },\n },\n ...themes.palenight.styles,\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
1
+ {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
@@ -37,22 +37,62 @@ const Body = ({ className, ...props }) => {
37
37
  ...themes.palenight,
38
38
  plain: {
39
39
  color: "rgba(249, 250, 251, 1)",
40
- backgroundColor: "#111827",
40
+ backgroundColor: "rgb(17,24,39)",
41
41
  },
42
42
  styles: [
43
+ ...themes.palenight.styles,
43
44
  {
44
45
  types: ["keyword"],
45
46
  style: {
46
- color: "var(--fg-on-color)",
47
+ fontStyle: "normal",
48
+ color: "rgb(187,160,255)",
49
+ },
50
+ },
51
+ {
52
+ types: ["punctuation", "operator"],
53
+ style: {
54
+ fontStyle: "normal",
55
+ color: "rgb(255,255,255)",
56
+ },
57
+ },
58
+ {
59
+ types: ["constant", "boolean"],
60
+ style: {
61
+ fontStyle: "normal",
62
+ color: "rgb(187,77,96)",
63
+ },
64
+ },
65
+ {
66
+ types: ["function"],
67
+ style: {
68
+ fontStyle: "normal",
69
+ color: "rgb(27,198,242)",
70
+ },
71
+ },
72
+ {
73
+ types: ["number"],
74
+ style: {
75
+ color: "rgb(247,208,25)",
47
76
  },
48
77
  },
49
78
  {
50
79
  types: ["maybe-class-name"],
51
80
  style: {
52
- color: "rgb(255, 203, 107)",
81
+ color: "rgb(255,203,107)",
82
+ },
83
+ },
84
+ {
85
+ types: ["string"],
86
+ style: {
87
+ color: "rgb(73,209,110)",
88
+ },
89
+ },
90
+ {
91
+ types: ["comment"],
92
+ style: {
93
+ color: "rgb(52,211,153)",
53
94
  },
54
95
  },
55
- ...themes.palenight.styles,
56
96
  ],
57
97
  }, code: active.code, language: active.language }, ({ style, tokens, getLineProps, getTokenProps }) => (React.createElement("pre", { className: clx("txt-compact-small whitespace-pre-wrap bg-transparent font-mono", {
58
98
  "grid grid-cols-[auto,1fr] gap-x-4": !active.hideLineNumbers,
@@ -1 +1 @@
1
- {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"#111827\",\n },\n styles: [\n {\n types: [\"keyword\"],\n style: {\n color: \"var(--fg-on-color)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255, 203, 107)\",\n },\n },\n ...themes.palenight.styles,\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
1
+ {"version":3,"file":"code-block.js","sourceRoot":"","sources":["../../../../src/components/code-block/code-block.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\nimport { Highlight, themes } from \"prism-react-renderer\"\nimport * as React from \"react\"\n\nimport { Copy } from \"@/components/copy\"\nimport { clx } from \"@/utils/clx\"\n\nexport type CodeSnippet = {\n label: string\n language: string\n code: string\n hideLineNumbers?: boolean\n hideCopy?: boolean\n}\n\ntype CodeBlockState = {\n snippets: CodeSnippet[]\n active: CodeSnippet\n setActive: (active: CodeSnippet) => void\n} | null\n\nconst CodeBlockContext = React.createContext<CodeBlockState>(null)\n\nconst useCodeBlockContext = () => {\n const context = React.useContext(CodeBlockContext)\n\n if (context === null)\n throw new Error(\n \"useCodeBlockContext can only be used within a CodeBlockContext\"\n )\n\n return context\n}\n\ntype RootProps = {\n snippets: CodeSnippet[]\n}\n\nconst Root = ({\n snippets,\n className,\n children,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & RootProps) => {\n const [active, setActive] = React.useState(snippets[0])\n\n return (\n <CodeBlockContext.Provider value={{ snippets, active, setActive }}>\n <div\n className={clx(\n \"border-ui-code-border flex flex-col overflow-hidden rounded-lg border\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n </CodeBlockContext.Provider>\n )\n}\n\ntype HeaderProps = {\n hideLabels?: boolean\n}\n\nconst HeaderComponent = ({\n children,\n className,\n hideLabels = false,\n ...props\n}: React.HTMLAttributes<HTMLDivElement> & HeaderProps) => {\n const { snippets, active, setActive } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"border-b-ui-code-border bg-ui-code-bg-header flex items-center gap-2 border-b px-4 py-3\",\n className\n )}\n {...props}\n >\n {!hideLabels &&\n snippets.map((snippet) => (\n <div\n className={clx(\n \"text-ui-code-text-subtle txt-compact-small-plus cursor-pointer rounded-full border border-transparent px-3 py-2 transition-all\",\n {\n \"text-ui-code-text-base border-ui-code-border bg-ui-code-bg-base cursor-default\":\n active.label === snippet.label,\n }\n )}\n key={snippet.label}\n onClick={() => setActive(snippet)}\n >\n {snippet.label}\n </div>\n ))}\n {children}\n </div>\n )\n}\n\nconst Meta = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n return (\n <div\n className={clx(\"text-ui-code-text-subtle ml-auto\", className)}\n {...props}\n />\n )\n}\n\nconst Header = Object.assign(HeaderComponent, { Meta })\n\nconst Body = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLDivElement>) => {\n const { active } = useCodeBlockContext()\n return (\n <div\n className={clx(\n \"bg-ui-code-bg-base relative h-full overflow-y-auto p-4\",\n className\n )}\n {...props}\n >\n {!active.hideCopy && (\n <Copy\n content={active.code}\n className=\"text-ui-code-icon absolute right-4 top-4\"\n />\n )}\n <div className=\"max-w-[90%]\">\n <Highlight\n theme={{\n ...themes.palenight,\n plain: {\n color: \"rgba(249, 250, 251, 1)\",\n backgroundColor: \"rgb(17,24,39)\",\n },\n styles: [\n ...themes.palenight.styles,\n {\n types: [\"keyword\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,160,255)\",\n },\n },\n {\n types: [\"punctuation\", \"operator\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(255,255,255)\",\n },\n },\n {\n types: [\"constant\", \"boolean\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(187,77,96)\",\n },\n },\n {\n types: [\"function\"],\n style: {\n fontStyle: \"normal\",\n color: \"rgb(27,198,242)\",\n },\n },\n {\n types: [\"number\"],\n style: {\n color: \"rgb(247,208,25)\",\n },\n },\n {\n types: [\"maybe-class-name\"],\n style: {\n color: \"rgb(255,203,107)\",\n },\n },\n {\n types: [\"string\"],\n style: {\n color: \"rgb(73,209,110)\",\n },\n },\n {\n types: [\"comment\"],\n style: {\n color: \"rgb(52,211,153)\",\n },\n },\n ],\n }}\n code={active.code}\n language={active.language}\n >\n {({ style, tokens, getLineProps, getTokenProps }) => (\n <pre\n className={clx(\n \"txt-compact-small whitespace-pre-wrap bg-transparent font-mono\",\n {\n \"grid grid-cols-[auto,1fr] gap-x-4\": !active.hideLineNumbers,\n }\n )}\n style={{\n ...style,\n background: \"transparent\",\n }}\n >\n {!active.hideLineNumbers && (\n <div role=\"presentation\" className=\"flex flex-col text-right\">\n {tokens.map((_, i) => (\n <span\n key={i}\n className=\"text-ui-code-text-subtle tabular-nums\"\n >\n {i + 1}\n </span>\n ))}\n </div>\n )}\n <div>\n {tokens.map((line, i) => (\n <div key={i} {...getLineProps({ line })}>\n {line.map((token, key) => (\n <span key={key} {...getTokenProps({ token })} />\n ))}\n </div>\n ))}\n </div>\n </pre>\n )}\n </Highlight>\n </div>\n </div>\n )\n}\n\nconst CodeBlock = Object.assign(Root, { Body, Header, Meta })\n\nexport { CodeBlock }\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@medusajs/ui",
3
- "version": "2.2.2",
3
+ "version": "2.2.3-next-20231124092248",
4
4
  "author": "Kasper Kristensen <kasper@medusajs.com>",
5
5
  "license": "MIT",
6
6
  "repository": {