@spscommerce/ds-react 5.20.2 → 5.20.3-ie

package/dist/out-tsc/textarea/SpsTextarea.js

@@ -0,0 +1,71 @@
+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";
+import { FauxChangeEvent } from "../utils/FauxChangeEvent";
+import { useFormControlId } from "../form/hooks/useFormControlId";
+import { SpsFormComponentWrapper } from "../form/SpsFormComponentWrapper";
+var propsDoc = {
+    disabled: "boolean",
+    formMeta: "SpsFormFieldMeta<string>",
+    name: "string",
+    onChange: "ChangeEventHandler",
+    placeholder: "string",
+    rows: "number",
+    value: "string",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { disabled: PropTypes.bool, formControl: PropTypes.impl(), formMeta: PropTypes.impl(), name: PropTypes.string, onChange: PropTypes.fun(), placeholder: PropTypes.string, ref: PropTypes.ref(), rows: PropTypes.number, value: PropTypes.string });
+export function SpsTextarea(_a) {
+    var className = _a.className, _b = _a.disabled, disabled = _b === void 0 ? false : _b, formControl = _a.formControl, formMeta = _a.formMeta, id = _a.id, name = _a.name, onChange = _a.onChange, _c = _a.placeholder, placeholder = _c === void 0 ? "" : _c, ref = _a.ref, _d = _a.rows, rows = _d === void 0 ? 2 : _d, testId = _a["data-testid"], unsafelyReplaceClassName = _a.unsafelyReplaceClassName, _e = _a.value, value = _e === void 0 ? "" : _e, rest = __rest(_a, ["className", "disabled", "formControl", "formMeta", "id", "name", "onChange", "placeholder", "ref", "rows", "data-testid", "unsafelyReplaceClassName", "value"]);
+    var meta = formMeta || formControl;
+    var _f = useFormControlId(id, meta), wrapperId = _f.wrapperId, controlId = _f.controlId;
+    var textarea = React.useRef();
+    function setAndPropagateValue(newValue, event) {
+        if (meta) {
+            meta.setValue(newValue);
+            meta.markAsDirty();
+        }
+        if (onChange) {
+            onChange(event || new FauxChangeEvent(textarea.current));
+        }
+    }
+    function clear() {
+        textarea.current.value = "";
+        setAndPropagateValue("");
+    }
+    function handleChange(event) {
+        setAndPropagateValue(event.target.value, event);
+    }
+    var classes = clsx(unsafelyReplaceClassName || "sps-textarea", className);
+    return (React.createElement(SpsFormComponentWrapper, { id: wrapperId, className: classes, formControl: formControl, formMeta: formMeta, inputRef: textarea, ref: ref, "data-testid": testId },
+        React.createElement("div", { className: "position-relative" },
+            React.createElement("textarea", __assign({ ref: textarea, rows: rows, "data-testid": testId + "__input", className: "sps-form-control input--clearable", id: controlId, name: name, placeholder: placeholder, onChange: handleChange, "aria-label": placeholder, value: value || "", disabled: disabled }, rest)),
+            value && !disabled && (React.createElement("i", { "data-testid": testId + "__input_clear", className: "sps-icon sps-icon-x-circle sps-form-control__clear-btn", onClick: clear })))));
+}
+Object.assign(SpsTextarea, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsTextarea",
+});
+//# sourceMappingURL=SpsTextarea.js.map

package/dist/out-tsc/textarea/SpsTextarea.js.map

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

package/dist/out-tsc/textarea/index.d.ts

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

package/dist/out-tsc/textarea/index.js

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

package/dist/out-tsc/textarea/index.js.map

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

package/dist/out-tsc/tile-list/SpsTile.d.ts

@@ -0,0 +1,16 @@
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    href: PropTypes.Requireable<string>;
+    target: PropTypes.Requireable<string>;
+    icon: PropTypes.Validator<PropTypes.ReactNodeOrRenderFn>;
+    error: PropTypes.Requireable<boolean>;
+    title: PropTypes.Validator<string>;
+    warning: PropTypes.Requireable<boolean>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsTileProps = PropTypes.InferTS<typeof propTypes, HTMLAnchorElement>;
+export declare function SpsTile(props: SpsTileProps): JSX.Element;
+export {};

package/dist/out-tsc/tile-list/SpsTile.js

@@ -0,0 +1,60 @@
+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";
+import { contentOf } from "../utils/contentOf";
+var propsDoc = {
+    href: "string",
+    icon: { type: "ReactNodeOrRenderFn", required: "true" },
+    error: "boolean",
+    title: { type: "string", required: "true" },
+    warning: "boolean",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { href: PropTypes.string, target: PropTypes.string, icon: PropTypes.nodeOrRenderFn.isRequired, error: PropTypes.bool, title: PropTypes.string.isRequired, warning: PropTypes.bool });
+export function SpsTile(props) {
+    var className = props.className, href = props.href, target = props.target, icon = props.icon, _a = props.error, error = _a === void 0 ? false : _a, title = props.title, unsafelyReplaceClassName = props.unsafelyReplaceClassName, _b = props.warning, warning = _b === void 0 ? false : _b, rest = __rest(props, ["className", "href", "target", "icon", "error", "title", "unsafelyReplaceClassName", "warning"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-tile", className, error && "sps-tile--error", warning && "sps-tile--warning");
+    React.useEffect(function () {
+        if (warning && error) {
+            throw new Error("Tile should have warning or error, not both");
+        }
+    }, [warning, error]);
+    return (React.createElement("div", { className: "sps-tile-container sfg-col-3 sfg-break-col-6" },
+        React.createElement("a", __assign({ className: classes, href: href, target: target, rel: target === "_blank" ? "noopener noreferrer" : undefined }, rest),
+            (warning || error) && (React.createElement("div", { className: "sps-tile--icon" },
+                warning && React.createElement("i", { className: clsx("sps-icon", "sps-icon-status-warning") }),
+                error && React.createElement("i", { className: clsx("sps-icon", "sps-icon-ban") }))),
+            React.createElement("div", { className: "sps-tile--content" },
+                React.createElement("div", { className: "sps-tile--image" }, typeof icon === "string" ? (React.createElement("img", { className: "sps-tile--image", src: icon, alt: "" })) : contentOf(icon)),
+                React.createElement("div", { className: "sps-tile--title" },
+                    React.createElement("p", null,
+                        title,
+                        target === "_blank" && (React.createElement("i", { className: clsx("sps-icon", "sps-icon-tabs") }))))))));
+}
+Object.assign(SpsTile, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsTile",
+});
+//# sourceMappingURL=SpsTile.js.map

package/dist/out-tsc/tile-list/SpsTile.js.map

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

package/dist/out-tsc/tile-list/SpsTileList.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 SpsTileListProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsTileList(props: SpsTileListProps): JSX.Element;
+export {};

package/dist/out-tsc/tile-list/SpsTileList.examples.d.ts

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

package/dist/out-tsc/tile-list/SpsTileList.examples.js

@@ -0,0 +1,36 @@
+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 SpsTileListExamples = {
+    basic: {
+        label: "Basic",
+        examples: {
+            basic: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function Component() {\n                        const apps = [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ];\n\n                        return (\n                            <>\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const apps = [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ];\n\n                        return (\n                            <>\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    singleTile: {
+        label: "Single Tile",
+        examples: {
+            singleTile: {
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                function Component() {\n                    return (\n                        <>\n                            <SpsTileList>\n                                <SpsTile\n                                    title=\"Design System\"\n                                    icon={\"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\"}\n                                    onClick={() => console.log(\"Go to Design System\")}\n                                />\n                            </SpsTileList>\n                        </>\n                    )\n                }\n            "], ["\n                function Component() {\n                    return (\n                        <>\n                            <SpsTileList>\n                                <SpsTile\n                                    title=\"Design System\"\n                                    icon={\"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\"}\n                                    onClick={() => console.log(\"Go to Design System\")}\n                                />\n                            </SpsTileList>\n                        </>\n                    )\n                }\n            "]))),
+            },
+            tooltips: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsTileList>\n                                    <SpsTile\n                                        title=\"Assortment\"\n                                        icon={\"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\"}\n                                        error\n                                        id=\"error-app\"\n                                    />\n                                </SpsTileList>\n                                <SpsTooltip for=\"error-app\" title=\"Error\">\n                                    Your application has been suspended\n                                </SpsTooltip>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                            <>\n                                <SpsTileList>\n                                    <SpsTile\n                                        title=\"Assortment\"\n                                        icon={\"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\"}\n                                        error\n                                        id=\"error-app\"\n                                    />\n                                </SpsTileList>\n                                <SpsTooltip for=\"error-app\" title=\"Error\">\n                                    Your application has been suspended\n                                </SpsTooltip>\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    sortableTiles: {
+        label: "Sortable Tiles",
+        examples: {
+            basic: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        const [sort, setSort] = React.useState([{ key: 'name', direction: SortDirection.ASCENDING }]);\n\n                        const apps = React.useMemo(() => [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ].sort((a, b) => {\n                            if (!sort.length) {\n                                return 0;\n                            }\n\n                            const [{ key, direction }] = sort;\n\n                            // straightforward sort by name\n                            if (key === 'name') {\n                                if (a.name < b.name) {\n                                    return direction === SortDirection.ASCENDING ? -1 : 1;\n                                } else if (a.name > b.name) {\n                                    return direction === SortDirection.ASCENDING ? 1 : -1;\n                                }\n                            }\n                            \n                            // custom sort by status\n                            if (key === 'status') {\n                                if (a.error + a.warning < b.error + b.warning) {\n                                    return direction === SortDirection.ASCENDING ? -1 : 1;\n                                } else if (a.error + a.warning > b.error + b.warning) {\n                                    return direction === SortDirection.ASCENDING ? 1 : -1;\n                                }\n                            }\n\n                            return 0;\n                        }), [sort]);\n\n                        return (\n                            <>\n                                <SpsSortingHeader sort={sort} onSortChange={setSort} className=\"mb-2\">\n                                    <SpsSortingHeaderCell sortKey=\"name\">\n                                        Name\n                                    </SpsSortingHeaderCell>\n                                    <SpsSortingHeaderCell sortKey=\"status\">\n                                        Status\n                                    </SpsSortingHeaderCell>\n                                </SpsSortingHeader>\n\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "], ["\n                    function Component() {\n                        const [sort, setSort] = React.useState([{ key: 'name', direction: SortDirection.ASCENDING }]);\n\n                        const apps = React.useMemo(() => [\n                            {\n                                name: \"App Manager\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/generic/generic.svg\",\n                            },\n                            {\n                                name: \"Assortment\",\n                                warning: false,\n                                error: false,\n                                href: \"https://www.google.com\",\n                                target: \"_blank\",\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/barcode/barcode.svg\",\n                            },\n                            {\n                                name: \"Community\",\n                                warning: false,\n                                error: false,\n                                onClick: () => console.log(\"Community\"),\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/community/community.svg\",\n                            },\n                            {\n                                name: \"Design System\",\n                                warning: false,\n                                error: true,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/design-system/design-system.svg\",\n                            },\n                            {\n                                name: \"Nexus\",\n                                warning: false,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/nexus/nexus.svg\",\n                            },\n                            {\n                                name: \"Testing & Certification\",\n                                warning: true,\n                                error: false,\n                                icon: \"https://cdn.dev.spsc.io/web/framework/assets/21.05.01/icons/checkmark/checkmark.svg\",\n                            },\n                        ].sort((a, b) => {\n                            if (!sort.length) {\n                                return 0;\n                            }\n\n                            const [{ key, direction }] = sort;\n\n                            // straightforward sort by name\n                            if (key === 'name') {\n                                if (a.name < b.name) {\n                                    return direction === SortDirection.ASCENDING ? -1 : 1;\n                                } else if (a.name > b.name) {\n                                    return direction === SortDirection.ASCENDING ? 1 : -1;\n                                }\n                            }\n                            \n                            // custom sort by status\n                            if (key === 'status') {\n                                if (a.error + a.warning < b.error + b.warning) {\n                                    return direction === SortDirection.ASCENDING ? -1 : 1;\n                                } else if (a.error + a.warning > b.error + b.warning) {\n                                    return direction === SortDirection.ASCENDING ? 1 : -1;\n                                }\n                            }\n\n                            return 0;\n                        }), [sort]);\n\n                        return (\n                            <>\n                                <SpsSortingHeader sort={sort} onSortChange={setSort} className=\"mb-2\">\n                                    <SpsSortingHeaderCell sortKey=\"name\">\n                                        Name\n                                    </SpsSortingHeaderCell>\n                                    <SpsSortingHeaderCell sortKey=\"status\">\n                                        Status\n                                    </SpsSortingHeaderCell>\n                                </SpsSortingHeader>\n\n                                <SpsTileList>\n                                    {apps.map((app, index) => {\n                                        return (\n                                            <SpsTile\n                                                key={index}\n                                                title={app.name}\n                                                warning={app.warning}\n                                                error={app.error}\n                                                href={app.href}\n                                                target={app.target}\n                                                icon={app.icon}\n                                                onClick={app.onClick}\n                                            />\n                                        )\n                                    })}\n                                </SpsTileList>\n                            </>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=SpsTileList.examples.js.map

package/dist/out-tsc/tile-list/SpsTileList.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsTileList.examples.js","sourceRoot":"","sources":["../../../src/tile-list/SpsTileList.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,mBAAmB,GAAoB;IAClD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,08GAAA,u4GAiEF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,aAAa;QACpB,QAAQ,EAAE;YACR,UAAU,EAAE;gBACV,KAAK,EAAE,IAAI,osBAAA,ioBAcN,IAAA;aACN;YACD,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,g8BAAA,63BAkBF,IAAA;aACV;SACF;KACF;IAED,aAAa,EAAE;QACb,KAAK,EAAE,gBAAgB;QACvB,QAAQ,EAAE;YACR,KAAK,EAAE;gBACL,KAAK,EAAE,IAAI,05KAAA,u1KAsGF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/tile-list/SpsTileList.js

@@ -0,0 +1,38 @@
+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 = {};
+var propTypes = __assign({}, PropTypes.spsGlobalPropTypes);
+export function SpsTileList(props) {
+    var children = props.children, unsafelyReplaceClassName = props.unsafelyReplaceClassName, testId = props["data-testid"], className = props.className, rest = __rest(props, ["children", "unsafelyReplaceClassName", "data-testid", "className"]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-tile-list", className || "sfg-row");
+    return (React.createElement("div", __assign({ className: classes }, rest), children));
+}
+Object.assign(SpsTileList, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsTileList",
+});
+//# sourceMappingURL=SpsTileList.js.map

package/dist/out-tsc/tile-list/SpsTileList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsTileList.js","sourceRoot":"","sources":["../../../src/tile-list/SpsTileList.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,EAAE,CAAC;AAEpB,IAAM,SAAS,gBACV,SAAS,CAAC,kBAAkB,CAChC,CAAC;AAIF,MAAM,UAAU,WAAW,CAAC,KAAuB;IAE/C,IAAA,QAAQ,GACN,KAAK,SADC,EAAE,wBAAwB,GAChC,KAAK,yBAD2B,EAAiB,MAAM,GACvD,KAAK,eADkD,EAAE,SAAS,GAClE,KAAK,UAD6D,EAAK,IAAI,UAC3E,KAAK,EAFH,oEAEL,CAD8E,CACrE;IAEV,IAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,IAAI,eAAe,EAAE,SAAS,IAAI,SAAS,CAAC,CAAC;IAE1F,OAAO,CACL,sCAAK,SAAS,EAAE,OAAO,IAAM,IAAI,GAC9B,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;IACzB,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,aAAa;CAC3B,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from "./SpsTile";
+export * from "./SpsTileList";
+export * from "./SpsTileList.examples";

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

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

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

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

package/dist/out-tsc/toggle/SpsToggle.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import type { SpsFormControl } from "../form/hooks/formControl";
+import type { SpsFormFieldMeta } from "../form/hooks/useSpsForm";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    active: PropTypes.Requireable<boolean>;
+    activeDescription: PropTypes.Deprecated<string>;
+    activeLabel: PropTypes.Deprecated<string>;
+    description: PropTypes.Requireable<string>;
+    disabled: PropTypes.Requireable<boolean>;
+    formControl: PropTypes.Requireable<SpsFormControl<boolean>>;
+    formMeta: PropTypes.Requireable<SpsFormFieldMeta<boolean>>;
+    id: PropTypes.Requireable<string>;
+    inactiveDescription: PropTypes.Deprecated<string>;
+    inactiveLabel: PropTypes.Deprecated<string>;
+    label: PropTypes.Requireable<string>;
+    large: PropTypes.Requireable<boolean>;
+    onChange: PropTypes.Requireable<(isActive: boolean) => void>;
+    ref: PropTypes.Requireable<React.MutableRefObject<HTMLDivElement>>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsToggleProps = PropTypes.InferTS<typeof propTypes, HTMLInputElement>;
+export declare function SpsToggle(props: SpsToggleProps): JSX.Element;
+export {};

package/dist/out-tsc/toggle/SpsToggle.examples.d.ts

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

package/dist/out-tsc/toggle/SpsToggle.examples.js

@@ -0,0 +1,37 @@
+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 SpsToggleExamples = {
+    small: {
+        label: "Small",
+        examples: {
+            a_small: {
+                react: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: false\n                        });\n\n                        return <SpsToggle formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                            label=\"Main Label\"\n                            description=\"Extra descriptive text\"\n                        />;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: false\n                        });\n\n                        return <SpsToggle formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                            label=\"Main Label\"\n                            description=\"Extra descriptive text\"\n                        />;\n                    }\n                "]))),
+            },
+            b_changeHandler: {
+                description: "With UseState",
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        function changeHandler() {\n                            setActive(!checked);\n                        }\n                        const [active, setActive] = React.useState();\n                        return (\n                            <SpsToggle active={active} onChange={changeHandler}/>\n                        )\n                    }\n                "], ["\n                    function DemoComponent() {\n                        function changeHandler() {\n                            setActive(!checked);\n                        }\n                        const [active, setActive] = React.useState();\n                        return (\n                            <SpsToggle active={active} onChange={changeHandler}/>\n                        )\n                    }\n                "]))),
+            },
+        },
+    },
+    b_large: {
+        label: "Large",
+        examples: {
+            a_large: {
+                react: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: true\n                        });\n\n                        return <SpsToggle large formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                        />;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggle: true\n                        });\n\n                        return <SpsToggle large formMeta={formMeta.fields.toggle}\n                            active={formValue.toggle}\n                        />;\n                    }\n                "]))),
+            },
+        },
+    },
+    d_disabled: {
+        label: "Disabled",
+        examples: {
+            disabled: {
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggleA: false,\n                            toggleB: true,\n                        });\n\n                        return <>\n                            <SpsToggle formMeta={formMeta.fields.toggleA}\n                                active={formValue.toggleA}\n                                label=\"Main Label\"\n                                description=\"Extra descriptive text\"\n                                disabled\n                            />\n                            <SpsToggle formMeta={formMeta.fields.toggleB}\n                                active={formValue.toggleB}\n                                label=\"Main Label\"\n                                description=\"Extra descriptive text\"\n                                disabled\n                            />\n                        </>;\n                    }\n                "], ["\n                    function DemoComponent() {\n                        const { formValue, formMeta, updateForm } = useSpsForm({\n                            toggleA: false,\n                            toggleB: true,\n                        });\n\n                        return <>\n                            <SpsToggle formMeta={formMeta.fields.toggleA}\n                                active={formValue.toggleA}\n                                label=\"Main Label\"\n                                description=\"Extra descriptive text\"\n                                disabled\n                            />\n                            <SpsToggle formMeta={formMeta.fields.toggleB}\n                                active={formValue.toggleB}\n                                label=\"Main Label\"\n                                description=\"Extra descriptive text\"\n                                disabled\n                            />\n                        </>;\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=SpsToggle.examples.js.map

package/dist/out-tsc/toggle/SpsToggle.examples.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsToggle.examples.js","sourceRoot":"","sources":["../../../src/toggle/SpsToggle.examples.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,oBAAoB,CAAC;AAG1C,MAAM,CAAC,IAAM,iBAAiB,GAAoB;IAChD,KAAK,EAAE;QACL,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,ilBAAA,8gBAYF,IAAA;aACV;YACD,eAAe,EAAE;gBACf,WAAW,EAAE,eAAe;gBAC5B,KAAK,EAAE,IAAI,sfAAA,mbAUF,IAAA;aACV;SACF;KACF;IACD,OAAO,EAAE;QACP,KAAK,EAAE,OAAO;QACd,QAAQ,EAAE;YACR,OAAO,EAAE;gBACP,KAAK,EAAE,IAAI,geAAA,6ZAUF,IAAA;aACV;SACF;KACF;IACD,UAAU,EAAE;QACV,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE;YACR,QAAQ,EAAE;gBACR,KAAK,EAAE,IAAI,ukCAAA,ogCAsBF,IAAA;aACV;SACF;KACF;CACF,CAAC"}

package/dist/out-tsc/toggle/SpsToggle.js

@@ -0,0 +1,95 @@
+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 clsx from "clsx";
+import * as React from "react";
+import { useFormControlId } from "../form/hooks/useFormControlId";
+import { SpsFormComponentWrapper } from "../form/SpsFormComponentWrapper";
+import { useCheckDeprecatedProps } from "../utils/index";
+import * as PropTypes from "../prop-types";
+var propsDoc = {
+    active: "boolean",
+    activeDescription: { type: "string", deprecated: true },
+    activeLabel: { type: "string", deprecated: true },
+    description: "string",
+    disabled: "boolean",
+    formMeta: "SpsFormFieldMeta<boolean>",
+    inactiveDescription: { type: "string", deprecated: true },
+    inactiveLabel: { type: "string", deprecated: true },
+    label: "string",
+    large: "boolean",
+    onChange: "(isActive: boolean) => void",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { active: PropTypes.bool, activeDescription: PropTypes.deprecated(PropTypes.string), activeLabel: PropTypes.deprecated(PropTypes.string), description: PropTypes.string, disabled: PropTypes.bool, formControl: PropTypes.impl(), formMeta: PropTypes.impl(), id: PropTypes.string, inactiveDescription: PropTypes.deprecated(PropTypes.string), inactiveLabel: PropTypes.deprecated(PropTypes.string), label: PropTypes.string, large: PropTypes.bool, onChange: PropTypes.fun(), ref: PropTypes.ref() });
+export function SpsToggle(props) {
+    var activeProp = props.active, activeDescription = props.activeDescription, activeLabel = props.activeLabel, className = props.className, _a = props.description, description = _a === void 0 ? activeDescription : _a, disabled = props.disabled, formControl = props.formControl, formMeta = props.formMeta, id = props.id, inactiveDescription = props.inactiveDescription, inactiveLabel = props.inactiveLabel, _b = props.label, label = _b === void 0 ? activeLabel : _b, large = props.large, onChange = props.onChange, ref = props.ref, testId = props["data-testid"], unsafelyReplaceClassName = props.unsafelyReplaceClassName, rest = __rest(props, ["active", "activeDescription", "activeLabel", "className", "description", "disabled", "formControl", "formMeta", "id", "inactiveDescription", "inactiveLabel", "label", "large", "onChange", "ref", "data-testid", "unsafelyReplaceClassName"]);
+    useCheckDeprecatedProps("SpsToggle", propsDoc, props);
+    var meta = formMeta || formControl;
+    var _c = __read(React.useState(activeProp), 2), active = _c[0], setActive = _c[1];
+    var _d = useFormControlId(id, meta), wrapperId = _d.wrapperId, controlId = _d.controlId;
+    var statusLabelID = wrapperId + "_status-label";
+    var descriptionID = wrapperId + "_description";
+    var inputElement = React.useRef();
+    React.useEffect(function () { return setActive(activeProp); }, [activeProp]);
+    function handleChange(event) {
+        setActive(event.target.checked);
+        if (meta) {
+            meta.setValue(event.target.checked);
+            meta.markAsDirty();
+        }
+        if (onChange) {
+            onChange(event.target.checked);
+        }
+        inputElement.current.focus();
+    }
+    var classes = clsx(unsafelyReplaceClassName || "sps-toggle", active && "sps-toggle--active", large && "sps-toggle--large", disabled && "sps-toggle--disabled", className);
+    return (React.createElement(SpsFormComponentWrapper, { id: wrapperId, formControl: formControl, formMeta: formMeta, inputRef: inputElement, ref: ref, "data-testid": "" + testId },
+        React.createElement("div", { className: classes },
+            React.createElement("input", __assign({ type: "checkbox", ref: inputElement, className: "sps-toggle__input", id: controlId, checked: active || false, disabled: disabled, onChange: handleChange, "aria-describedby": statusLabelID + "," + descriptionID, "data-testid": testId + "__input" }, rest)),
+            React.createElement("span", { className: "sps-toggle__slider" }),
+            label
+                && (React.createElement("label", { className: "sps-toggle__status-label", htmlFor: controlId, id: statusLabelID }, label)),
+            description
+                && (React.createElement("span", { className: "sps-toggle__description", id: descriptionID }, description)))));
+}
+Object.assign(SpsToggle, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsToggle",
+});
+//# sourceMappingURL=SpsToggle.js.map

package/dist/out-tsc/toggle/SpsToggle.js.map

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

package/dist/out-tsc/toggle/index.d.ts

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

package/dist/out-tsc/toggle/index.js

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

package/dist/out-tsc/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/toggle/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC"}

package/dist/out-tsc/tooltip/SpsTooltip.d.ts

@@ -0,0 +1,29 @@
+import { Position, TooltipKind, TooltipShowTrigger } from "@spscommerce/ds-shared";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+export declare enum TooltipVisibility {
+    VISIBLE = "visible",
+    DEFER_VISIBLE = "defer_visible",
+    HIDDEN = "hidden",
+    DELAYED_HIDDEN = "delayed_hidden"
+}
+export declare function toggleTooltipState(state: TooltipVisibility): TooltipVisibility.VISIBLE | TooltipVisibility.HIDDEN;
+declare const propTypes: {
+    for: PropTypes.Validator<string | React.MutableRefObject<any>>;
+    hideDelay: PropTypes.Requireable<number>;
+    isShown: PropTypes.Requireable<TooltipVisibility>;
+    kind: PropTypes.Requireable<TooltipKind>;
+    offsets: PropTypes.Requireable<number[]>;
+    onDeferred: PropTypes.Requireable<() => void>;
+    position: PropTypes.Requireable<Position>;
+    altPosition: PropTypes.Requireable<Position>;
+    showOn: PropTypes.Requireable<TooltipShowTrigger>;
+    title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsTooltipProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsTooltip({ children, className, for: forProp, "data-testid": testId, hideDelay, isShown, kind, offsets, onDeferred, position, altPosition, showOn, style, title, unsafelyReplaceClassName, }: SpsTooltipProps): React.ReactPortal;
+export {};

package/dist/out-tsc/tooltip/SpsTooltip.examples.d.ts

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