@spscommerce/ds-react 5.10.3 → 5.10.5-ie.2

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;

package/dist/out-tsc/tooltip/SpsTooltip.examples.js

@@ -0,0 +1,119 @@
+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 SpsTooltipExamples = {
+    basic: {
+        label: "Basic",
+        description: "Info about basic usage of tooltip",
+        examples: {
+            basic: {
+                description: code(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n                  <p>There are two ways to tell the tooltip what to attach to. The first is to\n                  pass in a ref.</p>\n                "], ["\n                  <p>There are two ways to tell the tooltip what to attach to. The first is to\n                  pass in a ref.</p>\n                "]))),
+                react: code(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip for={target} title=\"Tooltip Title\">\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip for={target} title=\"Tooltip Title\">\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "]))),
+            },
+            withElementId: {
+                description: code(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n                  <p>You can also pass in the ID of the element you want to attach to.</p>\n                "], ["\n                  <p>You can also pass in the ID of the element you want to attach to.</p>\n                "]))),
+                react: code(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n                    function Component() {\n                        return (\n                          <React.Fragment>\n                            <SpsButton id=\"testbtn\" kind={ButtonKind.ICON} icon={SpsIcon.ELLIPSES} aria-labelledby=\"withEleIdTooltip\" />\n                            <SpsTooltip for=\"testbtn\" id=\"withEleIdTooltip\" title=\"Tooltip Title\">\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        return (\n                          <React.Fragment>\n                            <SpsButton id=\"testbtn\" kind={ButtonKind.ICON} icon={SpsIcon.ELLIPSES} aria-labelledby=\"withEleIdTooltip\" />\n                            <SpsTooltip for=\"testbtn\" id=\"withEleIdTooltip\" title=\"Tooltip Title\">\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    position: {
+        label: "Position",
+        examples: {
+            topLeft: {
+                description: "If there is no room for the tooltip on screen at the position you specify, it will appear on the opposite side.",
+                react: code(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div  className=\"bg-gray200 text-center p-2\"  aria-labelledby=\"tooltip-target-top-left\" ref={target} id=\"target-top-left\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-top-left\" position={Position.TOP_LEFT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div  className=\"bg-gray200 text-center p-2\"  aria-labelledby=\"tooltip-target-top-left\" ref={target} id=\"target-top-left\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-top-left\" position={Position.TOP_LEFT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            topMiddle: {
+                react: code(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-top-middle\" >\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-top-middle\" position={Position.TOP_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-top-middle\" >\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-top-middle\" position={Position.TOP_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            topRight: {
+                react: code(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-top-right\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-top-right\" position={Position.TOP_RIGHT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-top-right\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-top-right\" position={Position.TOP_RIGHT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            rightTop: {
+                react: code(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-right-top\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-right-top\" position={Position.RIGHT_TOP}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-right-top\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-right-top\" position={Position.RIGHT_TOP}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            rightMiddle: {
+                react: code(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-right-middle\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-right-middle\" position={Position.RIGHT_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-right-middle\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-right-middle\" position={Position.RIGHT_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            rightBottom: {
+                react: code(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-right-bottom\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-right-bottom\" position={Position.RIGHT_BOTTOM}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-right-bottom\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-right-bottom\" position={Position.RIGHT_BOTTOM}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            bottomRight: {
+                react: code(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-bottom-right\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-bottom-right\" position={Position.BOTTOM_RIGHT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-bottom-right\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-bottom-right\" position={Position.BOTTOM_RIGHT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            bottomMiddle: {
+                react: code(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-bottom-middle\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-bottom-middle\" position={Position.BOTTOM_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-bottom-middle\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-bottom-middle\" position={Position.BOTTOM_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            bottomLeft: {
+                react: code(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-bottom-left\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-bottom-left\" position={Position.BOTTOM_LEFT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-bottom-left\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-bottom-left\" position={Position.BOTTOM_LEFT}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            leftBottom: {
+                react: code(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-left-bottom\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"tooltip-target-left-bottom\" position={Position.LEFT_BOTTOM}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-left-bottom\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"tooltip-target-left-bottom\" position={Position.LEFT_BOTTOM}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            leftMiddle: {
+                react: code(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-left-middle\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-left-middle\" position={Position.LEFT_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-left-middle\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"tooltip-target-left-middle\" position={Position.LEFT_MIDDLE}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            leftTop: {
+                react: code(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-left-top\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"tooltip-target-left-top\" position={Position.LEFT_TOP}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"tooltip-target-left-top\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"tooltip-target-left-top\" position={Position.LEFT_TOP}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    style: {
+        label: "Style",
+        examples: {
+            Help: {
+                react: code(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"helpTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"helpTooltip\" kind={TooltipKind.HELP}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"helpTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"helpTooltip\" kind={TooltipKind.HELP}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            error: {
+                react: code(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"errorTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"errorTooltip\" kind={TooltipKind.ERROR}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"errorTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target}  id=\"errorTooltip\" kind={TooltipKind.ERROR}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            warning: {
+                react: code(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"warningTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"warningTooltip\" kind={TooltipKind.WARNING}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"warningTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"warningTooltip\" kind={TooltipKind.WARNING}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+            container: {
+                react: code(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"containerTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"containerTooltip\"  kind={TooltipKind.CONTAINER}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"containerTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} id=\"containerTooltip\"  kind={TooltipKind.CONTAINER}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    showOnClick: {
+        label: "Show on click",
+        examples: {
+            showOnClick: {
+                react: code(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip for={target} showOn={TooltipShowTrigger.CLICK}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip for={target} showOn={TooltipShowTrigger.CLICK}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    showHideManually: {
+        label: "Programmatically show & hide",
+        examples: {
+            showHideManually: {
+                react: code(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n                        const [showTip, setShowTip] = React.useState(TooltipVisibility.HIDDEN);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} id=\"target-on-click\">\n                              target\n                            </div>\n                            <SpsTooltip\n                              for={target}\n                              showOn={TooltipShowTrigger.MANUAL}\n                              isShown={showTip}\n                              id=\"tooltip-target-on-click\"\n                              onDeferred={() => setShowTip(TooltipVisibility.HIDDEN)}\n                            >\n                              Tooltip content\n                            </SpsTooltip>\n                            <br />\n                            <SpsButton\n                              className=\"mr-1\"\n                              id=\"tooltip-target-on-click-show\"\n                              onClick={() => setShowTip(TooltipVisibility.VISIBLE)}\n                              aria-labelledby=\"tooltip-target-on-click\"\n                            >\n                              Show\n                            </SpsButton>\n                            <SpsButton\n                              className=\"mr-1\"\n                              onClick={() => setShowTip(TooltipVisibility.DEFER_VISIBLE)}\n                            >\n                              Show, but only if no other tooltip is currently visible\n                            </SpsButton>\n                            <SpsButton\n                              className=\"mr-1\"\n                              id=\"tooltip-target-on-click-hide\"\n                              onClick={() => setShowTip(TooltipVisibility.HIDDEN)}\n                            >\n                              Hide\n                            </SpsButton>\n                            <SpsButton\n                              className=\"mr-1\"\n                              onClick={() => setShowTip(TooltipVisibility.DELAYED_HIDDEN)}\n                            >\n                              Hide with delay\n                            </SpsButton>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n                        const [showTip, setShowTip] = React.useState(TooltipVisibility.HIDDEN);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} id=\"target-on-click\">\n                              target\n                            </div>\n                            <SpsTooltip\n                              for={target}\n                              showOn={TooltipShowTrigger.MANUAL}\n                              isShown={showTip}\n                              id=\"tooltip-target-on-click\"\n                              onDeferred={() => setShowTip(TooltipVisibility.HIDDEN)}\n                            >\n                              Tooltip content\n                            </SpsTooltip>\n                            <br />\n                            <SpsButton\n                              className=\"mr-1\"\n                              id=\"tooltip-target-on-click-show\"\n                              onClick={() => setShowTip(TooltipVisibility.VISIBLE)}\n                              aria-labelledby=\"tooltip-target-on-click\"\n                            >\n                              Show\n                            </SpsButton>\n                            <SpsButton\n                              className=\"mr-1\"\n                              onClick={() => setShowTip(TooltipVisibility.DEFER_VISIBLE)}\n                            >\n                              Show, but only if no other tooltip is currently visible\n                            </SpsButton>\n                            <SpsButton\n                              className=\"mr-1\"\n                              id=\"tooltip-target-on-click-hide\"\n                              onClick={() => setShowTip(TooltipVisibility.HIDDEN)}\n                            >\n                              Hide\n                            </SpsButton>\n                            <SpsButton\n                              className=\"mr-1\"\n                              onClick={() => setShowTip(TooltipVisibility.DELAYED_HIDDEN)}\n                            >\n                              Hide with delay\n                            </SpsButton>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    withSpsTooltipTitle: {
+        label: "With SpsTooltipTitle",
+        examples: {
+            showHideManually: {
+                react: code(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip\n                              for={target}\n                              title={<SpsTooltipTitle>Temporary implementation account setup</SpsTooltipTitle>}\n                            >\n                              <div className=\"mb-3\">\n                                Implementing: Temporary implementation product setup in progress.\n                              </div>\n                              <SpsTooltipTitle icon={SpsIcon.CALENDAR_BLANK}>Started</SpsTooltipTitle>\n                              <div className=\"mb-3\">Tuesday, April 15</div>\n                              <SpsTooltipTitle icon={SpsIcon.CHECKMARK}>Completed</SpsTooltipTitle>\n                              <div>Thursday, April 24</div>\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target}>\n                              target\n                            </div>\n                            <SpsTooltip\n                              for={target}\n                              title={<SpsTooltipTitle>Temporary implementation account setup</SpsTooltipTitle>}\n                            >\n                              <div className=\"mb-3\">\n                                Implementing: Temporary implementation product setup in progress.\n                              </div>\n                              <SpsTooltipTitle icon={SpsIcon.CALENDAR_BLANK}>Started</SpsTooltipTitle>\n                              <div className=\"mb-3\">Tuesday, April 15</div>\n                              <SpsTooltipTitle icon={SpsIcon.CHECKMARK}>Completed</SpsTooltipTitle>\n                              <div>Thursday, April 24</div>\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+    other: {
+        label: "Other Settings",
+        examples: {
+            hideDelay: {
+                description: code(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n                  <p>You can customize the delay before the tooltip disappears\n                  when the user moves the mouse away from the element the tooltip\n                  is attached to.</p>\n                "], ["\n                  <p>You can customize the delay before the tooltip disappears\n                  when the user moves the mouse away from the element the tooltip\n                  is attached to.</p>\n                "]))),
+                react: code(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div id=\"hideDelayTooltip\">\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"hideDelayTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} hideDelay={0}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <div id=\"hideDelayTooltip\">\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"hideDelayTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip for={target} hideDelay={0}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </div>\n                        );\n                    }\n                "]))),
+            },
+            customPositioningOffsets: {
+                description: "<p>Custom positioning offsets</p>",
+                react: code(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"customTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip  id=\"customTooltip\" for={target} offsets={[50, 100]}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "], ["\n                    function Component() {\n                        const target = React.useRef(null);\n\n                        return (\n                          <React.Fragment>\n                            <div className=\"bg-gray200 text-center p-2\" ref={target} aria-labelledby=\"customTooltip\">\n                              target\n                            </div>\n                            <SpsTooltip  id=\"customTooltip\" for={target} offsets={[50, 100]}>\n                              Tooltip content\n                            </SpsTooltip>\n                          </React.Fragment>\n                        );\n                    }\n                "]))),
+            },
+        },
+    },
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26;
+//# sourceMappingURL=SpsTooltip.examples.js.map

package/dist/out-tsc/tooltip/SpsTooltip.examples.js.map

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