@spscommerce/ds-react 5.20.2 → 5.20.3-ie

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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"}

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

@@ -0,0 +1,292 @@
+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 __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;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+import { Position, TOOLTIP_HIDE_DELAY_MS_DEFAULT, TooltipKind, TooltipShowTrigger, } from "@spscommerce/ds-shared";
+import clsx from "clsx";
+import * as React from "react";
+import * as PropTypes from "../prop-types";
+import { getPosition, flipPosition } from "../utils/getPosition";
+import { PortalContext, usePortal } from "../utils/usePortal";
+export var TooltipVisibility;
+(function (TooltipVisibility) {
+    TooltipVisibility["VISIBLE"] = "visible";
+    TooltipVisibility["DEFER_VISIBLE"] = "defer_visible";
+    TooltipVisibility["HIDDEN"] = "hidden";
+    TooltipVisibility["DELAYED_HIDDEN"] = "delayed_hidden";
+})(TooltipVisibility || (TooltipVisibility = {}));
+export function toggleTooltipState(state) {
+    return state === TooltipVisibility.VISIBLE
+        ? TooltipVisibility.HIDDEN
+        : TooltipVisibility.VISIBLE;
+}
+var CARET_SPACING_PX = 13;
+var openTips = new Map();
+var propsDoc = {
+    for: { type: "React.MutableRefObject<any> | string", required: true },
+    hideDelay: "number",
+    isShown: "TooltipVisibility",
+    kind: "TooltipKind",
+    offsets: "[number, number]",
+    onDeferred: "() => void",
+    position: "Position",
+    altPosition: "Position",
+    showOn: "TooltipShowTrigger",
+    title: "string | ReactNode",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { for: PropTypes.oneOfType([PropTypes.ref(), PropTypes.string]).isRequired, hideDelay: PropTypes.number, isShown: PropTypes.enumValue(TooltipVisibility), kind: PropTypes.enumValue(TooltipKind), offsets: PropTypes.arrayOf(PropTypes.number), onDeferred: PropTypes.fun(), position: PropTypes.enumValue(Position), altPosition: PropTypes.enumValue(Position), showOn: PropTypes.enumValue(TooltipShowTrigger), title: PropTypes.string || PropTypes.node });
+export function SpsTooltip(_a) {
+    var children = _a.children, className = _a.className, forProp = _a.for, testId = _a["data-testid"], _b = _a.hideDelay, hideDelay = _b === void 0 ? TOOLTIP_HIDE_DELAY_MS_DEFAULT : _b, isShown = _a.isShown, _c = _a.kind, kind = _c === void 0 ? TooltipKind.DEFAULT : _c, _d = _a.offsets, offsets = _d === void 0 ? [0, 0] : _d, onDeferred = _a.onDeferred, _e = _a.position, position = _e === void 0 ? Position.TOP_MIDDLE : _e, _f = _a.altPosition, altPosition = _f === void 0 ? flipPosition(position) : _f, _g = _a.showOn, showOn = _g === void 0 ? TooltipShowTrigger.MOUSEOVER : _g, style = _a.style, title = _a.title, unsafelyReplaceClassName = _a.unsafelyReplaceClassName;
+    var iref = React.useRef({
+        instanceKey: Symbol("ds-react:tooltip:instance-key"),
+        prevIsShown: isShown,
+        hideTimer: null,
+    });
+    var _h = __read(React.useState(false), 2), shown = _h[0], setShown = _h[1];
+    var rootElement = React.useRef(null);
+    var forElementRef = typeof forProp === "string" ? React.useRef(document.getElementById(forProp)) : forProp;
+    var caretRef = React.useRef(null);
+    var clearHideDelay = React.useCallback(function () {
+        if (iref.current.hideTimer) {
+            window.clearTimeout(iref.current.hideTimer);
+            iref.current.hideTimer = null;
+        }
+    }, []);
+    var hide = React.useCallback(function () {
+        clearHideDelay();
+        setShown(false);
+    }, []);
+    var show = React.useCallback(function (defer) {
+        var e_1, _a;
+        if (defer === void 0) { defer = false; }
+        /*
+         * If defer is true, the tooltip will only open if no other tooltip is already active.
+         * We explicitly check its value rather than truthiness because when used as an event
+         * listener, the argument will be an Event object.
+         */
+        if (defer === true && openTips.size > 0) {
+            if (onDeferred) {
+                onDeferred();
+            }
+            return false;
+        }
+        if (rootElement.current.textContent === "") {
+            console.warn("SpsTooltip is empty; aborting show");
+            return false;
+        }
+        clearHideDelay();
+        try {
+            for (var _b = __values(openTips.values()), _c = _b.next(); !_c.done; _c = _b.next()) {
+                var openTipHide = _c.value;
+                openTipHide();
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        setShown(true);
+        return true;
+    }, []);
+    var toggle = React.useCallback(function (event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        // tslint:disable-next-line:no-shadowed-variable
+        setShown(function (currentShown) {
+            if (currentShown) {
+                hide();
+                return false;
+            }
+            return show();
+        });
+    }, []);
+    var documentListener = React.useCallback(function (event) {
+        if (rootElement.current && !rootElement.current.contains(event.target)) {
+            hide();
+        }
+    }, []);
+    var delayedHide = React.useCallback(function () {
+        clearHideDelay();
+        iref.current.hideTimer = window.setTimeout(hide, hideDelay);
+    }, []);
+    /**
+     * This method customizes the secondary offset based on the position
+     * (extend if custom offset is required for particular position)
+     */
+    var getSecondaryOffset = React.useCallback(function (pos) {
+        var _a, _b, _c, _d, _e, _f;
+        var _g = __read(pos.split(" "), 2), primaryPosition = _g[0], secondaryPosition = _g[1];
+        var forElementBounds = (_a = forElementRef === null || forElementRef === void 0 ? void 0 : forElementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        var caretWidth = caretRef.current ? parseInt(((_b = getComputedStyle(caretRef.current)) === null || _b === void 0 ? void 0 : _b.width) || "0", 10) : 0;
+        var caretDiagonal = caretWidth * Math.sqrt(2);
+        /*
+         * calculating what is the difference we need to subtract from caretOffsetStart
+         * because of caret's transformation
+         */
+        var caretTransformationMargin = (caretDiagonal - caretWidth) / 2;
+        if (["top", "bottom"].includes(primaryPosition) && secondaryPosition !== "middle") {
+            if (!(forElementBounds === null || forElementBounds === void 0 ? void 0 : forElementBounds.width) || forElementBounds.width > 50) {
+                return 0;
+            }
+            var caretLeft = caretRef.current ? parseInt(((_c = getComputedStyle(caretRef.current)) === null || _c === void 0 ? void 0 : _c.left) || "0", 10) : 0;
+            var caretRight = caretRef.current ? parseInt(((_d = getComputedStyle(caretRef.current)) === null || _d === void 0 ? void 0 : _d.right) || "0", 10) : 0;
+            /*
+             * length from start of the tooltip to the start of the caret
+             * (this does not get in to account caret's transformation)
+             */
+            var caretOffsetStart = caretLeft < caretRight ? caretLeft : caretRight;
+            // length from start of the tooltip to the middle of the caret
+            var caretOffsetToMiddle = caretOffsetStart - caretTransformationMargin
+                + (caretDiagonal / 2);
+            return (forElementBounds.width / 2) - caretOffsetToMiddle;
+        }
+        else if (["left", "right"].includes(primaryPosition) && secondaryPosition !== "middle") {
+            if ((forElementBounds === null || forElementBounds === void 0 ? void 0 : forElementBounds.height) && forElementBounds.height > 50) {
+                return 0;
+            }
+            var caretTop = caretRef.current ? parseInt(((_e = getComputedStyle(caretRef.current)) === null || _e === void 0 ? void 0 : _e.top) || "0", 10) : 0;
+            var caretBottom = caretRef.current ? parseInt(((_f = getComputedStyle(caretRef.current)) === null || _f === void 0 ? void 0 : _f.bottom) || "0", 10) : 0;
+            /*
+             * length from start of the tooltip to the start of the caret
+             * (this does not get in to account caret's transformation)
+             */
+            var caretOffsetStart = caretTop < caretBottom ? caretTop : caretBottom;
+            // length from start of the tooltip to the middle of the caret
+            var caretOffsetToMiddle = caretOffsetStart - caretTransformationMargin
+                + (caretDiagonal / 2);
+            return (forElementBounds.height / 2) - caretOffsetToMiddle;
+        }
+        else {
+            return 0;
+        }
+    }, []);
+    React.useEffect(function () {
+        if (typeof forProp === "string") {
+            forElementRef.current = document.getElementById(forProp);
+        }
+        if (shown) {
+            openTips.set(iref.current.instanceKey, hide);
+        }
+        else if (openTips.has(iref.current.instanceKey)) {
+            openTips.delete(iref.current.instanceKey);
+        }
+        if (showOn === TooltipShowTrigger.MANUAL) {
+            if (isShown !== iref.current.prevIsShown) {
+                switch (isShown) {
+                    case TooltipVisibility.VISIBLE:
+                        show();
+                        break;
+                    case TooltipVisibility.DEFER_VISIBLE:
+                        show(true);
+                        break;
+                    case TooltipVisibility.HIDDEN:
+                        hide();
+                        break;
+                    case TooltipVisibility.DELAYED_HIDDEN:
+                        delayedHide();
+                        break;
+                    // no default
+                }
+            }
+            iref.current.prevIsShown = isShown;
+        }
+    }, [shown, isShown]);
+    React.useEffect(function () {
+        if (forElementRef.current) {
+            switch (showOn) {
+                case TooltipShowTrigger.MOUSEOVER:
+                    forElementRef.current.addEventListener("mouseenter", show);
+                    forElementRef.current.addEventListener("mouseleave", delayedHide);
+                    break;
+                case TooltipShowTrigger.CLICK:
+                    forElementRef.current.addEventListener("click", toggle);
+                    document.addEventListener("click", documentListener);
+                    break;
+                case TooltipShowTrigger.MANUAL:
+                    break;
+                // no default
+            }
+        }
+    }, [forElementRef]);
+    React.useEffect(function () {
+        if (rootElement.current.textContent === "" && shown) {
+            if (iref.current.hideTimer) {
+                clearTimeout(iref.current.hideTimer);
+                iref.current.hideTimer = null;
+            }
+            setShown(false);
+        }
+    }, [children, shown]);
+    React.useEffect(function () { return function () {
+        if (openTips.has(iref.current.instanceKey)) {
+            openTips.delete(iref.current.instanceKey);
+        }
+        if (forElementRef.current) {
+            forElementRef.current.removeEventListener("mouseenter", show);
+            forElementRef.current.removeEventListener("mouseleave", delayedHide);
+            forElementRef.current.removeEventListener("click", toggle);
+            document.removeEventListener("click", documentListener);
+        }
+    }; }, []);
+    var portal = usePortal("sps-tooltip-portal");
+    var portalContext = React.useContext(PortalContext);
+    var _j = __read(React.useState([{}, false]), 2), _k = __read(_j[0], 2), posStyle = _k[0], altPositionUsed = _k[1], setPositionData = _j[1];
+    React.useEffect(function () {
+        if (shown) {
+            setPositionData(getPosition(rootElement, forElementRef, position, __assign({ altPosition: altPosition, setMinWidth: false, offsets: [offsets[0] - CARET_SPACING_PX, offsets[1] + getSecondaryOffset(position)] }, portalContext)));
+        }
+        else {
+            setPositionData([{}, false]);
+        }
+        // eslint-disable-next-line
+    }, [shown, position, altPosition, offsets[0], offsets[1], children]);
+    var classes = clsx(unsafelyReplaceClassName || "sps-tooltip", "z-stratum-tip", "sps-tooltip--" + kind, "sps-tooltip--pos-" + (altPositionUsed ? altPosition : position).replace(" ", "-"), shown && "sps-tooltip--shown", className);
+    return portal(React.createElement("div", { role: "tooltip", className: classes, "data-testid": testId, ref: rootElement, style: __assign(__assign({}, style), posStyle), onMouseEnter: showOn === TooltipShowTrigger.MOUSEOVER ? clearHideDelay : null, onMouseLeave: showOn === TooltipShowTrigger.MOUSEOVER ? delayedHide : null },
+        title && (typeof title === "string" ? React.createElement("span", { className: "sps-tooltip__title d-block" }, title) : title),
+        React.createElement("span", { className: "sps-tooltip__body d-block" }, children),
+        React.createElement("span", { ref: caretRef, className: "sps-tooltip__caret" })));
+}
+Object.assign(SpsTooltip, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsTooltip",
+});
+//# sourceMappingURL=SpsTooltip.js.map

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

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

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

@@ -0,0 +1,13 @@
+import { SpsIcon, SpsIconSize } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+declare const propTypes: {
+    icon: PropTypes.Requireable<SpsIcon>;
+    iconSize: PropTypes.Requireable<SpsIconSize>;
+    children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    className: PropTypes.Requireable<string>;
+    "data-testid": PropTypes.Requireable<string>;
+    unsafelyReplaceClassName: PropTypes.Requireable<string>;
+};
+export declare type SpsTooltipTitleProps = PropTypes.InferTS<typeof propTypes, HTMLDivElement>;
+export declare function SpsTooltipTitle({ icon, iconSize, children, }: SpsTooltipTitleProps): JSX.Element;
+export {};

package/dist/out-tsc/tooltip/SpsTooltipTitle.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from "react";
+import { SpsIcon, SpsIconSize } from "@spscommerce/ds-shared";
+import * as PropTypes from "../prop-types";
+import { SpsI } from "../icon/SpsIcon";
+var propsDoc = {
+    icon: "SpsIcon",
+    iconSize: "SpsIconSize",
+};
+var propTypes = __assign(__assign({}, PropTypes.spsGlobalPropTypes), { icon: PropTypes.enumValue(SpsIcon), iconSize: PropTypes.enumValue(SpsIconSize) });
+export function SpsTooltipTitle(_a) {
+    var icon = _a.icon, _b = _a.iconSize, iconSize = _b === void 0 ? SpsIconSize.SMALL : _b, children = _a.children;
+    return (React.createElement("div", { className: "sps-tooltip__title-component" },
+        icon && React.createElement(SpsI, { icon: icon, size: iconSize }),
+        React.createElement("span", { className: "sps-tooltip__title" }, children)));
+}
+Object.assign(SpsTooltipTitle, {
+    props: propsDoc,
+    propTypes: propTypes,
+    displayName: "SpsTooltipTitle",
+});
+//# sourceMappingURL=SpsTooltipTitle.js.map

package/dist/out-tsc/tooltip/SpsTooltipTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpsTooltipTitle.js","sourceRoot":"","sources":["../../../src/tooltip/SpsTooltipTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,KAAK,SAAS,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,IAAM,QAAQ,GAAG;IACf,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,aAAa;CACxB,CAAC;AAEF,IAAM,SAAS,yBACV,SAAS,CAAC,kBAAkB,KAC/B,IAAI,EAAE,SAAS,CAAC,SAAS,CAAU,OAAO,CAAC,EAC3C,QAAQ,EAAE,SAAS,CAAC,SAAS,CAAc,WAAW,CAAC,GACxD,CAAC;AAIF,MAAM,UAAU,eAAe,CAAC,EAIT;QAHrB,IAAI,UAAA,EACJ,gBAA4B,EAA5B,QAAQ,mBAAG,WAAW,CAAC,KAAK,KAAA,EAC5B,QAAQ,cAAA;IAER,OAAO,CACL,6BAAK,SAAS,EAAC,8BAA8B;QAC1C,IAAI,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,GAAI;QAC7C,8BAAM,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAQ,CAClD,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,CAAC,eAAe,EAAE;IAC7B,KAAK,EAAE,QAAQ;IACf,SAAS,WAAA;IACT,WAAW,EAAE,iBAAiB;CAC/B,CAAC,CAAC"}

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

@@ -0,0 +1,3 @@
+export * from "./SpsTooltip";
+export * from "./SpsTooltipTitle";
+export * from "./SpsTooltip.examples";

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

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

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

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

package/dist/out-tsc/utils/FauxChangeEvent.d.ts

@@ -0,0 +1,20 @@
+import type { ChangeEvent } from "react";
+export declare class FauxChangeEvent<T> implements ChangeEvent<T> {
+    target: EventTarget & T;
+    nativeEvent: Event;
+    currentTarget: EventTarget & T;
+    private isPgStoppedInternal;
+    constructor(target: EventTarget & T, eventInit?: EventInit);
+    get bubbles(): boolean;
+    get cancelable(): boolean;
+    get defaultPrevented(): boolean;
+    get eventPhase(): number;
+    get isTrusted(): boolean;
+    get timeStamp(): number;
+    get type(): string;
+    preventDefault(): void;
+    isDefaultPrevented(): boolean;
+    stopPropagation(): void;
+    isPropagationStopped(): boolean;
+    persist(): void;
+}