@spscommerce/ds-react 5.20.0 → 5.20.3-ie

package/dist/out-tsc/insight-tile/SpsInsightTile.d.ts

@@ -0,0 +1,18 @@
+import { SpsInsightTileKind, SpsIcon } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    horizontal: PropTypes.Requireable<boolean>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    kind: PropTypes.Requireable<SpsInsightTileKind>;
+    title: PropTypes.Requireable<string>;
+    metric: PropTypes.Requireable<string> | PropTypes.Requireable<number>;
+    partnerCount: PropTypes.Requireable<number>;
+    totalPartners: PropTypes.Requireable<number>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsInsightTileProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsInsightTile(props: SpsInsightTileProps): JSX.Element;
+export {};

package/dist/out-tsc/insight-tile/SpsInsightTile.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsInsightTileExamples: DSReactExamples;

package/dist/out-tsc/insight-tile/SpsInsightTile.examples.js

@@ -0,0 +1,59 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/* eslint-disable react/prop-types */
+/* eslint-disable react/jsx-one-expression-per-line */
+import { code } from "@spscommerce/utils";
+export var SpsInsightTileExamples = {
+    basic: {
+        label: "Basic Insight Tiles",
+        examples: {
+            basic: {
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                    </SpsInsights>\n                "], ["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        />\n                    </SpsInsights>\n                "]))),
+            },
+        },
+    },
+    details: {
+        label: "With Details",
+        examples: {
+            details: {
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                    </SpsInsights>\n                "], ["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                    </SpsInsights>\n                "]))),
+            },
+        },
+    },
+    partnerCount: {
+        label: "Partner Count",
+        examples: {
+            partnerCount: {
+                jsx: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"250\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"122\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"207\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"12\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"94\"\n                            totalPartners=\"250\"\n                        />\n                    </SpsInsights>\n                "], ["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"250\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"122\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"207\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"12\"\n                            totalPartners=\"250\"\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"94\"\n                            totalPartners=\"250\"\n                        />\n                    </SpsInsights>\n                "]))),
+            },
+        },
+    },
+    clickHandler: {
+        label: "Adding a click handler",
+        examples: {
+            clickHandler: {
+                jsx: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            onClick={() => console.log(\"insight tile 1 clicked!\")}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            onClick={() => console.log(\"insight tile 2 clicked!\")}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            onClick={() => console.log(\"insight tile 3 clicked!\")}\n                        />\n                    </SpsInsights>\n                "], ["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            onClick={() => console.log(\"insight tile 1 clicked!\")}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            onClick={() => console.log(\"insight tile 2 clicked!\")}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            onClick={() => console.log(\"insight tile 3 clicked!\")}\n                        />\n                    </SpsInsights>\n                "]))),
+            },
+        },
+    },
+    alternateIcons: {
+        label: "Using alternate icons",
+        examples: {
+            alternateIcons: {
+                jsx: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.USER}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.ASTERISK}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.DOLLAR_SIGN}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.FOLDER_OPEN}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.BAN}\n                        />\n                    </SpsInsights>\n                "], ["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.USER}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.ASTERISK}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.DOLLAR_SIGN}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.FOLDER_OPEN}\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            icon={SpsIcon.BAN}\n                        />\n                    </SpsInsights>\n                "]))),
+            },
+        },
+    },
+    horizontal: {
+        label: "Horizontal",
+        examples: {
+            horizontal: {
+                jsx: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                    </SpsInsights>\n                "], ["\n                    <SpsInsights>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.GENERAL}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.PROCESSING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.SUCCESS}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.WARNING}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        />\n                        <SpsInsightTile\n                            kind={SpsInsightCardKind.ERROR}\n                            metric=\"1234\"\n                            title=\"Insight Tile Title\"\n                            partnerCount=\"100\"\n                            totalPartners=\"200\"\n                            horizontal\n                        >\n                            <span className=\"gray600 font-weight-bold\">Detail:</span> 792 units\n                        </SpsInsightTile>\n                    </SpsInsights>\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+//# sourceMappingURL=SpsInsightTile.examples.js.map

package/dist/out-tsc/insight-tile/SpsInsightTile.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsInsightTile.examples.js","sourceRoot":"","sources":["../../../src/insight-tile/SpsInsightTile.examples.tsx"],"names":[],"mappings":";;;;AAAA,qCAAqC;AACrC,sDAAsD;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,sBAAsB,GAAoB;IACrD,KAAK,EAAE;QACL,KAAK,EAAE,qBAAqB;QAC5B,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,GAAG,EAAE,IAAI,szCAAA,mvCA4BA,IAAA;aACV;SACF;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,GAAG,EAAE,IAAI,quFAAA,kqFAoDA,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE;YACR,YAAY,EAAE;gBACZ,GAAG,EAAE,IAAI,6yDAAA,0uDAsCA,IAAA;aACV;SACF;KACF;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,wBAAwB;QAC/B,QAAQ,EAAE;YACR,YAAY,EAAE;gBACZ,GAAG,EAAE,IAAI,imCAAA,8hCAqBA,IAAA;aACV;SACF;KACF;IACD,cAAc,EAAE;QACd,KAAK,EAAE,uBAAuB;QAC9B,QAAQ,EAAE;YACR,cAAc,EAAE;gBACd,GAAG,EAAE,IAAI,4jDAAA,y/CAiCA,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,GAAG,EAAE,IAAI,85EAAA,21EAiDA,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/insight-tile/SpsInsightTile.js

@@ -0,0 +1,91 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+import { SpsInsightTileKind, SpsInsightTileIcons, SpsIcon } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import { I18nContext } from "../i18n";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    horizontal: "boolean",
+    icon: "SpsIcon",
+    kind: "SpsInsightTileKind",
+    title: "string",
+    metric: "number | string",
+    partnerCount: "number",
+    totalPartners: "number",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { horizontal: PropTypes.bool, icon: PropTypes.enumValue(SpsIcon), kind: PropTypes.enumValue(SpsInsightTileKind), title: PropTypes.string, metric: PropTypes.number || PropTypes.string, partnerCount: PropTypes.number, totalPartners: PropTypes.number });
+export function SpsInsightTile(props) {
+    var children = props.children, className = props.className, _a = props.horizontal, horizontal = _a === void 0 ? false : _a, icon = props.icon, _b = props.kind, kind = _b === void 0 ? "general" : _b, title = props.title, metric = props.metric, partnerCount = props.partnerCount, totalPartners = props.totalPartners, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "horizontal", "icon", "kind", "title", "metric", "partnerCount", "totalPartners", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-insight-tile", "sps-insight-tile--" + kind, className, horizontal && "sps-insight-tile--horizontal", children && "sps-insight-tile--has-detail");
+    var t = React.useContext(I18nContext).t;
+    var _c = __read((partnerCount
+        ? t("design-system:insightTile.partnerCount", {
+            count: partnerCount,
+            total: totalPartners,
+        })
+        : "").split("|"), 3), count = _c[0], ofText = _c[1], total = _c[2];
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", __assign({ className: classes }, rest),
+            React.createElement("div", { className: "sps-insight-tile__body" },
+                icon ? (React.createElement("i", { className: "sps-icon sps-icon-" + icon })) : (React.createElement("i", { className: "sps-icon sps-icon-" + SpsInsightTileIcons[kind] })),
+                metric && React.createElement("div", { className: "sps-insight-tile__metric-count" }, metric),
+                title && (React.createElement("div", { className: "sps-insight-tile__description" },
+                    React.createElement("div", { className: "sps-insight-tile__title", 
+                        /*
+                         * Both Chrome & FF ignore -webkit-box-orient
+                         * in the actual CSS for some reason
+                         * Also the TS types don't think -webkit-box-orient
+                         * is a real CSS property
+                         */
+                        style: { "-webkit-box-orient": "vertical" } }, title),
+                    React.createElement("div", { className: "sps-insight-tile__detail" }, children)))),
+            partnerCount && (React.createElement("div", { className: "sps-insight-tile__partner-count" },
+                partnerCount === totalPartners ? (React.createElement("div", null, t("design-system:insightTile.all"))) : (React.createElement(React.Fragment, null,
+                    React.createElement("div", null, count),
+                    React.createElement("div", null, ofText),
+                    React.createElement("div", null, total))),
+                React.createElement("div", { className: "sps-insight-tile__partners-text" }, t("design-system:insightTile.partners")))))));
+}
+Object.assign(SpsInsightTile, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsInsightTile",
+});
+//# sourceMappingURL=SpsInsightTile.js.map

package/dist/out-tsc/insight-tile/SpsInsightTile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsInsightTile.js","sourceRoot":"","sources":["../../../src/insight-tile/SpsInsightTile.tsx"],"names":[],"mappings":"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"}

package/dist/out-tsc/insight-tile/SpsInsights.d.ts

@@ -0,0 +1,10 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsInsightsProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsInsights(props: SpsInsightsProps): JSX.Element;
+export {};

package/dist/out-tsc/insight-tile/SpsInsights.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+var propTypes = __assign({}, PropTypes.spsGlobalPropTypes);
+export function SpsInsights(props) {
+    var children = props.children;
+    return React.createElement("div", { className: "insight-tile-wrapper" }, children);
+}
+//# sourceMappingURL=SpsInsights.js.map

package/dist/out-tsc/insight-tile/SpsInsights.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsInsights.js","sourceRoot":"","sources":["../../../src/insight-tile/SpsInsights.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,SAAS,gBACV,SAAS,CAAC,kBAAkB,CAChC,CAAC;AAIF,MAAM,UAAU,WAAW,CAAC,KAAuB;IACzC,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;IAE3B,OAAO,6BAAK,SAAS,EAAC,sBAAsB,IAAE,QAAQ,CAAO,CAAC;AAChE,CAAC"}

package/dist/out-tsc/insight-tile/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SpsInsights";
+export * from "./SpsInsightTile";

package/dist/out-tsc/insight-tile/index.js

@@ -0,0 +1,3 @@
+export * from "./SpsInsights";
+export * from "./SpsInsightTile";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/insight-tile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/insight-tile/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC"}

package/dist/out-tsc/key-value-list/SpsKeyValueList.d.ts

@@ -0,0 +1,11 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    inline: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsKeyValueListProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsKeyValueList(props: SpsKeyValueListProps): JSX.Element;
+export {};

package/dist/out-tsc/key-value-list/SpsKeyValueList.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsKeyValueListExamples: DSReactExamples;

package/dist/out-tsc/key-value-list/SpsKeyValueList.examples.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsKeyValueListExamples = {
+    stacked: {
+        label: "Stacked",
+        examples: {
+            stacked: {
+                jsx: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    <SpsKeyValueList>\n                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                            75 Companies\n                            <span className=\"font-weight-light d-block\">38 of 75 Operational</span>\n                        </SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Some Other Key\">Its Value</SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "], ["\n                    <SpsKeyValueList>\n                        <SpsKeyValueListItem itemKey=\"Buying From\">\n                            75 Companies\n                            <span className=\"font-weight-light d-block\">38 of 75 Operational</span>\n                        </SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Some Other Key\">Its Value</SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "]))),
+            },
+        },
+    },
+    inline: {
+        label: "Inline",
+        examples: {
+            inline: {
+                jsx: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    <SpsKeyValueList inline>\n                        <SpsKeyValueListItem itemKey=\"Title\">Sub copy goes here</SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Long Title\">Sub copy</SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Tags\">\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Tag</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Another Tag</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Taggart McTaggerson</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Taggle Rock</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">A Tag On Titan</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">br\u00F6ther may i have some t\u00E4gs</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Tag Me Up, Tag Me Down</SpsTag>\n                        </SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "], ["\n                    <SpsKeyValueList inline>\n                        <SpsKeyValueListItem itemKey=\"Title\">Sub copy goes here</SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Long Title\">Sub copy</SpsKeyValueListItem>\n                        <SpsKeyValueListItem itemKey=\"Tags\">\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Tag</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Another Tag</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Taggart McTaggerson</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Taggle Rock</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">A Tag On Titan</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">br\u00F6ther may i have some t\u00E4gs</SpsTag>\n                            <SpsTag kind={TagKind.INFO} className=\"mr-1 mb-1\">Tag Me Up, Tag Me Down</SpsTag>\n                        </SpsKeyValueListItem>\n                    </SpsKeyValueList>\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=SpsKeyValueList.examples.js.map

package/dist/out-tsc/key-value-list/SpsKeyValueList.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsKeyValueList.examples.js","sourceRoot":"","sources":["../../../src/key-value-list/SpsKeyValueList.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,uBAAuB,GAAoB;IACtD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,GAAG,EAAE,IAAI,uhBAAA,odAQA,IAAA;aACV;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;QACf,QAAQ,EAAE;YACR,MAAM,EAAE;gBACN,GAAG,EAAE,IAAI,6tCAAA,0pCAcA,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/key-value-list/SpsKeyValueList.js

@@ -0,0 +1,40 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    inline: "boolean",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { inline: PropTypes.bool });
+export function SpsKeyValueList(props) {
+    var children = props.children, className = props.className, inline = props.inline, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "inline", "data-testid", "unsafelyReplaceClassName"]);
+    var keyValueListClass = clsx(unsafelyReplaceClassName || "sps-key-value-list", inline && "sps-key-value-list--inline", className);
+    return (React.createElement("div", __assign({ className: keyValueListClass, "data-testid": "" + testId }, rest), children));
+}
+Object.assign(SpsKeyValueList, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsKeyValueList",
+});
+//# sourceMappingURL=SpsKeyValueList.js.map

package/dist/out-tsc/key-value-list/SpsKeyValueList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsKeyValueList.js","sourceRoot":"","sources":["../../../src/key-value-list/SpsKeyValueList.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,MAAM,EAAE,SAAS;CAClB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,MAAM,EAAE,SAAS,CAAC,IAAI,GACvB,CAAC;AAIF,MAAM,UAAU,eAAe,CAAC,KAA2B;IAEvD,IAAA,QAAQ,GAMN,KAAK,SANC,EACR,SAAS,GAKP,KAAK,UALE,EACT,MAAM,GAIJ,KAAK,OAJD,EACS,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EAPH,8EAOL,CADQ,CACC;IAEV,IAAM,iBAAiB,GAAG,IAAI,CAC5B,wBAAwB,IAAI,oBAAoB,EAChD,MAAM,IAAI,4BAA4B,EACtC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,iBAAiB,iBAAe,KAAG,MAAQ,IAAM,IAAI,GAClE,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IAC7B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,iBAAiB;CAC/B,CAAC,CAAC"}

package/dist/out-tsc/key-value-list/SpsKeyValueListItem.d.ts

@@ -0,0 +1,13 @@
+import { KeyValueListTitleColor } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    itemKey: PropTypes.Validator<PropTypes.ReactNodeOrRenderFn>;
+    titleColor: PropTypes.Requireable<KeyValueListTitleColor>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsKeyValueListItemProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsKeyValueListItem(props: SpsKeyValueListItemProps): JSX.Element;
+export {};

package/dist/out-tsc/key-value-list/SpsKeyValueListItem.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import clsx from "clsx";
+import * as React from "react";
+import { KeyValueListTitleColor } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    itemKey: { type: "string | nodeOrRenderFn", required: true },
+    titleColor: "KeyValueListTitleColor",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { itemKey: PropTypes.string.isRequired || PropTypes.nodeOrRenderFn.isRequired, titleColor: PropTypes.enumValue(KeyValueListTitleColor) });
+export function SpsKeyValueListItem(props) {
+    var children = props.children, className = props.className, itemKey = props.itemKey, _a = props.titleColor, titleColor = _a === void 0 ? KeyValueListTitleColor.LIGHT : _a, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["children", "className", "itemKey", "titleColor", "data-testid", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-key-value-list__item", "sps-key-value-list__item--" + titleColor, className);
+    return (React.createElement("div", __assign({ className: classes, "data-testid": "" + testId }, rest),
+        React.createElement("span", { className: "sps-key-value-list__key", "data-testid": testId + "__key" }, itemKey),
+        React.createElement("span", { className: "sps-key-value-list__value", "data-testid": testId + "__value" }, children)));
+}
+Object.assign(SpsKeyValueListItem, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsKeyValueListItem",
+});
+//# sourceMappingURL=SpsKeyValueListItem.js.map

package/dist/out-tsc/key-value-list/SpsKeyValueListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsKeyValueListItem.js","sourceRoot":"","sources":["../../../src/key-value-list/SpsKeyValueListItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,OAAO,EAAE,EAAE,IAAI,EAAE,yBAAyB,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC5D,UAAU,EAAE,wBAAwB;CACrC,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,OAAO,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,IAAI,SAAS,CAAC,cAAc,CAAC,UAAU,EAC3E,UAAU,EAAE,SAAS,CAAC,SAAS,CAAyB,sBAAsB,CAAC,GAChF,CAAC;AAIF,MAAM,UAAU,mBAAmB,CAAC,KAA+B;IAE/D,IAAA,QAAQ,GAON,KAAK,SAPC,EACR,SAAS,GAMP,KAAK,UANE,EACT,OAAO,GAKL,KAAK,QALA,EACP,KAIE,KAAK,WAJkC,EAAzC,UAAU,mBAAG,sBAAsB,CAAC,KAAK,KAAA,EAC1B,MAAM,GAGnB,KAAK,eAHc,EACrB,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EARH,6FAQL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,0BAA0B,EACtD,+BAA6B,UAAY,EACzC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,iBAAe,KAAG,MAAQ,IAAM,IAAI;QACzD,8BAAM,SAAS,EAAC,yBAAyB,iBAAiB,MAAM,UAAO,IAAG,OAAO,CAAQ;QACzF,8BAAM,SAAS,EAAC,2BAA2B,iBAAiB,MAAM,YAAS,IAAG,QAAQ,CAAQ,CAC1F,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,mBAAmB,EAAE;IACjC,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,qBAAqB;CACnC,CAAC,CAAC"}

package/dist/out-tsc/key-value-list/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SpsKeyValueList";
+export * from "./SpsKeyValueListItem";
+export * from "./SpsKeyValueList.examples";

package/dist/out-tsc/key-value-list/index.js

@@ -0,0 +1,4 @@
+export * from "./SpsKeyValueList";
+export * from "./SpsKeyValueListItem";
+export * from "./SpsKeyValueList.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/key-value-list/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/key-value-list/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4BAA4B,CAAC"}

package/dist/out-tsc/key-value-tag/SpsKeyValueTag.d.ts

@@ -0,0 +1,16 @@
+import { SpsIcon, TagKind } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    color: PropTypes.Requireable<TagKind>;
+    href: PropTypes.Requireable<string>;
+    icon: PropTypes.Requireable<SpsIcon>;
+    tagKey: PropTypes.Validator<string>;
+    value: PropTypes.Validator<string>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsKeyValueTagProps = PropTypes.InferTS<typeof propTypes, HTMLSpanElement>;
+export declare function SpsKeyValueTag(props: SpsKeyValueTagProps): JSX.Element;
+export {};

package/dist/out-tsc/key-value-tag/SpsKeyValueTag.examples.d.ts

@@ -0,0 +1,2 @@
+import type { DSReactExamples } from "@spscommerce/ds-shared";
+export declare const SpsKeyValueTagExamples: DSReactExamples;

package/dist/out-tsc/key-value-tag/SpsKeyValueTag.examples.js

@@ -0,0 +1,33 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { code } from "@spscommerce/utils";
+export var SpsKeyValueTagExamples = {
+    basic: {
+        label: "Basic",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsKeyValueTag tagKey=\"Foo\" value=\"1234\"/>\n                            </>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsKeyValueTag tagKey=\"Foo\" value=\"1234\"/>\n                            </>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    icon: {
+        label: "Icon",
+        examples: {
+            basic: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsKeyValueTag icon={SpsIcon.CREDIT_CARD} tagKey=\"Baz\" value=\"1234\" />\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsKeyValueTag icon={SpsIcon.CREDIT_CARD} tagKey=\"Baz\" value=\"1234\" />\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    link: {
+        label: "Link",
+        examples: {
+            basic: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsKeyValueTag icon={SpsIcon.DOLLAR_SIGN} tagKey=\"Bar\" value=\"1234\" href=\"https://www.google.com\" />\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsKeyValueTag icon={SpsIcon.DOLLAR_SIGN} tagKey=\"Bar\" value=\"1234\" href=\"https://www.google.com\" />\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=SpsKeyValueTag.examples.js.map

package/dist/out-tsc/key-value-tag/SpsKeyValueTag.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsKeyValueTag.examples.js","sourceRoot":"","sources":["../../../src/key-value-tag/SpsKeyValueTag.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,sBAAsB,GAAoB;IACrD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,0WAAA,uSAQF,IAAA;aACV;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,qYAAA,kUAQF,IAAA;aACV;SACF;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,qaAAA,kWAQF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/key-value-tag/SpsKeyValueTag.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { SpsIcon, TagKind } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import { SpsTag } from "../tag";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    color: "TagKind",
+    href: "String",
+    icon: "SpsIcon",
+    tagKey: {
+        type: "String",
+        required: true,
+    },
+    value: {
+        type: "String",
+        required: true,
+    },
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { color: PropTypes.enumValue(TagKind), href: PropTypes.string, icon: PropTypes.enumValue(SpsIcon), tagKey: PropTypes.string.isRequired, value: PropTypes.string.isRequired });
+export function SpsKeyValueTag(props) {
+    var _a = props.color, color = _a === void 0 ? TagKind.KEY : _a, testId = props["data-testid"], href = props.href, icon = props.icon, tagKey = props.tagKey, value = props.value, unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["color", "data-testid", "href", "icon", "tagKey", "value", "unsafelyReplaceClassName"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-key-value-tag", href && "sps-key-value-tag--link");
+    return (React.createElement("span", __assign({ className: classes, "data-testid": testId + "__key-value-tag" }, rest),
+        React.createElement(SpsTag, { icon: icon, kind: color, className: "sps-key-value-tag--key" }, tagKey),
+        React.createElement(SpsTag, { className: "sps-key-value-tag--value" },
+            href && React.createElement("a", { href: href }, value),
+            !href && value)));
+}
+Object.assign(SpsKeyValueTag, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsKeyValueTag",
+});
+//# sourceMappingURL=SpsKeyValueTag.js.map

package/dist/out-tsc/key-value-tag/SpsKeyValueTag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsKeyValueTag.js","sourceRoot":"","sources":["../../../src/key-value-tag/SpsKeyValueTag.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAE3C,IAAM,QAAQ,GAAG;IACf,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,QAAQ;IACd,IAAI,EAAE,SAAS;IACf,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,IAAI;KACf;IACD,KAAK,EAAE;QACL,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,KAAK,EAAE,SAAS,CAAC,SAAS,CAAU,OAAO,CAAC,EAC5C,IAAI,EAAE,SAAS,CAAC,MAAM,EACtB,IAAI,EAAE,SAAS,CAAC,SAAS,CAAU,OAAO,CAAC,EAC3C,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,EACnC,KAAK,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU,GACnC,CAAC;AAIF,MAAM,UAAU,cAAc,CAAC,KAA0B;IAErD,IAAA,KAQE,KAAK,MARY,EAAnB,KAAK,mBAAG,OAAO,CAAC,GAAG,KAAA,EACJ,MAAM,GAOnB,KAAK,eAPc,EACrB,IAAI,GAMF,KAAK,KANH,EACJ,IAAI,GAKF,KAAK,KALH,EACJ,MAAM,GAIJ,KAAK,OAJD,EACN,KAAK,GAGH,KAAK,MAHF,EACL,wBAAwB,GAEtB,KAAK,yBAFiB,EACrB,IAAI,UACL,KAAK,EATH,uFASL,CADQ,CACC;IAEV,IAAM,OAAO,GAAG,IAAI,CAClB,wBAAwB,IAAI,mBAAmB,EAC/C,IAAI,IAAI,yBAAyB,CAClC,CAAC;IAEF,OAAO,CACL,uCAAM,SAAS,EAAE,OAAO,iBAAkB,MAAM,oBAAiB,IAAM,IAAI;QACzE,oBAAC,MAAM,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAC,wBAAwB,IAChE,MAAM,CACA;QACT,oBAAC,MAAM,IAAC,SAAS,EAAC,0BAA0B;YACzC,IAAI,IAAI,2BAAG,IAAI,EAAE,IAAI,IAAG,KAAK,CAAK;YAClC,CAAC,IAAI,IAAI,KAAK,CACR,CACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE;IAC5B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,gBAAgB;CAC9B,CAAC,CAAC"}

package/dist/out-tsc/key-value-tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./SpsKeyValueTag";
+export * from "./SpsKeyValueTag.examples";

package/dist/out-tsc/key-value-tag/index.js

@@ -0,0 +1,3 @@
+export * from "./SpsKeyValueTag";
+export * from "./SpsKeyValueTag.examples";
+//# sourceMappingURL=index.js.map

package/dist/out-tsc/key-value-tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/key-value-tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC"}