oolib 2.225.2 → 2.225.4

package/dist/stories/v2/components/Tooltip.stories.js

@@ -10,16 +10,57 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EdgeCases = exports.Tooltip_ = void 0;
-var react_1 = __importDefault(require("react"));
+exports.AdvancedLayouts = exports.ClickTrigger = exports.DropdownOptionsWithTooltips = exports.ChartsAndListItems = exports.AdvancedComponents = exports.ComponentCompatibility = exports.EdgeCases = exports.Tooltip_ = void 0;
+var react_1 = __importStar(require("react"));
 var Tooltip_1 = __importDefault(require("../../../v2/components/Tooltip"));
 var icons_1 = require("../../../icons");
 var Typo_1 = require("../../../components/Typo");
-var Info = icons_1.icons.Info;
+var Buttons_1 = require("../../../v2/components/Buttons");
+var OKELink_1 = require("../../../v2/components/OKELink");
+var DropdownSingle_1 = require("../../../v2/components/Dropdowns/DropdownSingle");
+var DropdownMulti_1 = require("../../../v2/components/Dropdowns/DropdownMulti");
+var ActionMenu_1 = require("../../../components/ActionMenu");
+var Switches_1 = require("../../../v2/components/Switches");
+var Tags_1 = require("../../../v2/components/Tags");
+var List_1 = require("../../../v2/components/List");
+var Info = icons_1.icons.Info, WarningCircle = icons_1.icons.WarningCircle, Eye = icons_1.icons.Eye, User = icons_1.icons.User, GearSix = icons_1.icons.GearSix, Envelope = icons_1.icons.Envelope, MapPin = icons_1.icons.MapPin, Check = icons_1.icons.Check, PencilSimple = icons_1.icons.PencilSimple, Trash = icons_1.icons.Trash;
 var contentOptions = {
     'None': null,
     'TooltipText': {
@@ -120,6 +161,12 @@ exports.default = {
             control: 'boolean',
             description: 'Invert tooltip colors (white background, black text)',
         },
+        trigger: {
+            name: "Trigger",
+            options: ['hover', 'click'],
+            control: { type: 'inline-radio' },
+            description: 'Trigger mode: hover (default) shows on mouse over, click toggles on click',
+        },
     },
     args: {
         text: 'The purple elephant danced across the neon sky, balancing a slice of pepperoni pizza on its trunk.',
@@ -136,6 +183,7 @@ exports.default = {
         followCursor: false,
         cursorOffset: 10,
         invert: false,
+        trigger: 'hover',
     }
 };
 var Tooltip_ = function (args) {
@@ -154,7 +202,7 @@ var Tooltip_ = function (args) {
             // Simple API - only used when primaryContent is not selected
             text: usePrimaryContent ? undefined : args.text, heading: usePrimaryContent ? undefined : (args.heading || undefined), 
             // Advanced API - only used when primaryContent is selected
-            primaryContent: usePrimaryContent ? contentOptions[args.primaryContentType] : undefined, secondaryContent: contentOptions[args.secondaryContentType], progressiveDelay: args.progressiveDelay, progressiveGap: args.progressiveGap, placement: args.placement, showDelay: args.showDelay, hideDelay: args.hideDelay, animation: args.animation, showPointer: args.showPointer, followCursor: args.followCursor, cursorOffset: args.cursorOffset, invert: args.invert }, args.followCursor ? (react_1.default.createElement("div", { style: {
+            primaryContent: usePrimaryContent ? contentOptions[args.primaryContentType] : undefined, secondaryContent: contentOptions[args.secondaryContentType], progressiveDelay: args.progressiveDelay, progressiveGap: args.progressiveGap, placement: args.placement, showDelay: args.showDelay, hideDelay: args.hideDelay, animation: args.animation, showPointer: args.showPointer, followCursor: args.followCursor, cursorOffset: args.cursorOffset, invert: args.invert, trigger: args.trigger }, args.followCursor ? (react_1.default.createElement("div", { style: {
                 width: '200px',
                 height: '150px',
                 backgroundColor: '#f0f0f0',
@@ -165,7 +213,7 @@ var Tooltip_ = function (args) {
                 border: '2px dashed #ccc',
                 cursor: 'default',
             } },
-            react_1.default.createElement(Typo_1.SANS_2, null, "Hover and move cursor"))) : (react_1.default.createElement(Info, { size: 24 })))));
+            react_1.default.createElement(Typo_1.SANS_2, null, "Hover and move cursor"))) : (react_1.default.createElement(Buttons_1.ButtonGhost, { icon: 'Info' })))));
 };
 exports.Tooltip_ = Tooltip_;
 var TooltipItem = function (_a) {
@@ -195,3 +243,931 @@ exports.EdgeCases = EdgeCases;
 exports.EdgeCases.parameters = {
     controls: { disable: true }
 };
+// Component compatibility story
+var ComponentItem = function (_a) {
+    var label = _a.label, children = _a.children;
+    return (react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '16px',
+            border: '1px solid #eee',
+            borderRadius: '8px',
+            minWidth: '150px',
+        } },
+        react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666', fontWeight: 500 } }, label),
+        react_1.default.createElement(Tooltip_1.default, { text: "This tooltip works on hover!" }, children)));
+};
+var ComponentCompatibility = function () { return (react_1.default.createElement("div", { style: { padding: '2rem' } },
+    react_1.default.createElement("h2", { style: { marginBottom: '2rem', fontSize: '18px', fontWeight: 600 } }, "Tooltip with Various Components"),
+    react_1.default.createElement("p", { style: { marginBottom: '2rem', color: '#666', fontSize: '14px' } }, "Hover over each component to verify the tooltip works correctly."),
+    react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '16px',
+            marginBottom: '3rem',
+        } },
+        react_1.default.createElement(ComponentItem, { label: "ButtonGhost" },
+            react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Info" })),
+        react_1.default.createElement(ComponentItem, { label: "ButtonGhost with text" },
+            react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Info", value: "Info" })),
+        react_1.default.createElement(ComponentItem, { label: "ButtonPrimary" },
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Primary" })),
+        react_1.default.createElement(ComponentItem, { label: "ButtonSecondary" },
+            react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Secondary" })),
+        react_1.default.createElement(ComponentItem, { label: "ButtonTertiary" },
+            react_1.default.createElement(Buttons_1.ButtonTertiary, { value: "Tertiary" })),
+        react_1.default.createElement(ComponentItem, { label: "Info Icon" },
+            react_1.default.createElement(Info, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "WarningCircle Icon" },
+            react_1.default.createElement(WarningCircle, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "Eye Icon" },
+            react_1.default.createElement(Eye, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "User Icon" },
+            react_1.default.createElement(User, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "GearSix Icon" },
+            react_1.default.createElement(GearSix, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "Envelope Icon" },
+            react_1.default.createElement(Envelope, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "MapPin Icon" },
+            react_1.default.createElement(MapPin, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "Check Icon" },
+            react_1.default.createElement(Check, { size: 24 })),
+        react_1.default.createElement(ComponentItem, { label: "OKELink" },
+            react_1.default.createElement(OKELink_1.OKELink, { text: "Click me", onClick: function () { } })),
+        react_1.default.createElement(ComponentItem, { label: "OKELink with icon" },
+            react_1.default.createElement(OKELink_1.OKELink, { text: "Settings", icon: "GearSix", onClick: function () { } })),
+        react_1.default.createElement(ComponentItem, { label: "Native button" },
+            react_1.default.createElement("button", { style: { padding: '8px 16px', cursor: 'pointer' } }, "Native Button")),
+        react_1.default.createElement(ComponentItem, { label: "Div element" },
+            react_1.default.createElement("div", { style: {
+                    padding: '8px 16px',
+                    backgroundColor: '#f0f0f0',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                } }, "Div Element")),
+        react_1.default.createElement(ComponentItem, { label: "Span element" },
+            react_1.default.createElement("span", { style: {
+                    padding: '8px 16px',
+                    backgroundColor: '#e0e0e0',
+                    borderRadius: '4px',
+                    cursor: 'pointer',
+                } }, "Span Element")),
+        react_1.default.createElement(ComponentItem, { label: "Image" },
+            react_1.default.createElement("img", { src: "https://via.placeholder.com/50", alt: "placeholder", style: { borderRadius: '4px', cursor: 'pointer' } }))),
+    react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Different Placements with ButtonGhost"),
+    react_1.default.createElement("div", { style: {
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '16px',
+            marginBottom: '3rem',
+        } }, ['top', 'bottom', 'left', 'right'].map(function (placement) { return (react_1.default.createElement("div", { key: placement, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: '8px',
+            padding: '16px',
+            border: '1px solid #eee',
+            borderRadius: '8px',
+        } },
+        react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } },
+            "placement=\"",
+            placement,
+            "\""),
+        react_1.default.createElement(Tooltip_1.default, { text: "Tooltip on ".concat(placement), placement: placement },
+            react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Info" })))); })),
+    react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Click to Pin Tooltip"),
+    react_1.default.createElement("p", { style: { marginBottom: '1rem', color: '#666', fontSize: '14px' } }, "Click on the button to pin the tooltip. Click again to dismiss."),
+    react_1.default.createElement("div", { style: {
+            display: 'flex',
+            gap: '16px',
+        } },
+        react_1.default.createElement(Tooltip_1.default, { text: "Click to pin this tooltip, click again to dismiss" },
+            react_1.default.createElement(Buttons_1.ButtonPrimary, { icon: "Check", value: "Click to pin" })),
+        react_1.default.createElement(Tooltip_1.default, { text: "This works with any button variant" },
+            react_1.default.createElement(Buttons_1.ButtonSecondary, { icon: "Eye", value: "Or this one" }))))); };
+exports.ComponentCompatibility = ComponentCompatibility;
+exports.ComponentCompatibility.parameters = {
+    controls: { disable: true }
+};
+// Dropdown options for testing (with icons)
+var dropdownOptions = [
+    { value: 'option1', display: 'Edit Profile', icon: 'User' },
+    { value: 'option2', display: 'Settings', icon: 'GearSix' },
+    { value: 'option3', display: 'View Details', icon: 'Eye' },
+    { value: 'option4', display: 'Send Email', icon: 'Envelope' },
+    { value: 'option5', display: 'Location', icon: 'MapPin' },
+];
+// Action menu actions for testing
+var actionMenuActions = [
+    { display: 'Edit', icon: 'PencilSimple', onClick: function () { return console.log('Edit clicked'); } },
+    { display: 'Delete', icon: 'Trash', onClick: function () { return console.log('Delete clicked'); } },
+    { display: 'Share', icon: 'ShareNetwork', onClick: function () { return console.log('Share clicked'); } },
+];
+// Advanced component compatibility story with form elements
+var AdvancedComponents = function () {
+    var _a = (0, react_1.useState)(null), dropdownValue = _a[0], setDropdownValue = _a[1];
+    var _b = (0, react_1.useState)([]), multiDropdownValue = _b[0], setMultiDropdownValue = _b[1];
+    var _c = (0, react_1.useState)(false), radioValue = _c[0], setRadioValue = _c[1];
+    var _d = (0, react_1.useState)(false), checkboxValue = _d[0], setCheckboxValue = _d[1];
+    var _e = (0, react_1.useState)(undefined), switchValue = _e[0], setSwitchValue = _e[1];
+    return (react_1.default.createElement("div", { style: { padding: '2rem' } },
+        react_1.default.createElement("h2", { style: { marginBottom: '2rem', fontSize: '18px', fontWeight: 600 } }, "Tooltip with Advanced Components"),
+        react_1.default.createElement("p", { style: { marginBottom: '2rem', color: '#666', fontSize: '14px' } }, "Test tooltip behavior with dropdowns, action menus, form controls, and other complex components."),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Dropdowns"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+                alignItems: 'flex-start',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "DropdownSingle with Tooltip"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Select a single option from dropdown" },
+                    react_1.default.createElement(DropdownSingle_1.DropdownSingle, { id: "dropdown-single", value: dropdownValue, options: dropdownOptions, onChange: function (id, val) { return setDropdownValue(val); }, placeholder: "Select option" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "DropdownMulti with Tooltip"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Select multiple options" },
+                    react_1.default.createElement(DropdownMulti_1.DropdownMulti, { id: "dropdown-multi", value: multiDropdownValue, options: dropdownOptions, onChange: function (id, val) { return setMultiDropdownValue(val); }, placeholder: "Select options" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Action Menu"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "ActionMenu with Tooltip"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Click to see actions" },
+                    react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actionMenuActions, icon: "DotsThree" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "ActionMenu (GearSix icon)"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Settings menu" },
+                    react_1.default.createElement(ActionMenu_1.ActionMenu, { actions: actionMenuActions, icon: "GearSix" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Form Controls"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+                alignItems: 'center',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "SwitchSingle"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Toggle this switch" },
+                    react_1.default.createElement(Switches_1.SwitchSingle, { id: "switch-single", value: switchValue, option: { value: 'enabled', display: 'Enable' }, onChange: function (id, val) { return setSwitchValue(val); } })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Tags"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '16px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "TagDisplay Default"),
+                react_1.default.createElement(Tooltip_1.default, { text: "This is a default tag" },
+                    react_1.default.createElement(Tags_1.TagDisplay, { display: "Default Tag" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "TagDisplay Positive"),
+                react_1.default.createElement(Tooltip_1.default, { text: "This is a positive/success tag" },
+                    react_1.default.createElement(Tags_1.TagDisplay, { display: "Success", colorPreset: "positive" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "TagDisplay Warning"),
+                react_1.default.createElement(Tooltip_1.default, { text: "This is a warning tag" },
+                    react_1.default.createElement(Tags_1.TagDisplay, { display: "Warning", colorPreset: "warning" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "TagDisplay Negative"),
+                react_1.default.createElement(Tooltip_1.default, { text: "This is a negative/error tag" },
+                    react_1.default.createElement(Tags_1.TagDisplay, { display: "Error", colorPreset: "negative" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "TagDisplay with Icon"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Tag with an icon" },
+                    react_1.default.createElement(Tags_1.TagDisplay, { display: "With Icon", icon: "Check" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Complex Nested Elements"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Card-like Container"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Tooltip on a card component" },
+                    react_1.default.createElement("div", { style: {
+                            padding: '16px',
+                            backgroundColor: '#fff',
+                            border: '1px solid #eee',
+                            borderRadius: '8px',
+                            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
+                            cursor: 'pointer',
+                        } },
+                        react_1.default.createElement("div", { style: { fontWeight: 600, marginBottom: '4px' } }, "Card Title"),
+                        react_1.default.createElement("div", { style: { fontSize: '12px', color: '#666' } }, "Card description text")))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Icon Button Group"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Group of action buttons" },
+                    react_1.default.createElement("div", { style: { display: 'flex', gap: '4px' } },
+                        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Eye" }),
+                        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "PencilSimple" }),
+                        react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Trash" })))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Avatar Placeholder"),
+                react_1.default.createElement(Tooltip_1.default, { text: "User profile" },
+                    react_1.default.createElement("div", { style: {
+                            width: '40px',
+                            height: '40px',
+                            borderRadius: '50%',
+                            backgroundColor: '#e0e0e0',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: 'pointer',
+                        } },
+                        react_1.default.createElement(User, { size: 20 })))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Badge/Notification"),
+                react_1.default.createElement(Tooltip_1.default, { text: "3 unread notifications" },
+                    react_1.default.createElement("div", { style: {
+                            position: 'relative',
+                            cursor: 'pointer',
+                        } },
+                        react_1.default.createElement(Envelope, { size: 24 }),
+                        react_1.default.createElement("span", { style: {
+                                position: 'absolute',
+                                top: '-4px',
+                                right: '-4px',
+                                backgroundColor: '#ff4444',
+                                color: 'white',
+                                fontSize: '10px',
+                                fontWeight: 'bold',
+                                borderRadius: '50%',
+                                width: '16px',
+                                height: '16px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            } }, "3")))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Progress Indicator"),
+                react_1.default.createElement(Tooltip_1.default, { text: "75% complete" },
+                    react_1.default.createElement("div", { style: {
+                            width: '100px',
+                            height: '8px',
+                            backgroundColor: '#e0e0e0',
+                            borderRadius: '4px',
+                            overflow: 'hidden',
+                            cursor: 'pointer',
+                        } },
+                        react_1.default.createElement("div", { style: {
+                                width: '75%',
+                                height: '100%',
+                                backgroundColor: '#4CAF50',
+                            } }))))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Interactive Elements (SVG, Canvas placeholders)"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "SVG Element"),
+                react_1.default.createElement(Tooltip_1.default, { text: "This is an SVG circle" },
+                    react_1.default.createElement("svg", { width: "50", height: "50", style: { cursor: 'pointer' } },
+                        react_1.default.createElement("circle", { cx: "25", cy: "25", r: "20", fill: "#4CAF50" })))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Chart Placeholder"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Chart data: Sales increased by 25%" },
+                    react_1.default.createElement("div", { style: {
+                            width: '120px',
+                            height: '80px',
+                            backgroundColor: '#f5f5f5',
+                            border: '1px solid #ddd',
+                            borderRadius: '4px',
+                            display: 'flex',
+                            alignItems: 'flex-end',
+                            justifyContent: 'space-around',
+                            padding: '8px',
+                            cursor: 'pointer',
+                        } },
+                        react_1.default.createElement("div", { style: { width: '12px', height: '30%', backgroundColor: '#2196F3' } }),
+                        react_1.default.createElement("div", { style: { width: '12px', height: '50%', backgroundColor: '#2196F3' } }),
+                        react_1.default.createElement("div", { style: { width: '12px', height: '70%', backgroundColor: '#2196F3' } }),
+                        react_1.default.createElement("div", { style: { width: '12px', height: '90%', backgroundColor: '#4CAF50' } })))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Table Cell"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Click to edit this cell" },
+                    react_1.default.createElement("div", { style: {
+                            padding: '8px 12px',
+                            backgroundColor: '#fff',
+                            border: '1px solid #ddd',
+                            cursor: 'pointer',
+                            minWidth: '100px',
+                        } }, "Cell Value"))))));
+};
+exports.AdvancedComponents = AdvancedComponents;
+exports.AdvancedComponents.parameters = {
+    controls: { disable: true }
+};
+// Chart data for real charts
+var barChartData = [
+    { name: 'Jan', value: 400 },
+    { name: 'Feb', value: 300 },
+    { name: 'Mar', value: 600 },
+    { name: 'Apr', value: 800 },
+    { name: 'May', value: 500 },
+];
+var pieChartData = [
+    { name: 'Group A', value: 400 },
+    { name: 'Group B', value: 300 },
+    { name: 'Group C', value: 300 },
+    { name: 'Group D', value: 200 },
+];
+var lineChartData = [
+    { name: 'Week 1', value: 400 },
+    { name: 'Week 2', value: 300 },
+    { name: 'Week 3', value: 500 },
+    { name: 'Week 4', value: 280 },
+    { name: 'Week 5', value: 590 },
+];
+var COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
+// List options with descriptions for tooltip demo
+var listOptionsWithTooltips = [
+    { value: 'edit', display: 'Edit Profile', icon: 'PencilSimple', desc: 'Modify your profile information' },
+    { value: 'settings', display: 'Settings', icon: 'GearSix', desc: 'Configure application settings' },
+    { value: 'delete', display: 'Delete Account', icon: 'Trash', desc: 'Permanently remove your account' },
+];
+// Charts and List Items story
+var ChartsAndListItems = function () {
+    return (react_1.default.createElement("div", { style: { padding: '2rem' } },
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "List Items with Individual Tooltips (Dropdown Option Pattern)"),
+        react_1.default.createElement("p", { style: { marginBottom: '1rem', color: '#666', fontSize: '14px' } }, "Each list item has its own tooltip - simulating how tooltips could work on dropdown options."),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: {
+                    backgroundColor: '#fff',
+                    border: '1px solid #eee',
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    padding: '8px',
+                    minWidth: '200px',
+                } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666', padding: '8px', display: 'block' } }, "Simulated Dropdown Options"),
+                listOptionsWithTooltips.map(function (option) { return (react_1.default.createElement(Tooltip_1.default, { key: option.value, text: option.desc, placement: "right" },
+                    react_1.default.createElement("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                            padding: '10px 12px',
+                            cursor: 'pointer',
+                            borderRadius: '4px',
+                            transition: 'background-color 0.2s',
+                        }, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; } },
+                        option.icon === 'PencilSimple' && react_1.default.createElement(PencilSimple, { size: 16 }),
+                        option.icon === 'GearSix' && react_1.default.createElement(GearSix, { size: 16 }),
+                        option.icon === 'Trash' && react_1.default.createElement(Trash, { size: 16 }),
+                        react_1.default.createElement("span", null, option.display)))); })),
+            react_1.default.createElement("div", { style: {
+                    backgroundColor: '#fff',
+                    border: '1px solid #eee',
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    padding: '8px',
+                    minWidth: '200px',
+                } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666', padding: '8px', display: 'block' } }, "Menu Items (tooltip on bottom)"),
+                react_1.default.createElement(Tooltip_1.default, { text: "View and edit your profile", placement: "bottom" },
+                    react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 12px', cursor: 'pointer', borderRadius: '4px' }, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; } },
+                        react_1.default.createElement(User, { size: 16 }),
+                        react_1.default.createElement("span", null, "Profile"))),
+                react_1.default.createElement(Tooltip_1.default, { text: "Configure your preferences", placement: "bottom" },
+                    react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 12px', cursor: 'pointer', borderRadius: '4px' }, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; } },
+                        react_1.default.createElement(GearSix, { size: 16 }),
+                        react_1.default.createElement("span", null, "Settings"))),
+                react_1.default.createElement(Tooltip_1.default, { text: "Check your messages", placement: "bottom" },
+                    react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', padding: '10px 12px', cursor: 'pointer', borderRadius: '4px' }, onMouseEnter: function (e) { return e.currentTarget.style.backgroundColor = '#f5f5f5'; }, onMouseLeave: function (e) { return e.currentTarget.style.backgroundColor = 'transparent'; } },
+                        react_1.default.createElement(Envelope, { size: 16 }),
+                        react_1.default.createElement("span", null, "Messages"))))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "List Component with Tooltip Wrapper"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Entire List with Tooltip"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Select an option from this list" },
+                    react_1.default.createElement(List_1.List, { id: "tooltip-list", options: dropdownOptions, onChange: function (id, val) { return console.log('Selected:', val); }, disableShadow: true, enableBorder: true })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Table Rows with Tooltips"),
+        react_1.default.createElement("div", { style: { marginBottom: '3rem' } },
+            react_1.default.createElement("table", { style: {
+                    width: '100%',
+                    maxWidth: '600px',
+                    borderCollapse: 'collapse',
+                    backgroundColor: '#fff',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
+                } },
+                react_1.default.createElement("thead", null,
+                    react_1.default.createElement("tr", { style: { backgroundColor: '#f5f5f5' } },
+                        react_1.default.createElement("th", { style: { padding: '12px', textAlign: 'left', borderBottom: '1px solid #eee' } }, "Name"),
+                        react_1.default.createElement("th", { style: { padding: '12px', textAlign: 'left', borderBottom: '1px solid #eee' } }, "Status"),
+                        react_1.default.createElement("th", { style: { padding: '12px', textAlign: 'left', borderBottom: '1px solid #eee' } }, "Actions"))),
+                react_1.default.createElement("tbody", null,
+                    react_1.default.createElement("tr", null,
+                        react_1.default.createElement("td", { style: { padding: '12px', borderBottom: '1px solid #eee' } },
+                            react_1.default.createElement(Tooltip_1.default, { text: "Click to view John's profile" },
+                                react_1.default.createElement("span", { style: { cursor: 'pointer', color: '#2196F3' } }, "John Doe"))),
+                        react_1.default.createElement("td", { style: { padding: '12px', borderBottom: '1px solid #eee' } },
+                            react_1.default.createElement(Tooltip_1.default, { text: "User is currently active" },
+                                react_1.default.createElement(Tags_1.TagDisplay, { display: "Active", colorPreset: "positive" }))),
+                        react_1.default.createElement("td", { style: { padding: '12px', borderBottom: '1px solid #eee' } },
+                            react_1.default.createElement("div", { style: { display: 'flex', gap: '4px' } },
+                                react_1.default.createElement(Tooltip_1.default, { text: "Edit user" },
+                                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "PencilSimple" })),
+                                react_1.default.createElement(Tooltip_1.default, { text: "Delete user" },
+                                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Trash" }))))),
+                    react_1.default.createElement("tr", null,
+                        react_1.default.createElement("td", { style: { padding: '12px', borderBottom: '1px solid #eee' } },
+                            react_1.default.createElement(Tooltip_1.default, { text: "Click to view Jane's profile" },
+                                react_1.default.createElement("span", { style: { cursor: 'pointer', color: '#2196F3' } }, "Jane Smith"))),
+                        react_1.default.createElement("td", { style: { padding: '12px', borderBottom: '1px solid #eee' } },
+                            react_1.default.createElement(Tooltip_1.default, { text: "User account is pending verification" },
+                                react_1.default.createElement(Tags_1.TagDisplay, { display: "Pending", colorPreset: "warning" }))),
+                        react_1.default.createElement("td", { style: { padding: '12px', borderBottom: '1px solid #eee' } },
+                            react_1.default.createElement("div", { style: { display: 'flex', gap: '4px' } },
+                                react_1.default.createElement(Tooltip_1.default, { text: "Edit user" },
+                                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "PencilSimple" })),
+                                react_1.default.createElement(Tooltip_1.default, { text: "Delete user" },
+                                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Trash" }))))))))));
+};
+exports.ChartsAndListItems = ChartsAndListItems;
+exports.ChartsAndListItems.parameters = {
+    controls: { disable: true }
+};
+// Dropdown options with tooltips - demonstrating the tooltip prop on dropdown options
+var dropdownOptionsWithTooltips = [
+    { value: 'text', display: 'Short Text', icon: 'TextAa', tooltip: 'Single line text input for names, titles, or brief responses' },
+    { value: 'textarea', display: 'Long Text', icon: 'TextAlignLeft', tooltip: 'Multi-line text area for descriptions, comments, or detailed content' },
+    { value: 'number', display: 'Number', icon: 'Hash', tooltip: 'Numeric input for quantities, amounts, or measurements' },
+    { value: 'date', display: 'Date', icon: 'Calendar', tooltip: 'Date picker for selecting specific dates' },
+    { value: 'select', display: 'Single Select', icon: 'ListBullets', tooltip: 'Dropdown to choose one option from a predefined list' },
+    { value: 'multiselect', display: 'Multi Select', icon: 'CheckSquare', tooltip: 'Select multiple options from a predefined list' },
+    { value: 'email', display: 'Email', icon: 'Envelope', tooltip: 'Email address field with validation' },
+    { value: 'url', display: 'URL', icon: 'Link', tooltip: 'Website or link field with URL validation' },
+];
+// Dropdown options with advanced tooltip layouts
+var dropdownOptionsWithAdvancedTooltips = [
+    {
+        value: 'text',
+        display: 'Short Text',
+        icon: 'TextAa',
+        // Using heading + text props
+        tooltip: {
+            heading: 'Short Text Field',
+            text: 'Single line text input for names, titles, or brief responses.',
+        }
+    },
+    {
+        value: 'textarea',
+        display: 'Long Text',
+        icon: 'TextAlignLeft',
+        // Using primaryContent with blocks and links
+        tooltip: {
+            primaryContent: {
+                layout: 'TooltipHeading',
+                props: {
+                    blocks: [
+                        { heading: 'Long Text Field' },
+                        { text: 'Multi-line text area for descriptions, comments, or detailed content.' },
+                        { link: { text: 'Learn more about formatting', href: 'https://example.com/formatting', newTab: true } }
+                    ]
+                }
+            }
+        }
+    },
+    {
+        value: 'number',
+        display: 'Number',
+        icon: 'Hash',
+        // Using primaryContent + invert
+        tooltip: {
+            primaryContent: {
+                layout: 'TooltipText',
+                props: {
+                    text: 'Numeric input for quantities, amounts, or measurements.',
+                    link: { text: 'See validation rules', href: 'https://example.com/number-validation', newTab: true, position: 'end' }
+                }
+            },
+        }
+    },
+    {
+        value: 'date',
+        display: 'Date',
+        icon: 'Calendar',
+        // Using primaryContent + animation + showDelay
+        tooltip: {
+            primaryContent: {
+                layout: 'TooltipHeading',
+                props: {
+                    heading: 'Date Picker',
+                    text: 'Select specific dates with calendar interface. Supports date ranges and validation.'
+                }
+            },
+            animation: 'fade',
+            showDelay: 200,
+        }
+    },
+    {
+        value: 'select',
+        display: 'Single Select',
+        icon: 'ListBullets',
+        // Using primaryContent + secondaryContent (progressive tooltip)
+        tooltip: {
+            primaryContent: {
+                layout: 'TooltipHeading',
+                props: {
+                    heading: 'Single Select',
+                    text: 'Choose one option from a predefined list.',
+                }
+            },
+            secondaryContent: {
+                layout: 'TooltipText',
+                props: {
+                    text: 'Best for status fields, categories, or any exclusive choice.',
+                }
+            },
+            progressiveDelay: 800,
+        }
+    },
+];
+var DropdownOptionsWithTooltips = function () {
+    var _a = (0, react_1.useState)(null), singleValue = _a[0], setSingleValue = _a[1];
+    var _b = (0, react_1.useState)([]), multiValue = _b[0], setMultiValue = _b[1];
+    var _c = (0, react_1.useState)(null), advancedValue = _c[0], setAdvancedValue = _c[1];
+    return (react_1.default.createElement("div", { style: { padding: '2rem' } },
+        react_1.default.createElement("h2", { style: { marginBottom: '2rem', fontSize: '18px', fontWeight: 600 } }, "Dropdown Options with Tooltips"),
+        react_1.default.createElement("p", { style: { marginBottom: '2rem', color: '#666', fontSize: '14px' } },
+            "Each dropdown option can have a ",
+            react_1.default.createElement("code", null, "tooltip"),
+            " prop that displays additional information when hovering over the option. This is useful for field type selectors or any dropdown where options benefit from extra context."),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Simple Text Tooltips"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '48px',
+                marginBottom: '3rem',
+                alignItems: 'flex-start',
+                justifyContent: 'end'
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', minWidth: '250px' } },
+                react_1.default.createElement("span", { style: { fontSize: '14px', fontWeight: 500, marginBottom: '4px' } }, "Single Select with Tooltips"),
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666', marginBottom: '8px' } }, "Hover over each option to see its tooltip on the right"),
+                react_1.default.createElement(DropdownSingle_1.DropdownSingle, { id: "dropdown-with-tooltips", value: singleValue, options: dropdownOptionsWithTooltips, onChange: function (id, val) { return setSingleValue(val); }, placeholder: "Select field type..." })),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', minWidth: '250px' } },
+                react_1.default.createElement("span", { style: { fontSize: '14px', fontWeight: 500, marginBottom: '4px' } }, "Multi Select with Tooltips"),
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666', marginBottom: '8px' } }, "Works with multi-select dropdowns too"),
+                react_1.default.createElement(DropdownMulti_1.DropdownMulti, { id: "dropdown-multi-with-tooltips", value: multiValue, options: dropdownOptionsWithTooltips, onChange: function (id, val) { return setMultiValue(val); }, placeholder: "Select field types..." }))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Advanced Layout Tooltips"),
+        react_1.default.createElement("p", { style: { marginBottom: '1rem', color: '#666', fontSize: '14px' } }, "Instead of a simple string, you can pass a layout object to display rich tooltips with headings, multiple blocks, and links."),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '48px',
+                marginBottom: '3rem',
+                alignItems: 'flex-start',
+                justifyContent: 'end'
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', minWidth: '250px' } },
+                react_1.default.createElement("span", { style: { fontSize: '14px', fontWeight: 500, marginBottom: '4px' } }, "With Headings, Blocks & Links"),
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666', marginBottom: '8px' } }, "Hover over options to see advanced layouts"),
+                react_1.default.createElement(DropdownSingle_1.DropdownSingle, { id: "dropdown-with-advanced-tooltips", value: advancedValue, options: dropdownOptionsWithAdvancedTooltips, onChange: function (id, val) { return setAdvancedValue(val); }, placeholder: "Select field type..." }))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Usage Examples"),
+        react_1.default.createElement("pre", { style: {
+                backgroundColor: '#f5f5f5',
+                padding: '16px',
+                borderRadius: '8px',
+                fontSize: '13px',
+                overflow: 'auto',
+            } }, "// Format 1: Simple string\ntooltip: 'Single line text input for names'\n\n// Format 2: Tooltip props object (same props as <Tooltip> component)\ntooltip: {\n  heading: 'Short Text Field',\n  text: 'Description text here.',\n}\n\n// With primaryContent layout\ntooltip: {\n  primaryContent: {\n    layout: 'TooltipHeading',\n    props: {\n      blocks: [\n        { heading: 'Title' },\n        { text: 'Description' },\n        { link: { text: 'Learn more', href: '...', newTab: true } }\n      ]\n    }\n  },\n  invert: true,        // White background\n  animation: 'fade',   // Fade animation\n  showDelay: 200,      // Delay before showing\n}\n\n// With progressive tooltip (primary + secondary)\ntooltip: {\n  primaryContent: { layout: 'TooltipHeading', props: { heading: 'Title' } },\n  secondaryContent: { layout: 'TooltipText', props: { text: 'More details...' } },\n  progressiveDelay: 800,\n}")));
+};
+exports.DropdownOptionsWithTooltips = DropdownOptionsWithTooltips;
+exports.DropdownOptionsWithTooltips.parameters = {
+    controls: { disable: true }
+};
+// Click Trigger Mode story
+var ClickTrigger = function () {
+    return (react_1.default.createElement("div", { style: { padding: '2rem' } },
+        react_1.default.createElement("h2", { style: { marginBottom: '2rem', fontSize: '18px', fontWeight: 600 } }, "Click Trigger Mode"),
+        react_1.default.createElement("p", { style: { marginBottom: '2rem', color: '#666', fontSize: '14px' } },
+            "Use ",
+            react_1.default.createElement("code", null, "trigger=\"click\""),
+            " to make tooltips toggle on click instead of hover. Click the button to show the tooltip, click again or click outside to dismiss."),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Click to toggle"),
+                react_1.default.createElement(Tooltip_1.default, { text: "This tooltip appears on click!", trigger: "click" },
+                    react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Click me" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Click with placement"),
+                react_1.default.createElement(Tooltip_1.default, { text: "Tooltip on the right side", trigger: "click", placement: "right" },
+                    react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Click (right)" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Icon button click"),
+                react_1.default.createElement(Tooltip_1.default, { text: "More information about this feature", trigger: "click" },
+                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Info" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Hover (default)"),
+                react_1.default.createElement(Tooltip_1.default, { text: "This is the default hover behavior" },
+                    react_1.default.createElement(Buttons_1.ButtonTertiary, { value: "Hover me" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Usage Example"),
+        react_1.default.createElement("pre", { style: {
+                backgroundColor: '#f5f5f5',
+                padding: '16px',
+                borderRadius: '8px',
+                fontSize: '13px',
+                overflow: 'auto',
+            } }, "// Click trigger - tooltip toggles on click\n<Tooltip text=\"Click to see this!\" trigger=\"click\">\n  <Button>Click me</Button>\n</Tooltip>\n\n// Hover trigger (default) - tooltip shows on hover\n<Tooltip text=\"Hover to see this!\">\n  <Button>Hover me</Button>\n</Tooltip>")));
+};
+exports.ClickTrigger = ClickTrigger;
+exports.ClickTrigger.parameters = {
+    controls: { disable: true }
+};
+// Advanced Layouts with Blocks and Links
+var AdvancedLayouts = function () {
+    return (react_1.default.createElement("div", { style: { padding: '2rem' } },
+        react_1.default.createElement("h2", { style: { marginBottom: '2rem', fontSize: '18px', fontWeight: 600 } }, "Advanced Tooltip Layouts"),
+        react_1.default.createElement("p", { style: { marginBottom: '2rem', color: '#666', fontSize: '14px' } }, "Tooltips support multiple content blocks with headings, paragraphs, and hyperlinks."),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Multiple Blocks"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Multiple heading/text blocks"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipHeading',
+                        props: {
+                            blocks: [
+                                { heading: 'First Section', text: 'This is the first paragraph with details.' },
+                                { heading: 'Second Section', text: 'This is another section with more info.' },
+                                { text: 'Just a paragraph without heading.' },
+                            ]
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Multiple Blocks" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Headings only"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipHeading',
+                        props: {
+                            blocks: [
+                                { heading: 'Step 1: Select a file' },
+                                { heading: 'Step 2: Configure options' },
+                                { heading: 'Step 3: Submit' },
+                            ]
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "Steps List" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "With Hyperlinks"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Text with link at end"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            text: 'Learn more about this feature',
+                            link: {
+                                text: 'Read docs',
+                                href: 'https://example.com/docs',
+                                newTab: true,
+                                position: 'end'
+                            }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Info" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Link at start"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            text: 'for more information about settings.',
+                            link: {
+                                text: 'Click here',
+                                href: 'https://example.com',
+                                newTab: true,
+                                position: 'start'
+                            }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonTertiary, { value: "Link at Start" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Link only"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            link: {
+                                text: 'View Documentation',
+                                href: 'https://example.com/docs',
+                                newTab: true
+                            }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Link" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "No underline (custom style)"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            text: 'Check out our',
+                            link: {
+                                text: 'API Reference',
+                                href: 'https://example.com/api',
+                                newTab: true,
+                                position: 'end'
+                            },
+                            linkStyle: { textDecoration: 'none' }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "No Underline" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Heading with link"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipHeading',
+                        props: {
+                            blocks: [
+                                {
+                                    heading: 'Quick Actions',
+                                    link: { text: 'View all', href: 'https://example.com/actions', newTab: true }
+                                }
+                            ]
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Heading + Link" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Multiple headings with links"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipHeading',
+                        props: {
+                            blocks: [
+                                {
+                                    heading: 'Documentation',
+                                    link: { text: 'Read docs', href: 'https://example.com/docs', newTab: true }
+                                },
+                                {
+                                    heading: 'Support',
+                                    link: { text: 'Get help', href: 'https://example.com/support', newTab: true }
+                                }
+                            ]
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonTertiary, { value: "Multiple Headings" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Link Styles"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Default (underline)"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            link: {
+                                text: 'Default Link Style',
+                                href: 'https://example.com',
+                                newTab: true
+                            }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Default" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "No underline"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            link: {
+                                text: 'No Underline Link',
+                                href: 'https://example.com',
+                                newTab: true
+                            },
+                            linkStyle: { textDecoration: 'none' }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonSecondary, { value: "No Underline" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Custom color"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            text: 'Visit our',
+                            link: {
+                                text: 'Help Center',
+                                href: 'https://example.com/help',
+                                newTab: true,
+                                position: 'end'
+                            },
+                            linkStyle: { color: '#90caf9' }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonTertiary, { value: "Custom Color" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Bold link"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipText',
+                        props: {
+                            text: 'Read the',
+                            link: {
+                                text: 'Terms of Service',
+                                href: 'https://example.com/terms',
+                                newTab: true,
+                                position: 'end'
+                            },
+                            linkStyle: { fontWeight: 600 }
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "FileText" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Blocks with Links"),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: '24px',
+                marginBottom: '3rem',
+            } },
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Multiple blocks with links"),
+                react_1.default.createElement(Tooltip_1.default, { primaryContent: {
+                        layout: 'TooltipHeading',
+                        props: {
+                            blocks: [
+                                {
+                                    heading: 'Getting Started',
+                                    text: 'Learn the basics of our platform.',
+                                    link: { text: 'Tutorial', href: 'https://example.com/tutorial', newTab: true }
+                                },
+                                {
+                                    heading: 'Advanced Features',
+                                    text: 'Explore powerful capabilities.',
+                                    link: { text: 'Learn more', href: 'https://example.com/advanced', newTab: true }
+                                },
+                                {
+                                    link: { text: 'Full Documentation', href: 'https://example.com/docs', newTab: true }
+                                }
+                            ]
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonPrimary, { value: "Full Example" }))),
+            react_1.default.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: '8px', alignItems: 'center' } },
+                react_1.default.createElement("span", { style: { fontSize: '12px', color: '#666' } }, "Help tooltip pattern"),
+                react_1.default.createElement(Tooltip_1.default, { trigger: "click", primaryContent: {
+                        layout: 'TooltipHeading',
+                        props: {
+                            blocks: [
+                                {
+                                    heading: 'What is this field?',
+                                    text: 'This field accepts a unique identifier for your record.'
+                                },
+                                {
+                                    text: 'The ID must be alphanumeric and between 3-20 characters.'
+                                },
+                                {
+                                    link: { text: 'See naming conventions', href: 'https://example.com/help', newTab: true }
+                                }
+                            ]
+                        }
+                    } },
+                    react_1.default.createElement(Buttons_1.ButtonGhost, { icon: "Question" })))),
+        react_1.default.createElement("h3", { style: { marginBottom: '1rem', fontSize: '16px', fontWeight: 600 } }, "Usage Examples"),
+        react_1.default.createElement("pre", { style: {
+                backgroundColor: '#f5f5f5',
+                padding: '16px',
+                borderRadius: '8px',
+                fontSize: '13px',
+                overflow: 'auto',
+            } }, "// Multiple blocks with headings and text\n<Tooltip\n  primaryContent={{\n    layout: 'TooltipHeading',\n    props: {\n      blocks: [\n        { heading: 'Section 1', text: 'Description for section 1' },\n        { heading: 'Section 2', text: 'Description for section 2' },\n        { text: 'Just a paragraph without heading' },\n      ]\n    }\n  }}\n>\n  <Button>Hover me</Button>\n</Tooltip>\n\n// Text with hyperlink\n<Tooltip\n  primaryContent={{\n    layout: 'TooltipText',\n    props: {\n      text: 'Learn more about this feature',\n      link: {\n        text: 'Read docs',\n        href: 'https://example.com',\n        newTab: true,\n        position: 'end' // or 'start'\n      }\n    }\n  }}\n>\n  <Button>With Link</Button>\n</Tooltip>\n\n// Link only (no text)\n<Tooltip\n  primaryContent={{\n    layout: 'TooltipText',\n    props: {\n      link: {\n        text: 'View Documentation',\n        href: 'https://example.com',\n        newTab: true\n      }\n    }\n  }}\n>\n  <Button>Link Only</Button>\n</Tooltip>")));
+};
+exports.AdvancedLayouts = AdvancedLayouts;
+exports.AdvancedLayouts.parameters = {
+    controls: { disable: true }
+};