@xanui/ui 1.1.24 → 1.1.25
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/Badge/index.d.ts +1 -1
- package/Badge/index.js +13 -14
- package/Badge/index.js.map +1 -1
- package/Badge/index.mjs +13 -14
- package/Badge/index.mjs.map +1 -1
- package/package.json +1 -1
package/Badge/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import React, { ReactElement } from 'react';
|
|
|
2
2
|
import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, TransitionProps } from '@xanui/core';
|
|
3
3
|
|
|
4
4
|
type BadgeProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "baseClass" | "content"> & {
|
|
5
|
-
content?: useBreakpointPropsType<number | ReactElement>;
|
|
5
|
+
content?: useBreakpointPropsType<number | string | ReactElement>;
|
|
6
6
|
color?: useBreakpointPropsType<UseColorTemplateColor>;
|
|
7
7
|
placement?: useBreakpointPropsType<"left-top" | "left-bottom" | "right-top" | "right-bottom">;
|
|
8
8
|
visible?: useBreakpointPropsType<boolean>;
|
package/Badge/index.js
CHANGED
|
@@ -65,6 +65,17 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
65
65
|
_css.transform = translate;
|
|
66
66
|
}
|
|
67
67
|
if (!isReactElement) {
|
|
68
|
+
_css.userSelect = "none";
|
|
69
|
+
_css.pointerEvents = "none";
|
|
70
|
+
_css.fontSize = "small";
|
|
71
|
+
_css.lineHeight = 1;
|
|
72
|
+
_css.fontWeight = 500;
|
|
73
|
+
_css.radius = 2;
|
|
74
|
+
if (typeof content === 'number') {
|
|
75
|
+
if (content > 99) {
|
|
76
|
+
content = "99+";
|
|
77
|
+
}
|
|
78
|
+
}
|
|
68
79
|
if (content !== undefined) {
|
|
69
80
|
_css.minWidth = 16;
|
|
70
81
|
_css.height = 16;
|
|
@@ -79,19 +90,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
79
90
|
else {
|
|
80
91
|
template = {};
|
|
81
92
|
}
|
|
82
|
-
const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: {
|
|
83
|
-
position: "absolute",
|
|
84
|
-
zIndex: 1,
|
|
85
|
-
radius: 2,
|
|
86
|
-
display: 'flex',
|
|
87
|
-
justifyContent: "center",
|
|
88
|
-
alignItems: 'center',
|
|
89
|
-
fontWeight: 500,
|
|
90
|
-
fontSize: 11,
|
|
91
|
-
userSelect: "none",
|
|
92
|
-
pointerEvents: "none",
|
|
93
|
-
lineHeight: 1,
|
|
94
|
-
} }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content }));
|
|
93
|
+
const _badge = jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.primary), _css), children: content }));
|
|
95
94
|
return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsxRuntime.jsx(core.Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
|
|
96
95
|
return {
|
|
97
96
|
from: {
|
|
@@ -103,7 +102,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
103
102
|
transform: `scale(1) ${translate}`.trim(),
|
|
104
103
|
},
|
|
105
104
|
};
|
|
106
|
-
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children:
|
|
105
|
+
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsxRuntime.jsx(jsxRuntime.Fragment, { children: _badge }), children] })));
|
|
107
106
|
});
|
|
108
107
|
|
|
109
108
|
module.exports = Badge;
|
package/Badge/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | string | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n _css.userSelect = \"none\"\n _css.pointerEvents = \"none\"\n _css.fontSize = \"small\"\n _css.lineHeight = 1\n _css.fontWeight = 500\n _css.radius = 2\n\n if (typeof content === 'number') {\n if (content > 99) {\n content = \"99+\"\n }\n }\n\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n display: 'flex',\n justifyContent: \"center\",\n alignItems: 'center',\n ...template.primary,\n ..._css,\n }}\n >\n {content}\n </Tag>\n\n return (\n <Tag\n {...props}\n position=\"relative\"\n display=\"inline-block\"\n baseClass='badge'\n ref={ref}\n >\n {\n !disableTransition ? (<Transition\n open={content !== undefined && visible}\n {...slotProps?.transition}\n variant={() => {\n return {\n from: {\n opacity: 0,\n transform: `scale(0) ${translate}`.trim(),\n },\n to: {\n opacity: 1,\n transform: `scale(1) ${translate}`.trim(),\n },\n }\n }}\n ref={refs?.transition}\n >\n {_badge}\n </Transition>) : <>{_badge}</>\n }\n\n {children}\n </Tag>\n )\n})\n\nexport default Badge\n\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag","_jsxs","Transition","_Fragment"],"mappings":"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"}
|
package/Badge/index.mjs
CHANGED
|
@@ -63,6 +63,17 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
63
63
|
_css.transform = translate;
|
|
64
64
|
}
|
|
65
65
|
if (!isReactElement) {
|
|
66
|
+
_css.userSelect = "none";
|
|
67
|
+
_css.pointerEvents = "none";
|
|
68
|
+
_css.fontSize = "small";
|
|
69
|
+
_css.lineHeight = 1;
|
|
70
|
+
_css.fontWeight = 500;
|
|
71
|
+
_css.radius = 2;
|
|
72
|
+
if (typeof content === 'number') {
|
|
73
|
+
if (content > 99) {
|
|
74
|
+
content = "99+";
|
|
75
|
+
}
|
|
76
|
+
}
|
|
66
77
|
if (content !== undefined) {
|
|
67
78
|
_css.minWidth = 16;
|
|
68
79
|
_css.height = 16;
|
|
@@ -77,19 +88,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
77
88
|
else {
|
|
78
89
|
template = {};
|
|
79
90
|
}
|
|
80
|
-
const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: {
|
|
81
|
-
position: "absolute",
|
|
82
|
-
zIndex: 1,
|
|
83
|
-
radius: 2,
|
|
84
|
-
display: 'flex',
|
|
85
|
-
justifyContent: "center",
|
|
86
|
-
alignItems: 'center',
|
|
87
|
-
fontWeight: 500,
|
|
88
|
-
fontSize: 11,
|
|
89
|
-
userSelect: "none",
|
|
90
|
-
pointerEvents: "none",
|
|
91
|
-
lineHeight: 1,
|
|
92
|
-
} }, template.primary, _css, { children: typeof content === 'number' ? (content >= 100 ? "99+" : content) : content }));
|
|
91
|
+
const _badge = jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { ref: refs === null || refs === void 0 ? void 0 : refs.content, component: 'span', baseClass: 'badge-content', sxr: Object.assign(Object.assign({ position: "absolute", zIndex: 1, display: 'flex', justifyContent: "center", alignItems: 'center' }, template.primary), _css), children: content }));
|
|
93
92
|
return (jsxs(Tag, Object.assign({}, props, { position: "relative", display: "inline-block", baseClass: 'badge', ref: ref, children: [!disableTransition ? (jsx(Transition, Object.assign({ open: content !== undefined && visible }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { variant: () => {
|
|
94
93
|
return {
|
|
95
94
|
from: {
|
|
@@ -101,7 +100,7 @@ const Badge = React.forwardRef((_a, ref) => {
|
|
|
101
100
|
transform: `scale(1) ${translate}`.trim(),
|
|
102
101
|
},
|
|
103
102
|
};
|
|
104
|
-
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsx(Fragment, { children:
|
|
103
|
+
}, ref: refs === null || refs === void 0 ? void 0 : refs.transition, children: _badge }))) : jsx(Fragment, { children: _badge }), children] })));
|
|
105
104
|
});
|
|
106
105
|
|
|
107
106
|
export { Badge as default };
|
package/Badge/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, Transition, useInterface, UseColorTemplateColor, useColorTemplate, useBreakpointPropsType, useBreakpointProps, TransitionProps } from '@xanui/core';\n\nexport type BadgeProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"baseClass\" | \"content\"> & {\n content?: useBreakpointPropsType<number | string | ReactElement>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n placement?: useBreakpointPropsType<\"left-top\" | \"left-bottom\" | \"right-top\" | \"right-bottom\">;\n visible?: useBreakpointPropsType<boolean>;\n disableTransition?: boolean;\n disableSpace?: boolean;\n slotProps?: {\n transition?: Omit<TransitionProps, \"open\">;\n content?: Omit<TagProps<\"span\">, \"children\">;\n },\n refs?: {\n content?: React.Ref<any>;\n transition?: React.Ref<any>;\n };\n}\n\nconst Badge = React.forwardRef(<T extends TagComponentType = \"div\">({ children, content, refs, ...rest }: BadgeProps<T>, ref: React.Ref<any>) => {\n let [{ color, placement, visible, slotProps, disableTransition, disableSpace, ...props }] = useInterface<any>(\"Badge\", rest, {})\n color ??= \"danger\"\n visible ??= true\n placement ??= \"right-top\"\n disableTransition ??= false\n disableSpace ??= false\n\n const _p: any = {}\n\n _p.content = content\n _p.color = color\n _p.placement = placement\n _p.visible = visible\n _p.disableTransition = disableTransition ?? false\n\n const p: any = useBreakpointProps(_p)\n\n content = p.content\n color = p.color\n placement = p.placement\n visible = p.visible\n disableTransition = p.disableTransition\n\n const isReactElement = React.isValidElement(content);\n\n let template: any = useColorTemplate(color, \"fill\")\n let _css: any = {\n position: \"absolute\",\n }\n\n let translate = ''\n\n switch (placement) {\n case \"right-top\":\n _css.top = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, -50%)\";\n }\n break;\n case \"right-bottom\":\n _css.bottom = 0;\n _css.right = 0;\n if (!disableSpace) {\n translate = \"translate(50%, 50%)\";\n }\n break;\n case \"left-top\":\n _css.top = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, -50%)\";\n }\n break;\n case \"left-bottom\":\n _css.bottom = 0;\n _css.left = 0;\n if (!disableSpace) {\n translate = \"translate(-50%, 50%)\";\n }\n break;\n }\n\n if (disableTransition) {\n _css.transform = translate\n }\n\n if (!isReactElement) {\n _css.userSelect = \"none\"\n _css.pointerEvents = \"none\"\n _css.fontSize = \"small\"\n _css.lineHeight = 1\n _css.fontWeight = 500\n _css.radius = 2\n\n if (typeof content === 'number') {\n if (content > 99) {\n content = \"99+\"\n }\n }\n\n if (content !== undefined) {\n _css.minWidth = 16\n _css.height = 16\n _css.p = .8\n _css.px = .4\n } else {\n _css.width = 8\n _css.height = 8\n }\n } else {\n template = {}\n }\n\n const _badge = <Tag\n {...slotProps?.content}\n ref={refs?.content}\n component='span'\n baseClass='badge-content'\n sxr={{\n position: \"absolute\",\n zIndex: 1,\n display: 'flex',\n justifyContent: \"center\",\n alignItems: 'center',\n ...template.primary,\n ..._css,\n }}\n >\n {content}\n </Tag>\n\n return (\n <Tag\n {...props}\n position=\"relative\"\n display=\"inline-block\"\n baseClass='badge'\n ref={ref}\n >\n {\n !disableTransition ? (<Transition\n open={content !== undefined && visible}\n {...slotProps?.transition}\n variant={() => {\n return {\n from: {\n opacity: 0,\n transform: `scale(0) ${translate}`.trim(),\n },\n to: {\n opacity: 1,\n transform: `scale(1) ${translate}`.trim(),\n },\n }\n }}\n ref={refs?.transition}\n >\n {_badge}\n </Transition>) : <>{_badge}</>\n }\n\n {children}\n </Tag>\n )\n})\n\nexport default Badge\n\n"],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}
|