"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h1: "h1", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", ul: "ul", ..._provideComponents(), ...props.components }, {Playground} = _components; if (!Playground) _missingMdxReference("Playground", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "stat", children: "Stat" }), "\n", _jsx(_components.p, { children: "As the name implies, the Stat component is used to display some statistics." }), "\n", _jsx(_components.h2, { id: "import", children: "Import" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "import { Stat, StatLabel, StatNumber, StatHelpText, StatArrow, StatGroup } from '@outfitio/outkit';\n" }) }), "\n", _jsx(_components.h2, { id: "basic-usage", children: "Basic Usage" }), "\n", _jsx(Playground, { code: "\n Collected Fees\n £0.00\n Feb 12 - Feb 28\n" }), "\n", _jsx(_components.h3, { id: "stat-with-indicator", children: "Stat with Indicator" }), "\n", _jsx(Playground, { code: "\n \n Sent\n 345,670\n \n \n 23.36%\n \n \n \n Clicked\n 45\n \n \n 9.05%\n \n \n" }), "\n", _jsx(_components.h2, { id: "props", children: "Props" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["StatLabel, StatHelpText, StatNumber composes ", _jsx(_components.a, { href: "/text", children: "Text" }), " component"] }), "\n", _jsxs(_components.li, { children: ["StatArrow composes ", _jsx(_components.a, { href: "/icon", children: "Icon" }), " component"] }), "\n", _jsxs(_components.li, { children: ["Stat, StatGroup composes ", _jsx(_components.a, { href: "/box", children: "Box" }), " component"] }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }