@bitrise/bitkit-v2 0.3.298 → 0.3.300
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/BitkitMarkdown/BitkitMarkdown.js +2 -2
- package/dist/components/BitkitMarkdown/BitkitMarkdown.js.map +1 -1
- package/dist/components/BitkitStat/BitkitStat.d.ts +1 -0
- package/dist/components/BitkitStat/BitkitStat.js +18 -11
- package/dist/components/BitkitStat/BitkitStat.js.map +1 -1
- package/package.json +1 -1
|
@@ -34,7 +34,7 @@ var createComponents = (size, blockquoteStyles) => {
|
|
|
34
34
|
code: ({ node: _, children }) => /* @__PURE__ */ jsx(BitkitCodeSnippet, {
|
|
35
35
|
variant: "inline",
|
|
36
36
|
size: codeSize,
|
|
37
|
-
children:
|
|
37
|
+
children: getTextContent(children)
|
|
38
38
|
}),
|
|
39
39
|
h1: ({ node: _, ...props }) => /* @__PURE__ */ jsx(Heading, {
|
|
40
40
|
as: "h1",
|
|
@@ -77,7 +77,7 @@ var createComponents = (size, blockquoteStyles) => {
|
|
|
77
77
|
pre: ({ node: _, children }) => /* @__PURE__ */ jsx(BitkitCodeSnippet, {
|
|
78
78
|
variant: "multi",
|
|
79
79
|
size: codeSize,
|
|
80
|
-
children: getTextContent(children)
|
|
80
|
+
children: getTextContent(children).replace(/\n$/, "")
|
|
81
81
|
}),
|
|
82
82
|
ul: ({ node: _, ...props }) => /* @__PURE__ */ jsx(BitkitList_default, {
|
|
83
83
|
size: listSize,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Heading } from '@chakra-ui/react/heading';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n if (typeof node === 'string') return node;\n if (typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(getTextContent).join('');\n if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n const codeSize = size === 'lg' ? 'lg' : 'md';\n const listSize = size === 'lg' ? 'lg' : 'md';\n\n return {\n a: ({ node: _, ...props }) => (\n <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n ),\n blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n code: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n {
|
|
1
|
+
{"version":3,"file":"BitkitMarkdown.js","names":[],"sources":["../../../lib/components/BitkitMarkdown/BitkitMarkdown.tsx"],"sourcesContent":["import { Heading } from '@chakra-ui/react/heading';\nimport { Separator } from '@chakra-ui/react/separator';\nimport { Stack, type StackProps } from '@chakra-ui/react/stack';\nimport { chakra, type SystemStyleObject, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { Text } from '@chakra-ui/react/text';\nimport { type ComponentProps, forwardRef, isValidElement, type ReactNode } from 'react';\nimport Markdown, { type Components } from 'react-markdown';\n\nimport BitkitCodeSnippet from '../BitkitCodeSnippet/BitkitCodeSnippet';\nimport BitkitLink from '../BitkitLink/BitkitLink';\nimport BitkitList from '../BitkitList/BitkitList';\n\n// ----- Helpers -----\n\nconst getTextContent = (node: ReactNode): string => {\n if (typeof node === 'string') return node;\n if (typeof node === 'number') return String(node);\n if (Array.isArray(node)) return node.map(getTextContent).join('');\n if (isValidElement(node)) return getTextContent((node.props as { children?: ReactNode }).children);\n return '';\n};\n\n// ----- Component mappings -----\n\nconst createComponents = (size: 'sm' | 'md' | 'lg', blockquoteStyles: SystemStyleObject): Components => {\n const codeSize = size === 'lg' ? 'lg' : 'md';\n const listSize = size === 'lg' ? 'lg' : 'md';\n\n return {\n a: ({ node: _, ...props }) => (\n <BitkitLink colorVariant=\"purple\" rel=\"noopener noreferrer\" target=\"_blank\" {...props} />\n ),\n blockquote: ({ node: _, ...props }) => <chakra.blockquote css={blockquoteStyles} {...props} />,\n // Not String(children): a rehypePlugin such as a syntax highlighter turns the text into\n // elements, and String() on those yields \"[object Object]\".\n code: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"inline\" size={codeSize}>\n {getTextContent(children)}\n </BitkitCodeSnippet>\n ),\n h1: ({ node: _, ...props }) => <Heading as=\"h1\" textStyle=\"heading/h1\" {...props} />,\n h2: ({ node: _, ...props }) => <Heading as=\"h2\" textStyle=\"heading/h2\" {...props} />,\n h3: ({ node: _, ...props }) => <Heading as=\"h3\" textStyle=\"heading/h3\" {...props} />,\n h4: ({ node: _, ...props }) => <Heading as=\"h4\" textStyle=\"heading/h4\" {...props} />,\n h5: ({ node: _, ...props }) => <Heading as=\"h5\" textStyle=\"heading/h5\" {...props} />,\n h6: ({ node: _, ...props }) => <Heading as=\"h6\" textStyle=\"heading/h6\" {...props} />,\n hr: () => <Separator />,\n li: ({ node: _, ...props }) => <BitkitList.Item>{props.children}</BitkitList.Item>,\n ol: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"ordered\">\n {props.children}\n </BitkitList>\n ),\n p: ({ node: _, ...props }) => <Text {...props} />,\n // The parser closes a code block with a newline, which the `multi` variant renders as an\n // empty last line because its content is `white-space: pre-wrap`.\n pre: ({ node: _, children }) => (\n <BitkitCodeSnippet variant=\"multi\" size={codeSize}>\n {getTextContent(children).replace(/\\n$/, '')}\n </BitkitCodeSnippet>\n ),\n ul: ({ node: _, ...props }) => (\n <BitkitList size={listSize} variant=\"unordered\">\n {props.children}\n </BitkitList>\n ),\n };\n};\n\n// ----- BitkitMarkdown -----\n\nexport interface BitkitMarkdownProps extends Omit<StackProps, 'children'> {\n children: string;\n components?: Components | null;\n rehypePlugins?: ComponentProps<typeof Markdown>['rehypePlugins'];\n size?: 'sm' | 'md' | 'lg';\n}\n\nconst BitkitMarkdown = forwardRef<HTMLDivElement, BitkitMarkdownProps>((props, ref) => {\n const { children, components, rehypePlugins, size = 'md', ...rest } = props;\n\n const recipe = useSlotRecipe({ key: 'markdown' });\n const styles = recipe({ size });\n\n const defaultComponents = createComponents(size, styles.blockquote);\n const mergedComponents = { ...defaultComponents, ...(components ?? {}) };\n\n return (\n <Stack ref={ref} gap=\"16\" css={styles.root} {...rest}>\n <Markdown components={mergedComponents} rehypePlugins={rehypePlugins}>\n {children}\n </Markdown>\n </Stack>\n );\n});\n\nBitkitMarkdown.displayName = 'BitkitMarkdown';\n\nexport default BitkitMarkdown;\n"],"mappings":"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"}
|
|
@@ -4,6 +4,7 @@ export type TrendDirection = 'up' | 'down';
|
|
|
4
4
|
export type TrendTextPlacement = 'below' | 'inline';
|
|
5
5
|
export interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {
|
|
6
6
|
label: string;
|
|
7
|
+
placeholder?: string;
|
|
7
8
|
size?: 'lg' | '2xl' | '3xl';
|
|
8
9
|
state?: 'default' | 'skeleton';
|
|
9
10
|
subtext?: string;
|
|
@@ -4,7 +4,7 @@ import IconInfoCircle from "../../icons/IconInfoCircle.js";
|
|
|
4
4
|
import BitkitTooltip from "../BitkitTooltip/BitkitTooltip.js";
|
|
5
5
|
import { chakra, useSlotRecipe } from "@chakra-ui/react/styled-system";
|
|
6
6
|
import { forwardRef } from "react";
|
|
7
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Skeleton } from "@chakra-ui/react/skeleton";
|
|
9
9
|
//#region lib/components/BitkitStat/BitkitStat.tsx
|
|
10
10
|
var TREND_COLORS = {
|
|
@@ -54,7 +54,7 @@ var SKELETON_VALUE_HEIGHTS = {
|
|
|
54
54
|
"3xl": "40"
|
|
55
55
|
};
|
|
56
56
|
var BitkitStat = forwardRef((props, ref) => {
|
|
57
|
-
const { label, size = "lg", state = "default", subtext, tooltip, trendColor, trendDirection, trendText, trendTextPlacement = "below", value, variant = "default", ...rest } = props;
|
|
57
|
+
const { label, placeholder = "N/A", size = "lg", state = "default", subtext, tooltip, trendColor, trendDirection, trendText, trendTextPlacement = "below", value, variant = "default", ...rest } = props;
|
|
58
58
|
const styles = useSlotRecipe({ key: "stat" })({
|
|
59
59
|
size,
|
|
60
60
|
variant
|
|
@@ -78,13 +78,16 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
78
78
|
css: styles.root,
|
|
79
79
|
ref,
|
|
80
80
|
...rest,
|
|
81
|
-
children: [/* @__PURE__ */
|
|
81
|
+
children: [/* @__PURE__ */ jsx(chakra.span, {
|
|
82
82
|
css: styles.value,
|
|
83
|
-
children:
|
|
83
|
+
children: !value ? /* @__PURE__ */ jsx(chakra.span, {
|
|
84
|
+
color: "text/tertiary",
|
|
85
|
+
children: placeholder
|
|
86
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [!!TrendIcon && /* @__PURE__ */ jsx(TrendIcon, {
|
|
84
87
|
size: "16",
|
|
85
88
|
color: trend.iconColor
|
|
86
|
-
}), value]
|
|
87
|
-
}), !!trendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
89
|
+
}), value] })
|
|
90
|
+
}), !!value && !!trendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
88
91
|
css: styles.helpText,
|
|
89
92
|
color: trend.textColor,
|
|
90
93
|
children: trendText
|
|
@@ -118,17 +121,21 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
118
121
|
]
|
|
119
122
|
});
|
|
120
123
|
const isInline = trendTextPlacement === "inline";
|
|
121
|
-
const
|
|
124
|
+
const showTrendText = !!value && !isInline && !!trendText;
|
|
125
|
+
const showHelpText = showTrendText || !!subtext;
|
|
122
126
|
return /* @__PURE__ */ jsxs(chakra.dl, {
|
|
123
127
|
css: styles.root,
|
|
124
128
|
ref,
|
|
125
129
|
...rest,
|
|
126
130
|
children: [
|
|
127
131
|
labelContent,
|
|
128
|
-
/* @__PURE__ */
|
|
132
|
+
/* @__PURE__ */ jsx(chakra.dd, {
|
|
129
133
|
css: styles.value,
|
|
130
134
|
alignItems: isInline && size === "3xl" ? "flex-end" : void 0,
|
|
131
|
-
children:
|
|
135
|
+
children: !value ? /* @__PURE__ */ jsx(chakra.span, {
|
|
136
|
+
color: "text/tertiary",
|
|
137
|
+
children: placeholder
|
|
138
|
+
}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [value, isInline ? /* @__PURE__ */ jsxs(chakra.span, {
|
|
132
139
|
display: "inline-flex",
|
|
133
140
|
gap: "4",
|
|
134
141
|
alignItems: "center",
|
|
@@ -144,11 +151,11 @@ var BitkitStat = forwardRef((props, ref) => {
|
|
|
144
151
|
}) : !!TrendIcon && /* @__PURE__ */ jsx(TrendIcon, {
|
|
145
152
|
size: BELOW_ICON_SIZES[size],
|
|
146
153
|
color: trend.iconColor
|
|
147
|
-
})]
|
|
154
|
+
})] })
|
|
148
155
|
}),
|
|
149
156
|
showHelpText && /* @__PURE__ */ jsxs(chakra.dd, {
|
|
150
157
|
css: styles.helpText,
|
|
151
|
-
children: [
|
|
158
|
+
children: [showTrendText && /* @__PURE__ */ jsx(chakra.span, {
|
|
152
159
|
color: trend.textColor,
|
|
153
160
|
children: trendText
|
|
154
161
|
}), !!subtext && /* @__PURE__ */ jsx(chakra.span, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BitkitStat.js","names":[],"sources":["../../../lib/components/BitkitStat/BitkitStat.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconArrowDown, IconArrowUp, IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport type TrendColor = 'positive' | 'negative' | 'neutral';\nexport type TrendDirection = 'up' | 'down';\nexport type TrendTextPlacement = 'below' | 'inline';\n\nconst TREND_COLORS = {\n positive: { text: 'text/positive', icon: 'icon/positive' },\n negative: { text: 'text/negative', icon: 'icon/negative' },\n neutral: { text: 'text/secondary', icon: 'icon/tertiary' },\n} as const;\n\nconst TREND_ICONS = { up: IconArrowUp, down: IconArrowDown } as const;\nconst DEFAULT_COLORS: Record<TrendDirection, TrendColor> = { up: 'positive', down: 'negative' };\n\nconst resolveTrend = (trendColor?: TrendColor, trendDirection?: TrendDirection) => {\n const color = trendColor ?? (trendDirection ? DEFAULT_COLORS[trendDirection] : undefined);\n const colors = color ? TREND_COLORS[color] : undefined;\n return {\n textColor: colors?.text ?? 'text/secondary',\n iconColor: colors?.icon ?? 'icon/tertiary',\n Icon: trendDirection ? TREND_ICONS[trendDirection] : undefined,\n };\n};\n\nconst BELOW_ICON_SIZES = { lg: '16', '2xl': '24', '3xl': '24' } as const;\nconst INLINE_TREND_STYLES = {\n lg: { paddingBlockStart: '2' },\n '2xl': { paddingBlockStart: '6' },\n '3xl': { paddingBlockEnd: '4' },\n} as const;\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\nexport interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n size?: 'lg' | '2xl' | '3xl';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n trendColor?: TrendColor;\n trendDirection?: TrendDirection;\n trendText?: string;\n trendTextPlacement?: TrendTextPlacement;\n value?: string;\n variant?: 'default' | 'compact';\n}\n\n// --- Component ---\n\nconst BitkitStat = forwardRef<HTMLElement, BitkitStatProps>((props, ref) => {\n const {\n label,\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n trendColor,\n trendDirection,\n trendText,\n trendTextPlacement = 'below',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'stat' })({ size, variant });\n const trend = resolveTrend(trendColor, trendDirection);\n const { Icon: TrendIcon } = trend;\n const isCompact = variant === 'compact';\n\n // --- Compact ---\n if (isCompact) {\n if (state === 'skeleton') {\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <Skeleton height=\"20\" width=\"64\" />\n <Skeleton height=\"16\" width=\"48\" />\n </chakra.div>\n );\n }\n\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <chakra.span css={styles.value}>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n
|
|
1
|
+
{"version":3,"file":"BitkitStat.js","names":[],"sources":["../../../lib/components/BitkitStat/BitkitStat.tsx"],"sourcesContent":["import { type BoxProps } from '@chakra-ui/react/box';\nimport { Skeleton } from '@chakra-ui/react/skeleton';\nimport { chakra, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef } from 'react';\n\nimport { IconArrowDown, IconArrowUp, IconInfoCircle } from '../../icons';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\n// --- Types ---\n\nexport type TrendColor = 'positive' | 'negative' | 'neutral';\nexport type TrendDirection = 'up' | 'down';\nexport type TrendTextPlacement = 'below' | 'inline';\n\nconst TREND_COLORS = {\n positive: { text: 'text/positive', icon: 'icon/positive' },\n negative: { text: 'text/negative', icon: 'icon/negative' },\n neutral: { text: 'text/secondary', icon: 'icon/tertiary' },\n} as const;\n\nconst TREND_ICONS = { up: IconArrowUp, down: IconArrowDown } as const;\nconst DEFAULT_COLORS: Record<TrendDirection, TrendColor> = { up: 'positive', down: 'negative' };\n\nconst resolveTrend = (trendColor?: TrendColor, trendDirection?: TrendDirection) => {\n const color = trendColor ?? (trendDirection ? DEFAULT_COLORS[trendDirection] : undefined);\n const colors = color ? TREND_COLORS[color] : undefined;\n return {\n textColor: colors?.text ?? 'text/secondary',\n iconColor: colors?.icon ?? 'icon/tertiary',\n Icon: trendDirection ? TREND_ICONS[trendDirection] : undefined,\n };\n};\n\nconst BELOW_ICON_SIZES = { lg: '16', '2xl': '24', '3xl': '24' } as const;\nconst INLINE_TREND_STYLES = {\n lg: { paddingBlockStart: '2' },\n '2xl': { paddingBlockStart: '6' },\n '3xl': { paddingBlockEnd: '4' },\n} as const;\nconst SKELETON_VALUE_HEIGHTS = { lg: '24', '2xl': '36px', '3xl': '40' } as const;\n\nexport interface BitkitStatProps extends Omit<BoxProps, 'colorPalette'> {\n label: string;\n placeholder?: string;\n size?: 'lg' | '2xl' | '3xl';\n state?: 'default' | 'skeleton';\n subtext?: string;\n tooltip?: string;\n trendColor?: TrendColor;\n trendDirection?: TrendDirection;\n trendText?: string;\n trendTextPlacement?: TrendTextPlacement;\n value?: string;\n variant?: 'default' | 'compact';\n}\n\n// --- Component ---\n\nconst BitkitStat = forwardRef<HTMLElement, BitkitStatProps>((props, ref) => {\n const {\n label,\n placeholder = 'N/A',\n size = 'lg',\n state = 'default',\n subtext,\n tooltip,\n trendColor,\n trendDirection,\n trendText,\n trendTextPlacement = 'below',\n value,\n variant = 'default',\n ...rest\n } = props;\n\n const styles = useSlotRecipe({ key: 'stat' })({ size, variant });\n const trend = resolveTrend(trendColor, trendDirection);\n const { Icon: TrendIcon } = trend;\n const isCompact = variant === 'compact';\n\n // --- Compact ---\n if (isCompact) {\n if (state === 'skeleton') {\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <Skeleton height=\"20\" width=\"64\" />\n <Skeleton height=\"16\" width=\"48\" />\n </chakra.div>\n );\n }\n\n return (\n <chakra.div css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n <chakra.span css={styles.value}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n {value}\n </>\n )}\n </chakra.span>\n {!!value && !!trendText && (\n <chakra.span css={styles.helpText} color={trend.textColor}>\n {trendText}\n </chakra.span>\n )}\n </chakra.div>\n );\n }\n\n // --- Default ---\n\n const labelContent = (\n <chakra.dt css={styles.label}>\n {label}\n {!!tooltip && (\n <BitkitTooltip text={tooltip}>\n <IconInfoCircle size=\"16\" color=\"icon/tertiary\" />\n </BitkitTooltip>\n )}\n </chakra.dt>\n );\n\n if (state === 'skeleton') {\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n <Skeleton height={SKELETON_VALUE_HEIGHTS[size]} width=\"128\" />\n <Skeleton height=\"20\" width=\"128\" />\n </chakra.dl>\n );\n }\n\n const isInline = trendTextPlacement === 'inline';\n const showTrendText = !!value && !isInline && !!trendText;\n const showHelpText = showTrendText || !!subtext;\n\n return (\n <chakra.dl css={styles.root} ref={ref} {...(rest as Record<string, unknown>)}>\n {labelContent}\n\n <chakra.dd css={styles.value} alignItems={isInline && size === '3xl' ? 'flex-end' : undefined}>\n {!value ? (\n <chakra.span color=\"text/tertiary\">{placeholder}</chakra.span>\n ) : (\n <>\n {value}\n {isInline ? (\n <chakra.span display=\"inline-flex\" gap=\"4\" alignItems=\"center\" css={INLINE_TREND_STYLES[size]}>\n {!!TrendIcon && <TrendIcon size=\"16\" color={trend.iconColor} />}\n {!!trendText && (\n <chakra.span color={trend.textColor} textStyle=\"body/md/regular\">\n {trendText}\n </chakra.span>\n )}\n </chakra.span>\n ) : (\n !!TrendIcon && <TrendIcon size={BELOW_ICON_SIZES[size]} color={trend.iconColor} />\n )}\n </>\n )}\n </chakra.dd>\n\n {showHelpText && (\n <chakra.dd css={styles.helpText}>\n {showTrendText && <chakra.span color={trend.textColor}>{trendText}</chakra.span>}\n {!!subtext && <chakra.span color=\"text/tertiary\">{subtext}</chakra.span>}\n </chakra.dd>\n )}\n </chakra.dl>\n );\n});\n\nBitkitStat.displayName = 'BitkitStat';\n\nexport default BitkitStat;\n"],"mappings":"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"}
|