@webiny/admin-ui 6.3.0 → 6.4.0-beta.1

package/Tooltip/Tooltip.js

@@ -1,41 +1,30 @@
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
-import { withStaticProps, makeDecoratable } from "../utils.js";
+import { Tooltip } from "radix-ui";
+import { makeDecoratable, withStaticProps } from "../utils.js";
 import { TooltipArrow, TooltipContent } from "./components/index.js";
-const TooltipProvider = TooltipPrimitive.Provider;
-const TooltipRoot = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const DecoratableTooltip = ({
-  align,
-  content,
-  onOpenChange,
-  showArrow = true,
-  side,
-  variant,
-  trigger,
-  delay = 500,
-  ...props
-}) => {
-  return /*#__PURE__*/React.createElement(TooltipRoot, {
-    delayDuration: delay,
-    onOpenChange: onOpenChange
-  }, /*#__PURE__*/React.createElement(TooltipTrigger, {
-    asChild: true
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "inline-block leading-none"
-  }, trigger)), /*#__PURE__*/React.createElement(TooltipContent, Object.assign({
-    side: side,
-    align: align,
-    sideOffset: 4,
-    variant: variant,
-    hiddenArrow: !showArrow
-  }, props), content, showArrow && /*#__PURE__*/React.createElement(TooltipArrow, {
-    variant: variant
-  })));
-};
-const Tooltip = withStaticProps(makeDecoratable("Tooltip", DecoratableTooltip), {
-  Provider: TooltipProvider
+import * as __rspack_external_react from "react";
+const TooltipProvider = Tooltip.Provider;
+const TooltipRoot = Tooltip.Root;
+const TooltipTrigger = Tooltip.Trigger;
+const DecoratableTooltip = ({ align, content, onOpenChange, showArrow = true, side, variant, trigger, delay = 500, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(TooltipRoot, {
+        delayDuration: delay,
+        onOpenChange: onOpenChange
+    }, /*#__PURE__*/ __rspack_external_react.createElement(TooltipTrigger, {
+        asChild: true
+    }, /*#__PURE__*/ __rspack_external_react.createElement("span", {
+        className: "inline-block leading-none"
+    }, trigger)), /*#__PURE__*/ __rspack_external_react.createElement(TooltipContent, {
+        side: side,
+        align: align,
+        sideOffset: 4,
+        variant: variant,
+        hiddenArrow: !showArrow,
+        ...props
+    }, content, showArrow && /*#__PURE__*/ __rspack_external_react.createElement(TooltipArrow, {
+        variant: variant
+    })));
+const Tooltip_Tooltip = withStaticProps(makeDecoratable("Tooltip", DecoratableTooltip), {
+    Provider: TooltipProvider
 });
-export { Tooltip };
+export { Tooltip_Tooltip as Tooltip };
 
 //# sourceMappingURL=Tooltip.js.map

package/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","TooltipPrimitive","withStaticProps","makeDecoratable","TooltipArrow","TooltipContent","TooltipProvider","Provider","TooltipRoot","Root","TooltipTrigger","Trigger","DecoratableTooltip","align","content","onOpenChange","showArrow","side","variant","trigger","delay","props","createElement","delayDuration","asChild","className","Object","assign","sideOffset","hiddenArrow"],"sources":["Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { withStaticProps, makeDecoratable } from \"~/utils.js\";\nimport type { TooltipContentProps } from \"./components/index.js\";\nimport { TooltipArrow, TooltipContent } from \"./components/index.js\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst TooltipRoot = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\ninterface TooltipProps extends Omit<TooltipPrimitive.TooltipContentProps, \"content\" | \"children\"> {\n    align?: TooltipPrimitive.TooltipContentProps[\"align\"];\n    content: React.ReactNode;\n    delay?: number;\n    onOpenChange?: TooltipPrimitive.TooltipProps[\"onOpenChange\"];\n    showArrow?: boolean;\n    side?: TooltipPrimitive.TooltipContentProps[\"side\"];\n    variant?: TooltipContentProps[\"variant\"];\n    trigger: React.ReactNode;\n    rawTrigger?: boolean;\n}\n\nconst DecoratableTooltip = ({\n    align,\n    content,\n    onOpenChange,\n    showArrow = true,\n    side,\n    variant,\n    trigger,\n    delay = 500,\n    ...props\n}: TooltipProps) => {\n    return (\n        <TooltipRoot delayDuration={delay} onOpenChange={onOpenChange}>\n            <TooltipTrigger asChild>\n                <span className={\"inline-block leading-none\"}>{trigger}</span>\n            </TooltipTrigger>\n            <TooltipContent\n                side={side}\n                align={align}\n                sideOffset={4}\n                variant={variant}\n                hiddenArrow={!showArrow}\n                {...props}\n            >\n                {content}\n                {showArrow && <TooltipArrow variant={variant} />}\n            </TooltipContent>\n        </TooltipRoot>\n    );\n};\n\nconst Tooltip = withStaticProps(makeDecoratable(\"Tooltip\", DecoratableTooltip), {\n    Provider: TooltipProvider\n});\n\nexport { Tooltip, type TooltipProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,eAAe,EAAEC,eAAe;AAEzC,SAASC,YAAY,EAAEC,cAAc;AAErC,MAAMC,eAAe,GAAGL,gBAAgB,CAACM,QAAQ;AAEjD,MAAMC,WAAW,GAAGP,gBAAgB,CAACQ,IAAI;AAEzC,MAAMC,cAAc,GAAGT,gBAAgB,CAACU,OAAO;AAc/C,MAAMC,kBAAkB,GAAGA,CAAC;EACxBC,KAAK;EACLC,OAAO;EACPC,YAAY;EACZC,SAAS,GAAG,IAAI;EAChBC,IAAI;EACJC,OAAO;EACPC,OAAO;EACPC,KAAK,GAAG,GAAG;EACX,GAAGC;AACO,CAAC,KAAK;EAChB,oBACItB,KAAA,CAAAuB,aAAA,CAACd,WAAW;IAACe,aAAa,EAAEH,KAAM;IAACL,YAAY,EAAEA;EAAa,gBAC1DhB,KAAA,CAAAuB,aAAA,CAACZ,cAAc;IAACc,OAAO;EAAA,gBACnBzB,KAAA,CAAAuB,aAAA;IAAMG,SAAS,EAAE;EAA4B,GAAEN,OAAc,CACjD,CAAC,eACjBpB,KAAA,CAAAuB,aAAA,CAACjB,cAAc,EAAAqB,MAAA,CAAAC,MAAA;IACXV,IAAI,EAAEA,IAAK;IACXJ,KAAK,EAAEA,KAAM;IACbe,UAAU,EAAE,CAAE;IACdV,OAAO,EAAEA,OAAQ;IACjBW,WAAW,EAAE,CAACb;EAAU,GACpBK,KAAK,GAERP,OAAO,EACPE,SAAS,iBAAIjB,KAAA,CAAAuB,aAAA,CAAClB,YAAY;IAACc,OAAO,EAAEA;EAAQ,CAAE,CACnC,CACP,CAAC;AAEtB,CAAC;AAED,MAAMlB,OAAO,GAAGE,eAAe,CAACC,eAAe,CAAC,SAAS,EAAES,kBAAkB,CAAC,EAAE;EAC5EL,QAAQ,EAAED;AACd,CAAC,CAAC;AAEF,SAASN,OAAO","ignoreList":[]}
+{"version":3,"file":"Tooltip/Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { withStaticProps, makeDecoratable } from \"~/utils.js\";\nimport type { TooltipContentProps } from \"./components/index.js\";\nimport { TooltipArrow, TooltipContent } from \"./components/index.js\";\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst TooltipRoot = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\ninterface TooltipProps extends Omit<TooltipPrimitive.TooltipContentProps, \"content\" | \"children\"> {\n    align?: TooltipPrimitive.TooltipContentProps[\"align\"];\n    content: React.ReactNode;\n    delay?: number;\n    onOpenChange?: TooltipPrimitive.TooltipProps[\"onOpenChange\"];\n    showArrow?: boolean;\n    side?: TooltipPrimitive.TooltipContentProps[\"side\"];\n    variant?: TooltipContentProps[\"variant\"];\n    trigger: React.ReactNode;\n    rawTrigger?: boolean;\n}\n\nconst DecoratableTooltip = ({\n    align,\n    content,\n    onOpenChange,\n    showArrow = true,\n    side,\n    variant,\n    trigger,\n    delay = 500,\n    ...props\n}: TooltipProps) => {\n    return (\n        <TooltipRoot delayDuration={delay} onOpenChange={onOpenChange}>\n            <TooltipTrigger asChild>\n                <span className={\"inline-block leading-none\"}>{trigger}</span>\n            </TooltipTrigger>\n            <TooltipContent\n                side={side}\n                align={align}\n                sideOffset={4}\n                variant={variant}\n                hiddenArrow={!showArrow}\n                {...props}\n            >\n                {content}\n                {showArrow && <TooltipArrow variant={variant} />}\n            </TooltipContent>\n        </TooltipRoot>\n    );\n};\n\nconst Tooltip = withStaticProps(makeDecoratable(\"Tooltip\", DecoratableTooltip), {\n    Provider: TooltipProvider\n});\n\nexport { Tooltip, type TooltipProps };\n"],"names":["TooltipProvider","TooltipPrimitive","TooltipRoot","TooltipTrigger","DecoratableTooltip","align","content","onOpenChange","showArrow","side","variant","trigger","delay","props","TooltipContent","TooltipArrow","Tooltip","withStaticProps","makeDecoratable"],"mappings":";;;;AAMA,MAAMA,kBAAkBC,QAAAA,QAAyB;AAEjD,MAAMC,cAAcD,QAAAA,IAAqB;AAEzC,MAAME,iBAAiBF,QAAAA,OAAwB;AAc/C,MAAMG,qBAAqB,CAAC,EACxBC,KAAK,EACLC,OAAO,EACPC,YAAY,EACZC,YAAY,IAAI,EAChBC,IAAI,EACJC,OAAO,EACPC,OAAO,EACPC,QAAQ,GAAG,EACX,GAAGC,OACQ,GACJ,WAAP,GACI,sCAACX,aAAWA;QAAC,eAAeU;QAAO,cAAcL;qBAC7C,sCAACJ,gBAAcA;QAAC;qBACZ,sCAAC;QAAK,WAAW;OAA8BQ,WAAAA,WAAAA,GAEnD,sCAACG,gBAAcA;QACX,MAAML;QACN,OAAOJ;QACP,YAAY;QACZ,SAASK;QACT,aAAa,CAACF;QACb,GAAGK,KAAK;OAERP,SACAE,aAAa,WAAbA,GAAa,sCAACO,cAAYA;QAAC,SAASL;;AAMrD,MAAMM,kBAAUC,gBAAgBC,gBAAgB,WAAWd,qBAAqB;IAC5E,UAAUJ;AACd"}

package/Tooltip/Tooltip.stories.js

@@ -1,181 +1,211 @@
-import React from "react";
+import react from "react";
 import { Tooltip } from "./index.js";
 import { Button } from "../Button/index.js";
 import { Text } from "../Text/index.js";
 import { Icon } from "../Icon/index.js";
-import { ReactComponent as InfoIcon } from "@webiny/icons/info.svg";
-import { ReactComponent as HelpIcon } from "@webiny/icons/help.svg";
+import { ReactComponent } from "@webiny/icons/info.svg";
+import { ReactComponent as help_svg_ReactComponent } from "@webiny/icons/help.svg";
 const meta = {
-  title: "Components/Tooltip",
-  component: Tooltip,
-  parameters: {
-    layout: "padded"
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["accent", "subtle"]
+    title: "Components/Tooltip",
+    component: Tooltip,
+    parameters: {
+        layout: "padded"
     },
-    align: {
-      control: "select",
-      options: ["start", "center", "end"]
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "accent",
+                "subtle"
+            ]
+        },
+        align: {
+            control: "select",
+            options: [
+                "start",
+                "center",
+                "end"
+            ]
+        },
+        side: {
+            control: "select",
+            options: [
+                "top",
+                "right",
+                "bottom",
+                "left"
+            ]
+        },
+        showArrow: {
+            control: "boolean",
+            defaultValue: true
+        }
     },
-    side: {
-      control: "select",
-      options: ["top", "right", "bottom", "left"]
-    },
-    showArrow: {
-      control: "boolean",
-      defaultValue: true
-    }
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex justify-center items-center h-48"
-  }, /*#__PURE__*/React.createElement(Story, null)))]
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement(Tooltip.Provider, null, /*#__PURE__*/ react.createElement("div", {
+                className: "flex justify-center items-center h-48"
+            }, /*#__PURE__*/ react.createElement(Story, null)))
+    ]
 };
-export default meta;
-export const Default = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Tooltip trigger"),
-    content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
-  }
+const Tooltip_stories = meta;
+const Default = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Tooltip trigger"),
+        content: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
+    }
 };
-export const AccentVariant = {
-  args: {
-    ...Default.args,
-    variant: "accent"
-  }
+const AccentVariant = {
+    args: {
+        ...Default.args,
+        variant: "accent"
+    }
 };
-export const SubtleVariant = {
-  args: {
-    ...Default.args,
-    variant: "subtle"
-  },
-  decorators: [Story => /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement("div", {
-    className: "flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48"
-  }, /*#__PURE__*/React.createElement(Story, null)))]
+const SubtleVariant = {
+    args: {
+        ...Default.args,
+        variant: "subtle"
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ react.createElement(Tooltip.Provider, null, /*#__PURE__*/ react.createElement("div", {
+                className: "flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48"
+            }, /*#__PURE__*/ react.createElement(Story, null)))
+    ]
 };
-export const WithoutArrow = {
-  args: {
-    ...Default.args,
-    showArrow: false
-  }
+const WithoutArrow = {
+    args: {
+        ...Default.args,
+        showArrow: false
+    }
 };
-export const WithIconTrigger = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(InfoIcon, null),
-      label: "Information"
-    }),
-    content: "This is a helpful tooltip"
-  }
+const WithIconTrigger = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+            label: "Information"
+        }),
+        content: "This is a helpful tooltip"
+    }
 };
-export const Documentation = {
-  args: {
-    align: "center",
-    side: "top",
-    variant: "accent",
-    showArrow: true,
-    trigger: /*#__PURE__*/React.createElement("p", null, "Tooltip trigger"),
-    content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
-  },
-  argTypes: {
-    trigger: {
-      description: "The element that triggers the tooltip when hovered. Please refer to the example code for details."
+const Documentation = {
+    args: {
+        align: "center",
+        side: "top",
+        variant: "accent",
+        showArrow: true,
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Tooltip trigger"),
+        content: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement("strong", null, "Lorem ipsum dolor sit amet"), ", consectetur adipiscing elit. Donec viverra sit amet massa sagittis sollicitudin.")
     },
-    content: {
-      description: "The content to display inside the tooltip. Please refer to the example code for details."
-    },
-    side: {
-      description: "The side of the trigger where the tooltip appears.",
-      control: "select",
-      options: ["top", "right", "bottom", "left"]
-    },
-    align: {
-      description: "The alignment of the tooltip relative to the trigger.",
-      control: "select",
-      options: ["start", "center", "end"]
-    },
-    variant: {
-      description: "The visual style variant of the tooltip.",
-      control: "select",
-      options: ["accent", "subtle"]
-    },
-    showArrow: {
-      description: "Whether to show an arrow pointing to the trigger.",
-      control: "boolean"
+    argTypes: {
+        trigger: {
+            description: "The element that triggers the tooltip when hovered. Please refer to the example code for details."
+        },
+        content: {
+            description: "The content to display inside the tooltip. Please refer to the example code for details."
+        },
+        side: {
+            description: "The side of the trigger where the tooltip appears.",
+            control: "select",
+            options: [
+                "top",
+                "right",
+                "bottom",
+                "left"
+            ]
+        },
+        align: {
+            description: "The alignment of the tooltip relative to the trigger.",
+            control: "select",
+            options: [
+                "start",
+                "center",
+                "end"
+            ]
+        },
+        variant: {
+            description: "The visual style variant of the tooltip.",
+            control: "select",
+            options: [
+                "accent",
+                "subtle"
+            ]
+        },
+        showArrow: {
+            description: "Whether to show an arrow pointing to the trigger.",
+            control: "boolean"
+        }
     }
-  }
 };
-export const Positioning = {
-  render: () => /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-md"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Top"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on top"),
-    side: "top"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Right"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on right"),
-    side: "right"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Bottom"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on bottom"),
-    side: "bottom"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Left"),
-    content: /*#__PURE__*/React.createElement("div", null, "Tooltip on left"),
-    side: "left"
-  }))
+const Positioning = {
+    render: ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "flex gap-md"
+        }, /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Top"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on top"),
+            side: "top"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Right"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on right"),
+            side: "right"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Bottom"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on bottom"),
+            side: "bottom"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Left"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Tooltip on left"),
+            side: "left"
+        }))
 };
-export const Alignment = {
-  render: () => /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-md"
-  }, /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Start"),
-    content: /*#__PURE__*/React.createElement("div", null, "Aligned to start"),
-    align: "start"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Center"),
-    content: /*#__PURE__*/React.createElement("div", null, "Aligned to center"),
-    align: "center"
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: /*#__PURE__*/React.createElement("p", null, "End"),
-    content: /*#__PURE__*/React.createElement("div", null, "Aligned to end"),
-    align: "end"
-  }))
+const Alignment = {
+    render: ()=>/*#__PURE__*/ react.createElement("div", {
+            className: "flex gap-md"
+        }, /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Start"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Aligned to start"),
+            align: "start"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "Center"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Aligned to center"),
+            align: "center"
+        }), /*#__PURE__*/ react.createElement(Tooltip, {
+            trigger: /*#__PURE__*/ react.createElement("p", null, "End"),
+            content: /*#__PURE__*/ react.createElement("div", null, "Aligned to end"),
+            align: "end"
+        }))
 };
-export const WithButtonTrigger = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Button, {
-      text: "Hover me"
-    }),
-    content: "This tooltip is triggered by a button"
-  }
+const WithButtonTrigger = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Button, {
+            text: "Hover me"
+        }),
+        content: "This tooltip is triggered by a button"
+    }
 };
-export const WithFormattedContent = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement("p", null, "Hover for more info"),
-    content: /*#__PURE__*/React.createElement("div", {
-      className: "flex flex-col gap-xs"
-    }, /*#__PURE__*/React.createElement(Text, {
-      size: "sm",
-      className: "font-bold"
-    }, "Important Information"), /*#__PURE__*/React.createElement(Text, {
-      size: "sm"
-    }, "This tooltip contains formatted content with multiple paragraphs."), /*#__PURE__*/React.createElement(Text, {
-      size: "sm"
-    }, "You can include various elements inside tooltips."))
-  }
+const WithFormattedContent = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement("p", null, "Hover for more info"),
+        content: /*#__PURE__*/ react.createElement("div", {
+            className: "flex flex-col gap-xs"
+        }, /*#__PURE__*/ react.createElement(Text, {
+            size: "sm",
+            className: "font-bold"
+        }, "Important Information"), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm"
+        }, "This tooltip contains formatted content with multiple paragraphs."), /*#__PURE__*/ react.createElement(Text, {
+            size: "sm"
+        }, "You can include various elements inside tooltips."))
+    }
 };
-export const WithHelpIcon = {
-  args: {
-    trigger: /*#__PURE__*/React.createElement(Icon, {
-      icon: /*#__PURE__*/React.createElement(HelpIcon, null),
-      label: "Help"
-    }),
-    content: "Need help? Contact support at support@example.com"
-  }
+const WithHelpIcon = {
+    args: {
+        trigger: /*#__PURE__*/ react.createElement(Icon, {
+            icon: /*#__PURE__*/ react.createElement(help_svg_ReactComponent, null),
+            label: "Help"
+        }),
+        content: "Need help? Contact support at support@example.com"
+    }
 };
+export default Tooltip_stories;
+export { AccentVariant, Alignment, Default, Documentation, Positioning, SubtleVariant, WithButtonTrigger, WithFormattedContent, WithHelpIcon, WithIconTrigger, WithoutArrow };
 
 //# sourceMappingURL=Tooltip.stories.js.map

package/Tooltip/Tooltip.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","Button","Text","Icon","ReactComponent","InfoIcon","HelpIcon","meta","title","component","parameters","layout","argTypes","variant","control","options","align","side","showArrow","defaultValue","decorators","Story","createElement","Provider","className","Default","args","trigger","content","Fragment","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","icon","label","Documentation","description","Positioning","render","Alignment","WithButtonTrigger","text","WithFormattedContent","size","WithHelpIcon"],"sources":["Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip/Tooltip.stories.js","sources":["../../src/Tooltip/Tooltip.stories.tsx"],"sourcesContent":["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { Tooltip } from \"~/Tooltip/index.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\n\nimport { ReactComponent as InfoIcon } from \"@webiny/icons/info.svg\";\nimport { ReactComponent as HelpIcon } from \"@webiny/icons/help.svg\";\n\nconst meta: Meta<typeof Tooltip> = {\n    title: \"Components/Tooltip\",\n    component: Tooltip,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        variant: {\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        align: {\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        side: {\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        showArrow: {\n            control: \"boolean\",\n            defaultValue: true\n        }\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Tooltip>;\n\nexport const Default: Story = {\n    args: {\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    }\n};\n\nexport const AccentVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"accent\"\n    }\n};\n\nexport const SubtleVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"subtle\"\n    },\n    decorators: [\n        Story => (\n            <Tooltip.Provider>\n                <div className=\"flex justify-center items-center bg-neutral-dark text-neutral-light w-full h-48\">\n                    <Story />\n                </div>\n            </Tooltip.Provider>\n        )\n    ]\n};\n\nexport const WithoutArrow: Story = {\n    args: {\n        ...Default.args,\n        showArrow: false\n    }\n};\n\nexport const WithIconTrigger: Story = {\n    args: {\n        trigger: <Icon icon={<InfoIcon />} label=\"Information\" />,\n        content: \"This is a helpful tooltip\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        align: \"center\",\n        side: \"top\",\n        variant: \"accent\",\n        showArrow: true,\n        trigger: <p>Tooltip trigger</p>,\n        content: (\n            <>\n                <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing elit. Donec\n                viverra sit amet massa sagittis sollicitudin.\n            </>\n        )\n    },\n    argTypes: {\n        trigger: {\n            description:\n                \"The element that triggers the tooltip when hovered. Please refer to the example code for details.\"\n        },\n        content: {\n            description:\n                \"The content to display inside the tooltip. Please refer to the example code for details.\"\n        },\n        side: {\n            description: \"The side of the trigger where the tooltip appears.\",\n            control: \"select\",\n            options: [\"top\", \"right\", \"bottom\", \"left\"]\n        },\n        align: {\n            description: \"The alignment of the tooltip relative to the trigger.\",\n            control: \"select\",\n            options: [\"start\", \"center\", \"end\"]\n        },\n        variant: {\n            description: \"The visual style variant of the tooltip.\",\n            control: \"select\",\n            options: [\"accent\", \"subtle\"]\n        },\n        showArrow: {\n            description: \"Whether to show an arrow pointing to the trigger.\",\n            control: \"boolean\"\n        }\n    }\n};\n\nexport const Positioning: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Top</p>} content={<div>Tooltip on top</div>} side=\"top\" />\n            <Tooltip trigger={<p>Right</p>} content={<div>Tooltip on right</div>} side=\"right\" />\n            <Tooltip trigger={<p>Bottom</p>} content={<div>Tooltip on bottom</div>} side=\"bottom\" />\n            <Tooltip trigger={<p>Left</p>} content={<div>Tooltip on left</div>} side=\"left\" />\n        </div>\n    )\n};\n\nexport const Alignment: Story = {\n    render: () => (\n        <div className=\"flex gap-md\">\n            <Tooltip trigger={<p>Start</p>} content={<div>Aligned to start</div>} align=\"start\" />\n            <Tooltip\n                trigger={<p>Center</p>}\n                content={<div>Aligned to center</div>}\n                align=\"center\"\n            />\n            <Tooltip trigger={<p>End</p>} content={<div>Aligned to end</div>} align=\"end\" />\n        </div>\n    )\n};\n\nexport const WithButtonTrigger: Story = {\n    args: {\n        trigger: <Button text=\"Hover me\" />,\n        content: \"This tooltip is triggered by a button\"\n    }\n};\n\nexport const WithFormattedContent: Story = {\n    args: {\n        trigger: <p>Hover for more info</p>,\n        content: (\n            <div className=\"flex flex-col gap-xs\">\n                <Text size=\"sm\" className=\"font-bold\">\n                    Important Information\n                </Text>\n                <Text size=\"sm\">\n                    This tooltip contains formatted content with multiple paragraphs.\n                </Text>\n                <Text size=\"sm\">You can include various elements inside tooltips.</Text>\n            </div>\n        )\n    }\n};\n\nexport const WithHelpIcon: Story = {\n    args: {\n        trigger: <Icon icon={<HelpIcon />} label=\"Help\" />,\n        content: \"Need help? Contact support at support@example.com\"\n    }\n};\n"],"names":["meta","Tooltip","Story","Default","AccentVariant","SubtleVariant","WithoutArrow","WithIconTrigger","Icon","InfoIcon","Documentation","Positioning","Alignment","WithButtonTrigger","Button","WithFormattedContent","Text","WithHelpIcon","HelpIcon"],"mappings":"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"}

package/Tooltip/components/TooltipArrow.js

@@ -1,28 +1,25 @@
-import * as React from "react";
-import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { Tooltip } from "radix-ui";
 import { cn, cva } from "../../utils.js";
+import * as __rspack_external_react from "react";
 const tooltipArrowVariants = cva("", {
-  variants: {
-    variant: {
-      accent: "fill-bg-neutral-dark",
-      subtle: "fill-neutral-base"
+    variants: {
+        variant: {
+            accent: "fill-bg-neutral-dark",
+            subtle: "fill-neutral-base"
+        }
+    },
+    defaultVariants: {
+        variant: "accent"
     }
-  },
-  defaultVariants: {
-    variant: "accent"
-  }
 });
-const TooltipArrow = ({
-  variant,
-  className,
-  ...props
-}) => /*#__PURE__*/React.createElement(TooltipPrimitive.Arrow, Object.assign({}, props, {
-  width: 12,
-  height: 6,
-  className: cn(tooltipArrowVariants({
-    variant
-  }), className)
-}));
+const TooltipArrow = ({ variant, className, ...props })=>/*#__PURE__*/ __rspack_external_react.createElement(Tooltip.Arrow, {
+        ...props,
+        width: 12,
+        height: 6,
+        className: cn(tooltipArrowVariants({
+            variant
+        }), className)
+    });
 export { TooltipArrow };
 
 //# sourceMappingURL=TooltipArrow.js.map

package/Tooltip/components/TooltipArrow.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Tooltip","TooltipPrimitive","cn","cva","tooltipArrowVariants","variants","variant","accent","subtle","defaultVariants","TooltipArrow","className","props","createElement","Arrow","Object","assign","width","height"],"sources":["TooltipArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tooltipArrowVariants = cva(\"\", {\n    variants: {\n        variant: {\n            accent: \"fill-bg-neutral-dark\",\n            subtle: \"fill-neutral-base\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ntype TooltipArrowProps = TooltipPrimitive.TooltipArrowProps &\n    VariantProps<typeof tooltipArrowVariants>;\n\nconst TooltipArrow = ({ variant, className, ...props }: TooltipArrowProps) => (\n    <TooltipPrimitive.Arrow\n        {...props}\n        width={12}\n        height={6}\n        className={cn(tooltipArrowVariants({ variant }), className)}\n    />\n);\n\nexport { TooltipArrow, type TooltipArrowProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,UAAU;AACtD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,EAAE,EAAE;EACjCE,QAAQ,EAAE;IACNC,OAAO,EAAE;MACLC,MAAM,EAAE,sBAAsB;MAC9BC,MAAM,EAAE;IACZ;EACJ,CAAC;EACDC,eAAe,EAAE;IACbH,OAAO,EAAE;EACb;AACJ,CAAC,CAAC;AAKF,MAAMI,YAAY,GAAGA,CAAC;EAAEJ,OAAO;EAAEK,SAAS;EAAE,GAAGC;AAAyB,CAAC,kBACrEb,KAAA,CAAAc,aAAA,CAACZ,gBAAgB,CAACa,KAAK,EAAAC,MAAA,CAAAC,MAAA,KACfJ,KAAK;EACTK,KAAK,EAAE,EAAG;EACVC,MAAM,EAAE,CAAE;EACVP,SAAS,EAAET,EAAE,CAACE,oBAAoB,CAAC;IAAEE;EAAQ,CAAC,CAAC,EAAEK,SAAS;AAAE,EAC/D,CACJ;AAED,SAASD,YAAY","ignoreList":[]}
+{"version":3,"file":"Tooltip/components/TooltipArrow.js","sources":["../../../src/Tooltip/components/TooltipArrow.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst tooltipArrowVariants = cva(\"\", {\n    variants: {\n        variant: {\n            accent: \"fill-bg-neutral-dark\",\n            subtle: \"fill-neutral-base\"\n        }\n    },\n    defaultVariants: {\n        variant: \"accent\"\n    }\n});\n\ntype TooltipArrowProps = TooltipPrimitive.TooltipArrowProps &\n    VariantProps<typeof tooltipArrowVariants>;\n\nconst TooltipArrow = ({ variant, className, ...props }: TooltipArrowProps) => (\n    <TooltipPrimitive.Arrow\n        {...props}\n        width={12}\n        height={6}\n        className={cn(tooltipArrowVariants({ variant }), className)}\n    />\n);\n\nexport { TooltipArrow, type TooltipArrowProps };\n"],"names":["tooltipArrowVariants","cva","TooltipArrow","variant","className","props","TooltipPrimitive","cn"],"mappings":";;;AAIA,MAAMA,uBAAuBC,IAAI,IAAI;IACjC,UAAU;QACN,SAAS;YACL,QAAQ;YACR,QAAQ;QACZ;IACJ;IACA,iBAAiB;QACb,SAAS;IACb;AACJ;AAKA,MAAMC,eAAe,CAAC,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,OAA0B,iBACrE,sCAACC,QAAAA,KAAsB;QAClB,GAAGD,KAAK;QACT,OAAO;QACP,QAAQ;QACR,WAAWE,GAAGP,qBAAqB;YAAEG;QAAQ,IAAIC"}