@heymantle/litho 0.0.15 → 0.0.16

package/dist/esm/components/Tip.js

@@ -1,10 +1,91 @@
+"use client";
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { cloneElement, isValidElement, useMemo } from "react";
 import { tv } from "tailwind-variants";
 import Icon from "./Icon.js";
+import Button from "./Button.js";
+import Text from "./Text.js";
 import { AlertMinor, CancelMinor, InfoMinor, MagicMajor } from "@shopify/polaris-icons";
-var styles = tv({
-    base: "Litho-Tip relative flex rounded-md p-2",
+/**
+ * @component Tip
+ *
+ * @description A subtle inline hint component that displays contextual guidance or tips within a page section.
+ *
+ * @usage
+ * - DO: Provide helpful, non-critical contextual hints or best practices inline.
+ * - DON'T: Use for important alerts or errors (use Banner).
+ *
+ * @accessibility
+ * - Tip content is read as regular page content; ensure the tip text is meaningful without relying on its icon.
+ *
+ * @alternative
+ * - If you need a prominent alert with actions, use `Banner`.
+ * - If you need a global notification bar, use `AnnouncementBar`.
+ *
+ * @param {Object} props - The component props.
+ * @param {"info" | "critical" | "success" | "warning" | "attention" | "highlight" | "neutral" | "plain" | "minimal"} [props.status="info"] - The status type of the tip.
+ * @param {Function} [props.onDismiss] - Function to call when the dismiss button is clicked.
+ * @param {Function} [props.onClick] - Function to call when the tip is clicked.
+ * @param {React.ReactNode} props.children - The content of the tip.
+ * @param {React.ElementType} [props.icon] - Custom icon for the tip.
+ * @param {"left" | "right" | "center"} [props.align="left"] - The alignment of the tip.
+ * @param {Array<{content: string, onAction: Function}>} [props.actions] - Array of action objects to show as buttons at the bottom.
+ * @param {string | React.ReactNode} [props.title=null] - Optional title shown above the tip content.
+ * @returns {JSX.Element} The rendered Tip component.
+ */ var styles = tv({
+    base: "Litho-Tip relative flex rounded-md",
     variants: {
         status: {
             success: "bg-success-alt text-success-alt-fg",
@@ -14,7 +95,8 @@ var styles = tv({
             highlight: "bg-highlight-alt text-highlight-alt-fg",
             insight: "bg-insight-alt text-insight-alt-fg",
             info: "bg-info-alt text-info-alt-fg",
-            plain: "bg-transparent text-subdued px-0!"
+            plain: "bg-transparent text-high border border-border-subdued rounded-lg",
+            minimal: "bg-transparent text-high"
         },
         dismissible: {
             true: "pr-8"
@@ -24,19 +106,29 @@ var styles = tv({
         },
         border: {
             true: "border border-tint-2"
+        },
+        padding: {
+            default: "p-2",
+            md: "p-3",
+            lg: "p-4"
         }
     },
     defaultVariants: {
         status: "info",
         dismissible: false,
         clickable: false,
-        border: false
+        border: false,
+        padding: "default"
     },
     compoundVariants: [
         {
             clickable: true,
             status: "info",
             className: "hover:outline hover:outline-info-alt-lower"
+        },
+        {
+            status: "minimal",
+            className: "!p-0"
         }
     ]
 });
@@ -81,29 +173,20 @@ var statusHelpers = {
     insight: {
         icon: MagicMajor
     },
-    neutral: {}
+    neutral: {},
+    minimal: {}
 };
-/**
- * Tip component for displaying informational messages with optional dismiss functionality.
- *
- * @param {Object} props - The component props.
- * @param {"info" | "critical" | "success" | "warning" | "attention" | "highlight" | "neutral"} [props.status="info"] - The status type of the tip.
- * @param {Function} [props.onDismiss] - Function to call when the dismiss button is clicked.
- * @param {Function} [props.onClick] - Function to call when the tip is clicked.
- * @param {React.ReactNode} props.children - The content of the tip.
- * @param {React.ElementType} [props.icon] - Custom icon for the tip.
- * @param {"left" | "right" | "center"} [props.align="left"] - The alignment of the tip.
- * @returns {JSX.Element} The rendered Tip component.
- */ function Tip() {
+function Tip() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _statusHelpers_status;
-    var _props_status = props.status, status = _props_status === void 0 ? "info" : _props_status, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children, _icon = props.icon, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, border = props.border;
+    var _props_status = props.status, status = _props_status === void 0 ? "info" : _props_status, onClick = props.onClick, onDismiss = props.onDismiss, children = props.children, _icon = props.icon, _props_align = props.align, align = _props_align === void 0 ? "left" : _props_align, border = props.border, actions = props.actions, _props_title = props.title, title = _props_title === void 0 ? null : _props_title, _props_padding = props.padding, padding = _props_padding === void 0 ? "default" : _props_padding;
     var icon = _icon === null ? null : _icon || ((_statusHelpers_status = statusHelpers[status]) === null || _statusHelpers_status === void 0 ? void 0 : _statusHelpers_status.icon) || InfoMinor;
     var classes = styles({
         status: status,
         dismissible: !!onDismiss,
         clickable: !!onClick,
-        border: border
+        border: border,
+        padding: padding
     });
     var base = "-alt-icon";
     var iconColorMap = {
@@ -115,7 +198,9 @@ var statusHelpers = {
         highlight: "highlight".concat(base),
         insight: "insight".concat(base),
         neutral: "neutral".concat(base),
-        default: "info".concat(base)
+        default: "info".concat(base),
+        plain: "subdued",
+        minimal: "subdued"
     };
     var iconColor = iconColorMap[status] || iconColorMap.default;
     var processedChildren = useMemo(function() {
@@ -139,9 +224,19 @@ var statusHelpers = {
         children,
         status
     ]);
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
         className: classes,
-        onClick: onClick,
+        onClick: onClick
+    }, onClick ? {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(e);
+            }
+        }
+    } : {}), {
         children: [
             /*#__PURE__*/ _jsxs("div", {
                 className: innerStyles({
@@ -152,8 +247,28 @@ var statusHelpers = {
                         source: icon,
                         color: iconColor
                     }),
-                    /*#__PURE__*/ _jsx("div", {
-                        children: processedChildren
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-1 flex-1",
+                        children: [
+                            title != null && title !== "" && /*#__PURE__*/ _jsx(Text, {
+                                fontWeight: "medium",
+                                children: title
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                children: processedChildren
+                            }),
+                            (actions === null || actions === void 0 ? void 0 : actions.length) > 0 && /*#__PURE__*/ _jsx("div", {
+                                className: "relative -left-3 flex items-center",
+                                children: actions.map(function(action, i) {
+                                    return /*#__PURE__*/ _jsx(Button, {
+                                        plain: true,
+                                        size: "small",
+                                        onClick: action.onAction,
+                                        children: action.content
+                                    }, i);
+                                })
+                            })
+                        ]
                     })
                 ]
             }),
@@ -168,6 +283,6 @@ var statusHelpers = {
                 })
             })
         ]
-    });
+    }));
 }
 export default Tip;

package/dist/esm/components/ToastNotification.js

@@ -7,6 +7,19 @@ function _array_like_to_array(arr, len) {
 function _array_with_holes(arr) {
     if (Array.isArray(arr)) return arr;
 }
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
 function _iterable_to_array_limit(arr, i) {
     var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
     if (_i == null) return;
@@ -34,6 +47,45 @@ function _iterable_to_array_limit(arr, i) {
 function _non_iterable_rest() {
     throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
 function _sliced_to_array(arr, i) {
     return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
 }
@@ -51,7 +103,47 @@ import { tv } from "tailwind-variants";
 import Text from "./Text.js";
 import Icon from "./Icon.js";
 import { CancelMinor } from "@shopify/polaris-icons";
-var styles = tv({
+/**
+ * @component ToastNotification
+ *
+ * @description A brief, auto-dismissing notification that appears at the bottom of the screen to confirm an action or report an event.
+ *
+ * @usage
+ * - DO: Display brief, auto-dismissing success or info notifications after user actions.
+ * - DON'T: Use for persistent messages or errors (use Banner).
+ *
+ * @accessibility
+ * - Toast should be announced to screen readers via `role="alert"` or live region. Keep messages brief.
+ *
+ * @alternative
+ * - If you need a persistent message, use `Banner`.
+ * - If you need a modal confirmation, use `Modal`.
+ *
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} [props.prefix] - Optional prefix content (image, icon, or component) to display before the title.
+ * @param {Object|Function} [props.icon] - Optional icon source (from @shopify/polaris-icons) to display as prefix. Used as fallback if prefix is not provided.
+ * @param {string} props.title - The main title text of the toast.
+ * @param {string} [props.subtitle] - Optional subtitle text displayed below the title.
+ * @param {number} [props.duration=3000] - Duration in milliseconds before the toast auto-dismisses. Defaults to 2000ms (2 seconds).
+ * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.position='topRight'] - Position of the toast on the screen.
+ * @param {Function} [props.onDismiss] - Callback function called when the toast is dismissed (either automatically or manually).
+ * @param {Function} [props.onClick] - Callback function called when the toast is clicked. Makes the entire toast clickable with cursor-pointer.
+ * @param {boolean} [props.dismissible=true] - Whether the toast can be manually dismissed via the close button.
+ * @param {boolean} [props.fixed=true] - Whether to use fixed positioning. Set to false when used within ToastProvider.
+ * @param {boolean} [props.isDismissing=false] - Whether the toast is in a dismissing state. Starts the exit animation immediately.
+ * @param {string} [props.className] - Additional CSS classes to apply to the toast container.
+ * @returns {JSX.Element|null} The rendered toast notification or null if dismissed.
+ *
+ * @example
+ * <ToastNotification
+ *   prefix={<Icon source={TickMinor} color="success" />}
+ *   title="Support ticket updated"
+ *   subtitle="Your ticket has been resolved"
+ *   duration={3000}
+ *   position="topRight"
+ *   onDismiss={() => console.log('Toast dismissed')}
+ * />
+ */ var styles = tv({
     base: "Litho-ToastNotification group/toast pointer-events-auto min-w-60 max-w-85 bg-surface-highest/95 hover:bg-surface-highest rounded-md shadow-card border border-tint-2 p-2 flex items-start gap-2 transition-all duration-300 ease-in-out",
     variants: {
         position: {
@@ -147,36 +239,7 @@ var styles = tv({
 var closeButtonStyles = tv({
     base: "Litho-ToastNotification__Close flex-none p-0.5 rounded-md cursor-pointer hover:bg-tint-2 active:bg-tint-3 transition-colors opacity-0 group-hover/toast:opacity-100"
 });
-/**
- * ToastNotification component for displaying temporary notifications to users.
- * Automatically dismisses after the specified duration.
- *
- * @component
- * @param {Object} props - The component props.
- * @param {React.ReactNode} [props.prefix] - Optional prefix content (image, icon, or component) to display before the title.
- * @param {Object|Function} [props.icon] - Optional icon source (from @shopify/polaris-icons) to display as prefix. Used as fallback if prefix is not provided.
- * @param {string} props.title - The main title text of the toast.
- * @param {string} [props.subtitle] - Optional subtitle text displayed below the title.
- * @param {number} [props.duration=3000] - Duration in milliseconds before the toast auto-dismisses. Defaults to 2000ms (2 seconds).
- * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.position='topRight'] - Position of the toast on the screen.
- * @param {Function} [props.onDismiss] - Callback function called when the toast is dismissed (either automatically or manually).
- * @param {Function} [props.onClick] - Callback function called when the toast is clicked. Makes the entire toast clickable with cursor-pointer.
- * @param {boolean} [props.dismissible=true] - Whether the toast can be manually dismissed via the close button.
- * @param {boolean} [props.fixed=true] - Whether to use fixed positioning. Set to false when used within ToastProvider.
- * @param {boolean} [props.isDismissing=false] - Whether the toast is in a dismissing state. Starts the exit animation immediately.
- * @param {string} [props.className] - Additional CSS classes to apply to the toast container.
- * @returns {JSX.Element|null} The rendered toast notification or null if dismissed.
- *
- * @example
- * <ToastNotification
- *   prefix={<Icon source={TickMinor} color="success" />}
- *   title="Support ticket updated"
- *   subtitle="Your ticket has been resolved"
- *   duration={3000}
- *   position="topRight"
- *   onDismiss={() => console.log('Toast dismissed')}
- * />
- */ function ToastNotification() {
+function ToastNotification() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var prefix = props.prefix, icon = props.icon, title = props.title, subtitle = props.subtitle, _props_duration = props.duration, duration = _props_duration === void 0 ? 3000 : _props_duration, _props_position = props.position, position = _props_position === void 0 ? "topRight" : _props_position, onDismiss = props.onDismiss, onClick = props.onClick, _props_dismissible = props.dismissible, dismissible = _props_dismissible === void 0 ? true : _props_dismissible, _props_fixed = props.fixed, fixed = _props_fixed === void 0 ? true : _props_fixed, _props_isDismissing = props.isDismissing, isDismissing = _props_isDismissing === void 0 ? false : _props_isDismissing, className = props.className;
     var _useState = _sliced_to_array(useState(!isDismissing), 2), visible = _useState[0], setVisible = _useState[1];
@@ -309,11 +372,21 @@ var closeButtonStyles = tv({
         source: icon,
         color: "subdued"
     }) : null);
-    return /*#__PURE__*/ _jsxs("div", {
+    return /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({
         className: "".concat(classes).concat(className ? " ".concat(className) : ""),
         onClick: handleToastClick,
         onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
+        onMouseLeave: handleMouseLeave
+    }, onClick ? {
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: function(e) {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick(e);
+            }
+        }
+    } : {}), {
         children: [
             prefixContent && /*#__PURE__*/ _jsx("div", {
                 className: "Litho-ToastNotification__Prefix flex-none",
@@ -348,6 +421,6 @@ var closeButtonStyles = tv({
                 })
             })
         ]
-    });
+    }));
 }
 export default ToastNotification;

package/dist/esm/components/ToastProvider.js

@@ -96,10 +96,20 @@ var ToastContext = /*#__PURE__*/ createContext(null);
     return context;
 };
 /**
- * ToastProvider component that manages multiple toast notifications.
- * Handles stacking and positioning of multiple toasts.
+ * @component ToastProvider
+ *
+ * @description A context provider that manages the toast notification queue and renders the ARIA live region for screen reader announcements.
+ *
+ * @usage
+ * - DO: Wrap your app or page to enable toast notifications via the `useToast` hook.
+ * - DON'T: Use multiple ToastProviders in the same component tree.
+ *
+ * @accessibility
+ * - ToastProvider manages the toast container's ARIA live region for screen reader announcements.
+ *
+ * @alternative
+ * - If you need persistent in-page messages, use `Banner` instead of the toast system.
  *
- * @component
  * @param {Object} props - The component props.
  * @param {React.ReactNode} props.children - Child components that can use the toast system.
  * @param {'topRight' | 'topLeft' | 'topCenter' | 'bottomRight' | 'bottomLeft' | 'bottomCenter'} [props.defaultPosition='topRight'] - Default position for toasts.

package/dist/esm/components/Tooltip.js

@@ -86,7 +86,56 @@ import Stack from "./Stack.js";
 import List from "./List.js";
 import Icon from "./Icon.js";
 import { CircleInformationMajor } from "@shopify/polaris-icons";
-var styles = tv({
+/**
+ * @component Tooltip
+ *
+ * @description A floating text label that appears on hover or focus to provide brief supplementary information about an element.
+ *
+ * @usage
+ * - DO: Provide brief, non-essential supplementary info on hover or focus.
+ * - DON'T: Put essential or interactive content in tooltips (use Popover).
+ *
+ * @accessibility
+ * - Tooltip content is announced on focus; ensure trigger element is focusable.
+ * - Do not rely on hover-only access.
+ *
+ * @alternative
+ * - If you need interactive content in a floating panel, use `Popover`.
+ * - If you need persistent help text, use `Tip`.
+ *
+ * @param {Object} props - The props for the Tooltip component.
+ * @param {React.ReactNode} props.children - The content that triggers the tooltip on hover.
+ * @param {React.ReactNode | TooltipContentObject} props.content - The content displayed inside the tooltip. Can be either a React node or a structured content object.
+ * @param {boolean} [props.dismissOnMouseOut=true] - Whether the tooltip should be dismissed when the mouse leaves the activator.
+ * @param {boolean} [props.dismissOnActivatorClick=true] - Whether the tooltip should be dismissed when clicking the activator.
+ * @param {"above" | "below"} [props.preferredPosition="below"] - The preferred position of the tooltip relative to the activator.
+ * @param {"center" | "left" | "right"} [props.alignment="center"] - The alignment of the tooltip content.
+ * @param {number} [props.hoverDelay=0] - The delay (in milliseconds) before showing the tooltip on hover.
+ * @param {boolean} [props.hasUnderline=false] - Whether the activator should have an underline.
+ * @param {number | boolean} [props.zIndexOverride] - Override for the z-index of the tooltip.
+ * @param {"inline" | "inline-block" | "block"} [props.display="inline-block"] - The display property of the tooltip container.
+ * @param {string} [props.className] - Additional class name for the tooltip container.
+ *
+ * @returns {React.ReactElement} The rendered Tooltip component.
+ *
+ * @example
+ * // Basic usage with string content
+ * <Tooltip content="This is a tooltip">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * // Using structured content object
+ * <Tooltip content={{
+ *   heading: "Important Information",
+ *   content: [
+ *     { type: "paragraph", content: "This is a paragraph." },
+ *     { type: "list", content: ["Item 1", "Item 2", "Item 3"] }
+ *   ]
+ * }}>
+ *   <span>Hover for structured content</span>
+ * </Tooltip>
+ */ var styles = tv({
     base: "Litho-TooltipContainer relative w-auto h-auto",
     variants: {
         display: {
@@ -158,45 +207,6 @@ var arrowStyles = tv({
  * @typedef {Object} TooltipContentObject
  * @property {string} [heading] - Optional heading text for the tooltip
  * @property {TooltipContentItem[]} content - Array of content items to display in the tooltip
- */ /**
- * Tooltip component for displaying contextual information when hovering over an element.
- * The tooltip can be positioned above or below the activator with customizable alignment.
- * It includes optional underline styling and supports dynamic z-index overrides.
- *
- * @component
- *
- * @param {Object} props - The props for the Tooltip component.
- * @param {React.ReactNode} props.children - The content that triggers the tooltip on hover.
- * @param {React.ReactNode | TooltipContentObject} props.content - The content displayed inside the tooltip. Can be either a React node or a structured content object.
- * @param {boolean} [props.dismissOnMouseOut=true] - Whether the tooltip should be dismissed when the mouse leaves the activator.
- * @param {boolean} [props.dismissOnActivatorClick=true] - Whether the tooltip should be dismissed when clicking the activator.
- * @param {"above" | "below"} [props.preferredPosition="below"] - The preferred position of the tooltip relative to the activator.
- * @param {"center" | "left" | "right"} [props.alignment="center"] - The alignment of the tooltip content.
- * @param {number} [props.hoverDelay=0] - The delay (in milliseconds) before showing the tooltip on hover.
- * @param {boolean} [props.hasUnderline=false] - Whether the activator should have an underline.
- * @param {number | boolean} [props.zIndexOverride] - Override for the z-index of the tooltip.
- * @param {"inline" | "inline-block" | "block"} [props.display="inline-block"] - The display property of the tooltip container.
- * @param {string} [props.className] - Additional class name for the tooltip container.
- *
- * @returns {React.ReactElement} The rendered Tooltip component.
- *
- * @example
- * // Basic usage with string content
- * <Tooltip content="This is a tooltip">
- *   <button>Hover me</button>
- * </Tooltip>
- *
- * @example
- * // Using structured content object
- * <Tooltip content={{
- *   heading: "Important Information",
- *   content: [
- *     { type: "paragraph", content: "This is a paragraph." },
- *     { type: "list", content: ["Item 1", "Item 2", "Item 3"] }
- *   ]
- * }}>
- *   <span>Hover for structured content</span>
- * </Tooltip>
  */ function Tooltip() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var _props_display = props.display, display = _props_display === void 0 ? "inline-block" : _props_display, children = props.children, content = props.content, _props_dismissOnMouseOut = props.dismissOnMouseOut, dismissOnMouseOut = _props_dismissOnMouseOut === void 0 ? true : _props_dismissOnMouseOut, _props_dismissOnActivatorClick = props.dismissOnActivatorClick, dismissOnActivatorClick = _props_dismissOnActivatorClick === void 0 ? true : _props_dismissOnActivatorClick, _props_preferredPosition = props.preferredPosition, preferredPosition = _props_preferredPosition === void 0 ? "below" : _props_preferredPosition, _props_alignment = props.alignment, alignment = _props_alignment === void 0 ? "center" : _props_alignment, _props_hoverDelay = props.hoverDelay, hoverDelay = _props_hoverDelay === void 0 ? 0 : _props_hoverDelay, _props_hasUnderline = props.hasUnderline, hasUnderline = _props_hasUnderline === void 0 ? false : _props_hasUnderline, zIndexOverride = props.zIndexOverride, className = props.className;
@@ -303,7 +313,6 @@ var arrowStyles = tv({
             }, key);
         } else if (item.type == "list") {
             return /*#__PURE__*/ _jsx(Stack, {
-                inlineAlign: "start",
                 align: "start",
                 gap: "0",
                 children: /*#__PURE__*/ _jsx(List, {