@stokelp/ui 2.106.0 → 2.107.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/dist/components/chat/ChatScoreBreakdown.cjs +1 -1
- package/dist/components/chat/ChatScoreBreakdown.cjs.map +1 -1
- package/dist/components/chat/ChatScoreBreakdown.d.ts +3 -1
- package/dist/components/chat/ChatScoreBreakdown.js +74 -57
- package/dist/components/chat/ChatScoreBreakdown.js.map +1 -1
- package/dist/ui.css +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function i(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function a(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}var
|
|
1
|
+
"use client";const e=require("../text/Text.cjs");let t=require("@stokelp/styled-system/jsx"),n=require("react/jsx-runtime");var r=[`origin`,`temperature`,`cutting`,`cooking`,`treatment`,`label`,`packaging`];function i(e){return e>=70?`#3B6D11`:e>=40?`#854F0B`:`#A32D2D`}function a(e){return e>=70?`#639922`:e>=40?`#BA7517`:`#E24B4A`}function o(e){return e?.matched!=null&&e?.total!=null}var s=({percent:s,detail:c,labels:l})=>{let u=r.filter(e=>o(c[e])),d=r.filter(e=>!o(c[e]));return(0,n.jsxs)(t.Box,{bg:`white`,borderRadius:`radius-8`,p:`space-16`,minW:`220px`,maxW:`240px`,css:{"& *":{fontFamily:`inherit`}},children:[(0,n.jsxs)(t.HStack,{justify:`space-between`,alignItems:`baseline`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.md`,fontWeight:`bold`,children:l.title}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.lg`,fontWeight:`medium`,style:{color:i(s)},children:[Math.round(s),` %`]})]}),(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),u.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,mb:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:l.compared}),u.map(r=>{let i=c[r].matched,o=c[r].total,s=o>0?i/o*100:0;return(0,n.jsxs)(t.HStack,{alignItems:`center`,gap:`space-8`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.500`,minW:`80px`,children:l.attributes[r]}),(0,n.jsx)(t.Box,{flex:`1`,h:`3px`,bg:`grey.100`,borderRadius:`full`,overflow:`hidden`,children:(0,n.jsx)(t.Box,{h:`100%`,borderRadius:`full`,style:{width:`${s}%`,background:a(s)}})}),(0,n.jsxs)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`medium`,minW:`40px`,textAlign:`right`,style:{color:a(s)},children:[i,`/`,o]})]},r)})]}),u.length>0&&d.length>0&&(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mb:`space-8`}),d.length>0&&(0,n.jsxs)(t.VStack,{alignItems:`stretch`,gap:`space-4`,children:[(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,fontWeight:`bold`,color:`grey.400`,children:l.notSpecified}),(0,n.jsx)(t.HStack,{flexWrap:`wrap`,gap:`space-4`,children:d.map(t=>(0,n.jsx)(e.Text,{as:`span`,fontSize:`body.sm`,color:`grey.400`,border:`1px solid`,borderColor:`grey.100`,px:`space-8`,py:`2px`,borderRadius:`full`,children:l.attributes[t]},t))})]}),l.footer&&(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(t.Box,{h:`1px`,bg:`grey.100`,mt:`space-8`,mb:`space-8`}),(0,n.jsx)(e.Text,{as:`span`,fontSize:`10px`,lineHeight:`0.8`,color:`grey.300`,children:l.footer})]})]})};exports.ChatScoreBreakdown=s;
|
|
2
2
|
//# sourceMappingURL=ChatScoreBreakdown.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatScoreBreakdown.cjs","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.cjs","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n matched: number | null\n total: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(ratioPercent: number): string {\n if (ratioPercent >= 70) return '#639922'\n if (ratioPercent >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nfunction isComparable(detail?: ScoreAttributeDetail): boolean {\n return detail?.matched != null && detail?.total != null\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => isComparable(detail[key]))\n const notSpecified = ATTRIBUTE_ORDER.filter(key => !isComparable(detail[key]))\n\n return (\n <Box\n bg=\"white\"\n borderRadius=\"radius-8\"\n p=\"space-16\"\n minW=\"220px\"\n maxW=\"240px\"\n css={{ '& *': { fontFamily: 'inherit' } }}\n >\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.md\" fontWeight=\"bold\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"body.lg\" fontWeight=\"medium\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.compared}\n </Text>\n {compared.map(key => {\n const matched = detail[key].matched as number\n const total = detail[key].total as number\n const ratioPercent = total > 0 ? (matched / total) * 100 : 0\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box\n h=\"100%\"\n borderRadius=\"full\"\n style={{ width: `${ratioPercent}%`, background: getBarColor(ratioPercent) }}\n />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(ratioPercent) }}\n >\n {matched}/{total}\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"body.sm\"\n color=\"grey.400\"\n border=\"1px solid\"\n borderColor=\"grey.100\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n\n {labels.footer && (\n <>\n <Box h=\"1px\" bg=\"grey.100\" mt=\"space-8\" mb=\"space-8\" />\n <Text as=\"span\" fontSize=\"10px\" lineHeight=\"0.8\" color=\"grey.300\">\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
export type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging';
|
|
2
2
|
export type ScoreAttributeDetail = {
|
|
3
|
-
|
|
3
|
+
matched: number | null;
|
|
4
|
+
total: number | null;
|
|
4
5
|
};
|
|
5
6
|
export type ChatScoreBreakdownLabels = {
|
|
6
7
|
title: string;
|
|
7
8
|
compared: string;
|
|
8
9
|
notSpecified: string;
|
|
9
10
|
attributes: Record<ScoreAttributeKey, string>;
|
|
11
|
+
footer?: string;
|
|
10
12
|
};
|
|
11
13
|
export type ChatScoreBreakdownProps = {
|
|
12
14
|
percent: number;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { Text as e } from "../text/Text.js";
|
|
3
3
|
import { Box as t, HStack as n, VStack as r } from "@stokelp/styled-system/jsx";
|
|
4
|
-
import {
|
|
4
|
+
import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
5
5
|
//#region src/components/chat/ChatScoreBreakdown.tsx
|
|
6
|
-
var
|
|
6
|
+
var s = [
|
|
7
7
|
"origin",
|
|
8
8
|
"temperature",
|
|
9
9
|
"cutting",
|
|
@@ -12,131 +12,148 @@ var o = [
|
|
|
12
12
|
"label",
|
|
13
13
|
"packaging"
|
|
14
14
|
];
|
|
15
|
-
function
|
|
15
|
+
function c(e) {
|
|
16
16
|
return e >= 70 ? "#3B6D11" : e >= 40 ? "#854F0B" : "#A32D2D";
|
|
17
17
|
}
|
|
18
|
-
function
|
|
18
|
+
function l(e) {
|
|
19
19
|
return e >= 70 ? "#639922" : e >= 40 ? "#BA7517" : "#E24B4A";
|
|
20
20
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
function u(e) {
|
|
22
|
+
return e?.matched != null && e?.total != null;
|
|
23
|
+
}
|
|
24
|
+
var d = ({ percent: d, detail: f, labels: p }) => {
|
|
25
|
+
let m = s.filter((e) => u(f[e])), h = s.filter((e) => !u(f[e]));
|
|
26
|
+
return /* @__PURE__ */ o(t, {
|
|
24
27
|
bg: "white",
|
|
25
28
|
borderRadius: "radius-8",
|
|
26
|
-
p: "space-
|
|
29
|
+
p: "space-16",
|
|
27
30
|
minW: "220px",
|
|
28
31
|
maxW: "240px",
|
|
32
|
+
css: { "& *": { fontFamily: "inherit" } },
|
|
29
33
|
children: [
|
|
30
|
-
/* @__PURE__ */
|
|
34
|
+
/* @__PURE__ */ o(n, {
|
|
31
35
|
justify: "space-between",
|
|
32
36
|
alignItems: "baseline",
|
|
33
37
|
mb: "space-8",
|
|
34
|
-
children: [/* @__PURE__ */
|
|
38
|
+
children: [/* @__PURE__ */ a(e, {
|
|
35
39
|
as: "span",
|
|
36
|
-
fontSize: "
|
|
37
|
-
fontWeight: "
|
|
38
|
-
children:
|
|
39
|
-
}), /* @__PURE__ */
|
|
40
|
+
fontSize: "body.md",
|
|
41
|
+
fontWeight: "bold",
|
|
42
|
+
children: p.title
|
|
43
|
+
}), /* @__PURE__ */ o(e, {
|
|
40
44
|
as: "span",
|
|
41
|
-
fontSize: "
|
|
42
|
-
fontWeight: "
|
|
43
|
-
style: { color:
|
|
44
|
-
children: [Math.round(
|
|
45
|
+
fontSize: "body.lg",
|
|
46
|
+
fontWeight: "medium",
|
|
47
|
+
style: { color: c(d) },
|
|
48
|
+
children: [Math.round(d), " %"]
|
|
45
49
|
})]
|
|
46
50
|
}),
|
|
47
|
-
/* @__PURE__ */
|
|
51
|
+
/* @__PURE__ */ a(t, {
|
|
48
52
|
h: "1px",
|
|
49
53
|
bg: "grey.100",
|
|
50
54
|
mb: "space-8"
|
|
51
55
|
}),
|
|
52
|
-
|
|
56
|
+
m.length > 0 && /* @__PURE__ */ o(r, {
|
|
53
57
|
alignItems: "stretch",
|
|
54
58
|
gap: "space-4",
|
|
55
59
|
mb: "space-8",
|
|
56
|
-
children: [/* @__PURE__ */
|
|
60
|
+
children: [/* @__PURE__ */ a(e, {
|
|
57
61
|
as: "span",
|
|
58
|
-
fontSize: "
|
|
59
|
-
fontWeight: "
|
|
62
|
+
fontSize: "body.sm",
|
|
63
|
+
fontWeight: "bold",
|
|
60
64
|
color: "grey.400",
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
let o = u[r].sim;
|
|
66
|
-
return /* @__PURE__ */ a(n, {
|
|
65
|
+
children: p.compared
|
|
66
|
+
}), m.map((r) => {
|
|
67
|
+
let i = f[r].matched, s = f[r].total, c = s > 0 ? i / s * 100 : 0;
|
|
68
|
+
return /* @__PURE__ */ o(n, {
|
|
67
69
|
alignItems: "center",
|
|
68
70
|
gap: "space-8",
|
|
69
71
|
children: [
|
|
70
|
-
/* @__PURE__ */
|
|
72
|
+
/* @__PURE__ */ a(e, {
|
|
71
73
|
as: "span",
|
|
72
|
-
fontSize: "
|
|
74
|
+
fontSize: "body.sm",
|
|
73
75
|
color: "grey.500",
|
|
74
76
|
minW: "80px",
|
|
75
|
-
children:
|
|
77
|
+
children: p.attributes[r]
|
|
76
78
|
}),
|
|
77
|
-
/* @__PURE__ */
|
|
79
|
+
/* @__PURE__ */ a(t, {
|
|
78
80
|
flex: "1",
|
|
79
81
|
h: "3px",
|
|
80
82
|
bg: "grey.100",
|
|
81
83
|
borderRadius: "full",
|
|
82
84
|
overflow: "hidden",
|
|
83
|
-
children: /* @__PURE__ */
|
|
85
|
+
children: /* @__PURE__ */ a(t, {
|
|
84
86
|
h: "100%",
|
|
85
87
|
borderRadius: "full",
|
|
86
88
|
style: {
|
|
87
|
-
width: `${
|
|
88
|
-
background: c
|
|
89
|
+
width: `${c}%`,
|
|
90
|
+
background: l(c)
|
|
89
91
|
}
|
|
90
92
|
})
|
|
91
93
|
}),
|
|
92
|
-
/* @__PURE__ */
|
|
94
|
+
/* @__PURE__ */ o(e, {
|
|
93
95
|
as: "span",
|
|
94
|
-
fontSize: "
|
|
95
|
-
fontWeight: "
|
|
96
|
-
minW: "
|
|
96
|
+
fontSize: "body.sm",
|
|
97
|
+
fontWeight: "medium",
|
|
98
|
+
minW: "40px",
|
|
97
99
|
textAlign: "right",
|
|
98
|
-
style: { color: c
|
|
99
|
-
children:
|
|
100
|
+
style: { color: l(c) },
|
|
101
|
+
children: [
|
|
102
|
+
i,
|
|
103
|
+
"/",
|
|
104
|
+
s
|
|
105
|
+
]
|
|
100
106
|
})
|
|
101
107
|
]
|
|
102
108
|
}, r);
|
|
103
109
|
})]
|
|
104
110
|
}),
|
|
105
|
-
|
|
111
|
+
m.length > 0 && h.length > 0 && /* @__PURE__ */ a(t, {
|
|
106
112
|
h: "1px",
|
|
107
113
|
bg: "grey.100",
|
|
108
114
|
mb: "space-8"
|
|
109
115
|
}),
|
|
110
|
-
|
|
116
|
+
h.length > 0 && /* @__PURE__ */ o(r, {
|
|
111
117
|
alignItems: "stretch",
|
|
112
118
|
gap: "space-4",
|
|
113
|
-
children: [/* @__PURE__ */
|
|
119
|
+
children: [/* @__PURE__ */ a(e, {
|
|
114
120
|
as: "span",
|
|
115
|
-
fontSize: "
|
|
116
|
-
fontWeight: "
|
|
121
|
+
fontSize: "body.sm",
|
|
122
|
+
fontWeight: "bold",
|
|
117
123
|
color: "grey.400",
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
children: d.notSpecified
|
|
121
|
-
}), /* @__PURE__ */ i(n, {
|
|
124
|
+
children: p.notSpecified
|
|
125
|
+
}), /* @__PURE__ */ a(n, {
|
|
122
126
|
flexWrap: "wrap",
|
|
123
127
|
gap: "space-4",
|
|
124
|
-
children:
|
|
128
|
+
children: h.map((t) => /* @__PURE__ */ a(e, {
|
|
125
129
|
as: "span",
|
|
126
|
-
fontSize: "
|
|
130
|
+
fontSize: "body.sm",
|
|
127
131
|
color: "grey.400",
|
|
128
|
-
|
|
132
|
+
border: "1px solid",
|
|
133
|
+
borderColor: "grey.100",
|
|
129
134
|
px: "space-8",
|
|
130
135
|
py: "2px",
|
|
131
136
|
borderRadius: "full",
|
|
132
|
-
children:
|
|
137
|
+
children: p.attributes[t]
|
|
133
138
|
}, t))
|
|
134
139
|
})]
|
|
135
|
-
})
|
|
140
|
+
}),
|
|
141
|
+
p.footer && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
|
|
142
|
+
h: "1px",
|
|
143
|
+
bg: "grey.100",
|
|
144
|
+
mt: "space-8",
|
|
145
|
+
mb: "space-8"
|
|
146
|
+
}), /* @__PURE__ */ a(e, {
|
|
147
|
+
as: "span",
|
|
148
|
+
fontSize: "10px",
|
|
149
|
+
lineHeight: "0.8",
|
|
150
|
+
color: "grey.300",
|
|
151
|
+
children: p.footer
|
|
152
|
+
})] })
|
|
136
153
|
]
|
|
137
154
|
});
|
|
138
155
|
};
|
|
139
156
|
//#endregion
|
|
140
|
-
export {
|
|
157
|
+
export { d as ChatScoreBreakdown };
|
|
141
158
|
|
|
142
159
|
//# sourceMappingURL=ChatScoreBreakdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ChatScoreBreakdown.js","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n
|
|
1
|
+
{"version":3,"file":"ChatScoreBreakdown.js","names":[],"sources":["../../../src/components/chat/ChatScoreBreakdown.tsx"],"sourcesContent":["import { Box, HStack, VStack } from '@stokelp/styled-system/jsx'\nimport { Text } from '~/components'\n\nexport type ScoreAttributeKey = 'origin' | 'temperature' | 'cutting' | 'cooking' | 'treatment' | 'label' | 'packaging'\n\nexport type ScoreAttributeDetail = {\n matched: number | null\n total: number | null\n}\n\nexport type ChatScoreBreakdownLabels = {\n title: string\n compared: string\n notSpecified: string\n attributes: Record<ScoreAttributeKey, string>\n footer?: string\n}\n\nexport type ChatScoreBreakdownProps = {\n percent: number\n detail: Record<ScoreAttributeKey, ScoreAttributeDetail>\n labels: ChatScoreBreakdownLabels\n}\n\nconst ATTRIBUTE_ORDER: ScoreAttributeKey[] = [\n 'origin',\n 'temperature',\n 'cutting',\n 'cooking',\n 'treatment',\n 'label',\n 'packaging',\n]\n\nfunction getHeadlineColor(percent: number): string {\n if (percent >= 70) return '#3B6D11'\n if (percent >= 40) return '#854F0B'\n return '#A32D2D'\n}\n\nfunction getBarColor(ratioPercent: number): string {\n if (ratioPercent >= 70) return '#639922'\n if (ratioPercent >= 40) return '#BA7517'\n return '#E24B4A'\n}\n\nfunction isComparable(detail?: ScoreAttributeDetail): boolean {\n return detail?.matched != null && detail?.total != null\n}\n\nexport const ChatScoreBreakdown = ({ percent, detail, labels }: ChatScoreBreakdownProps) => {\n const compared = ATTRIBUTE_ORDER.filter(key => isComparable(detail[key]))\n const notSpecified = ATTRIBUTE_ORDER.filter(key => !isComparable(detail[key]))\n\n return (\n <Box\n bg=\"white\"\n borderRadius=\"radius-8\"\n p=\"space-16\"\n minW=\"220px\"\n maxW=\"240px\"\n css={{ '& *': { fontFamily: 'inherit' } }}\n >\n <HStack justify=\"space-between\" alignItems=\"baseline\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.md\" fontWeight=\"bold\">\n {labels.title}\n </Text>\n <Text as=\"span\" fontSize=\"body.lg\" fontWeight=\"medium\" style={{ color: getHeadlineColor(percent) }}>\n {Math.round(percent)} %\n </Text>\n </HStack>\n\n <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />\n\n {compared.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\" mb=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.compared}\n </Text>\n {compared.map(key => {\n const matched = detail[key].matched as number\n const total = detail[key].total as number\n const ratioPercent = total > 0 ? (matched / total) * 100 : 0\n return (\n <HStack key={key} alignItems=\"center\" gap=\"space-8\">\n <Text as=\"span\" fontSize=\"body.sm\" color=\"grey.500\" minW=\"80px\">\n {labels.attributes[key]}\n </Text>\n <Box flex=\"1\" h=\"3px\" bg=\"grey.100\" borderRadius=\"full\" overflow=\"hidden\">\n <Box\n h=\"100%\"\n borderRadius=\"full\"\n style={{ width: `${ratioPercent}%`, background: getBarColor(ratioPercent) }}\n />\n </Box>\n <Text\n as=\"span\"\n fontSize=\"body.sm\"\n fontWeight=\"medium\"\n minW=\"40px\"\n textAlign=\"right\"\n style={{ color: getBarColor(ratioPercent) }}\n >\n {matched}/{total}\n </Text>\n </HStack>\n )\n })}\n </VStack>\n )}\n\n {compared.length > 0 && notSpecified.length > 0 && <Box h=\"1px\" bg=\"grey.100\" mb=\"space-8\" />}\n\n {notSpecified.length > 0 && (\n <VStack alignItems=\"stretch\" gap=\"space-4\">\n <Text as=\"span\" fontSize=\"body.sm\" fontWeight=\"bold\" color=\"grey.400\">\n {labels.notSpecified}\n </Text>\n <HStack flexWrap=\"wrap\" gap=\"space-4\">\n {notSpecified.map(key => (\n <Text\n key={key}\n as=\"span\"\n fontSize=\"body.sm\"\n color=\"grey.400\"\n border=\"1px solid\"\n borderColor=\"grey.100\"\n px=\"space-8\"\n py=\"2px\"\n borderRadius=\"full\"\n >\n {labels.attributes[key]}\n </Text>\n ))}\n </HStack>\n </VStack>\n )}\n\n {labels.footer && (\n <>\n <Box h=\"1px\" bg=\"grey.100\" mt=\"space-8\" mb=\"space-8\" />\n <Text as=\"span\" fontSize=\"10px\" lineHeight=\"0.8\" color=\"grey.300\">\n {labels.footer}\n </Text>\n </>\n )}\n </Box>\n )\n}\n"],"mappings":"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"}
|