@levi-gemcommerce/analytics 3.0.1-dev.2 → 3.0.1-dev.3

package/dist/esm/shared/components/GSelector/GSelector.js

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Button, Box, BlockStack, InlineStack, Icon, ActionList } from '@shopify/polaris';
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import '../GTooltip/components/GTooltipCard.js';
+import { GCheckbox } from '../GCheckbox/GCheckbox.js';
+import '../GDiv/GDiv.js';
+import '../GFeatureLocked/constants.js';
+import '../GFeatureLocked/types.js';
+import '../GPagination/GPagination.js';
+import '../../charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import '../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.js';
+import '../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../core/gemxql/types/analytic-data.js';
+import '../../../core/gemxql/types/analytic-source.js';
+import '../../../core/gemxql/types/extra-condition.js';
+import '../../../core/gemxql/types/field-filters.js';
+import '../../../core/gemxql/types/field-operators.js';
+import '../../../core/gemxql/types/group-with-clause.js';
+import '../../../core/gemxql/types/order-by.js';
+import '../../../core/gemxql/types/page-fields.js';
+import '../../../core/gemxql/types/row-reader-mode.js';
+import '../../../core/gemxql/types/time-dimension.js';
+
+const defaultFormatActivatorContent = (text) => text.join(', ');
+const GSelector = (props) => {
+    const [popoverActive, setPopoverActive] = useState(false);
+    const { activatorText, selected, options, emptyLabel, preferredAlignment = 'right', formatActivatorContent = defaultFormatActivatorContent, } = props;
+    const togglePopoverActive = useCallback(() => setPopoverActive((prev) => !prev), []);
+    const selectedOption = useMemo(() => {
+        // `choice` variant passes selected as string[]; `action-list` as a single string.
+        const isSelected = (id) => (Array.isArray(selected) ? selected.includes(id) : id === selected);
+        return options
+            .filter((item) => item.active || isSelected(item.id))
+            .map((item) => item.content || '')
+            .filter((item) => !!item);
+    }, [options, selected]);
+    const activatorContent = useMemo(() => {
+        if (selectedOption.length) {
+            const selected = formatActivatorContent(selectedOption);
+            return activatorText ? `${activatorText}: ${selected}` : selected;
+        }
+        if (emptyLabel) {
+            return activatorText ? `${activatorText}: ${emptyLabel}` : emptyLabel;
+        }
+        return activatorText;
+    }, [selectedOption, emptyLabel, activatorText, formatActivatorContent]);
+    const renderSelectorMarkup = () => {
+        switch (props.variant) {
+            case 'choice':
+                return jsx(GSelectorChoice, { ...props, setPopoverActive: togglePopoverActive });
+            case 'action-list':
+                return jsx(GSelectorActionList, { ...props, setPopoverActive: togglePopoverActive });
+        }
+    };
+    return (jsx(Popover, { active: popoverActive, activator: jsx("div", { className: "flex items-center gap-1", children: jsx(Button, { onClick: togglePopoverActive, disclosure: popoverActive ? 'up' : 'down', children: activatorContent }) }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: renderSelectorMarkup() }));
+};
+const GSelectorChoice = ({ options, selected, onSelect, maxWidth, minWidth, clearable, setPopoverActive, }) => {
+    const { t } = useTranslation();
+    const items = useMemo(() => {
+        if (!options?.length)
+            return [];
+        return options.map((option) => ({
+            value: option.id,
+            label: option.content || '',
+            selected: false,
+        }));
+    }, [options]);
+    const handleSelection = useCallback((value) => {
+        onSelect(value);
+    }, [onSelect]);
+    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, paddingBlock: "150", children: jsxs(BlockStack, { children: [jsx(BlockStack, { gap: "0", children: jsx(GCheckbox, { multiple: true, options: items, selected: selected, onChange: handleSelection }) }), clearable && (jsx(Box, { paddingBlock: "150", paddingInline: "200", children: jsx(InlineStack, { blockAlign: "center", align: "start", children: jsx(Button, { disabled: !selected?.length, onClick: () => {
+                                handleSelection([]);
+                                setPopoverActive(false);
+                            }, variant: "plain", children: t('Clear') }) }) }))] }) }));
+};
+const GSelectorActionList = ({ options, selected, onSelect, helpText, maxWidth, minWidth, setPopoverActive, }) => {
+    const handleSelection = useCallback((value) => {
+        onSelect(value);
+        setPopoverActive(false);
+    }, [onSelect, setPopoverActive]);
+    const items = useMemo(() => {
+        if (!options?.length)
+            return [];
+        return options.map((option) => ({
+            id: option.id,
+            content: option.content,
+            helpText: option.helpText,
+            onAction: () => handleSelection(option.id),
+            active: option.active || option.id === selected,
+            suffix: (option.active || option.id === selected) && jsx(Icon, { source: CheckIcon, tone: "success" }),
+        }));
+    }, [options, selected, handleSelection]);
+    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, children: jsxs(BlockStack, { gap: "0", children: [jsx(ActionList, { actionRole: "menuitem", items: items }), helpText] }) }));
+};
+
+export { GSelector };

package/dist/esm/shared/components/GSelector/GSelector.mjs

@@ -0,0 +1,103 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Button, Box, BlockStack, InlineStack, Icon, ActionList } from '@shopify/polaris';
+import { useState, useCallback, useMemo } from 'react';
+import { CheckIcon } from '@shopify/polaris-icons';
+import { useTranslation } from 'react-i18next';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import '../GTooltip/components/GTooltipCard.mjs';
+import { GCheckbox } from '../GCheckbox/GCheckbox.mjs';
+import '../GDiv/GDiv.mjs';
+import '../GFeatureLocked/constants.mjs';
+import '../GFeatureLocked/types.mjs';
+import '../GPagination/GPagination.mjs';
+import '../../charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.mjs';
+import '../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../core/gemxql/types/analytic-data.mjs';
+import '../../../core/gemxql/types/analytic-source.mjs';
+import '../../../core/gemxql/types/extra-condition.mjs';
+import '../../../core/gemxql/types/field-filters.mjs';
+import '../../../core/gemxql/types/field-operators.mjs';
+import '../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../core/gemxql/types/order-by.mjs';
+import '../../../core/gemxql/types/page-fields.mjs';
+import '../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../core/gemxql/types/time-dimension.mjs';
+
+const defaultFormatActivatorContent = (text) => text.join(', ');
+const GSelector = (props) => {
+    const [popoverActive, setPopoverActive] = useState(false);
+    const { activatorText, selected, options, emptyLabel, preferredAlignment = 'right', formatActivatorContent = defaultFormatActivatorContent, } = props;
+    const togglePopoverActive = useCallback(() => setPopoverActive((prev) => !prev), []);
+    const selectedOption = useMemo(() => {
+        // `choice` variant passes selected as string[]; `action-list` as a single string.
+        const isSelected = (id) => (Array.isArray(selected) ? selected.includes(id) : id === selected);
+        return options
+            .filter((item) => item.active || isSelected(item.id))
+            .map((item) => item.content || '')
+            .filter((item) => !!item);
+    }, [options, selected]);
+    const activatorContent = useMemo(() => {
+        if (selectedOption.length) {
+            const selected = formatActivatorContent(selectedOption);
+            return activatorText ? `${activatorText}: ${selected}` : selected;
+        }
+        if (emptyLabel) {
+            return activatorText ? `${activatorText}: ${emptyLabel}` : emptyLabel;
+        }
+        return activatorText;
+    }, [selectedOption, emptyLabel, activatorText, formatActivatorContent]);
+    const renderSelectorMarkup = () => {
+        switch (props.variant) {
+            case 'choice':
+                return jsx(GSelectorChoice, { ...props, setPopoverActive: togglePopoverActive });
+            case 'action-list':
+                return jsx(GSelectorActionList, { ...props, setPopoverActive: togglePopoverActive });
+        }
+    };
+    return (jsx(Popover, { active: popoverActive, activator: jsx("div", { className: "flex items-center gap-1", children: jsx(Button, { onClick: togglePopoverActive, disclosure: popoverActive ? 'up' : 'down', children: activatorContent }) }), autofocusTarget: "first-node", fluidContent: true, onClose: togglePopoverActive, preferredAlignment: preferredAlignment, children: renderSelectorMarkup() }));
+};
+const GSelectorChoice = ({ options, selected, onSelect, maxWidth, minWidth, clearable, setPopoverActive, }) => {
+    const { t } = useTranslation();
+    const items = useMemo(() => {
+        if (!options?.length)
+            return [];
+        return options.map((option) => ({
+            value: option.id,
+            label: option.content || '',
+            selected: false,
+        }));
+    }, [options]);
+    const handleSelection = useCallback((value) => {
+        onSelect(value);
+    }, [onSelect]);
+    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, paddingBlock: "150", children: jsxs(BlockStack, { children: [jsx(BlockStack, { gap: "0", children: jsx(GCheckbox, { multiple: true, options: items, selected: selected, onChange: handleSelection }) }), clearable && (jsx(Box, { paddingBlock: "150", paddingInline: "200", children: jsx(InlineStack, { blockAlign: "center", align: "start", children: jsx(Button, { disabled: !selected?.length, onClick: () => {
+                                handleSelection([]);
+                                setPopoverActive(false);
+                            }, variant: "plain", children: t('Clear') }) }) }))] }) }));
+};
+const GSelectorActionList = ({ options, selected, onSelect, helpText, maxWidth, minWidth, setPopoverActive, }) => {
+    const handleSelection = useCallback((value) => {
+        onSelect(value);
+        setPopoverActive(false);
+    }, [onSelect, setPopoverActive]);
+    const items = useMemo(() => {
+        if (!options?.length)
+            return [];
+        return options.map((option) => ({
+            id: option.id,
+            content: option.content,
+            helpText: option.helpText,
+            onAction: () => handleSelection(option.id),
+            active: option.active || option.id === selected,
+            suffix: (option.active || option.id === selected) && jsx(Icon, { source: CheckIcon, tone: "success" }),
+        }));
+    }, [options, selected, handleSelection]);
+    return (jsx(Box, { maxWidth: maxWidth, minWidth: minWidth, children: jsxs(BlockStack, { gap: "0", children: [jsx(ActionList, { actionRole: "menuitem", items: items }), helpText] }) }));
+};
+
+export { GSelector };

package/dist/esm/shared/components/GSkeletonDisplayText/GSkeletonDisplayText.js

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SkeletonDisplayText } from '@shopify/polaris';
+
+const GSkeletonDisplayText = (props) => {
+    const height = props.height ?? '50px';
+    return (jsxs("div", { className: "Polaris-GSkeletonDisplayText", children: [jsx("style", { children: `.Polaris-GSkeletonDisplayText .Polaris-SkeletonDisplayText__DisplayText { height: ${height} !important; }` }), jsx(SkeletonDisplayText, { maxWidth: "100%", size: "extraLarge" })] }));
+};
+
+export { GSkeletonDisplayText };

package/dist/esm/shared/components/GSkeletonDisplayText/GSkeletonDisplayText.mjs

@@ -0,0 +1,9 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SkeletonDisplayText } from '@shopify/polaris';
+
+const GSkeletonDisplayText = (props) => {
+    const height = props.height ?? '50px';
+    return (jsxs("div", { className: "Polaris-GSkeletonDisplayText", children: [jsx("style", { children: `.Polaris-GSkeletonDisplayText .Polaris-SkeletonDisplayText__DisplayText { height: ${height} !important; }` }), jsx(SkeletonDisplayText, { maxWidth: "100%", size: "extraLarge" })] }));
+};
+
+export { GSkeletonDisplayText };

package/dist/esm/shared/components/GSpinner/GSpinner.d.ts

@@ -0,0 +1,5 @@
+import type { SpinnerProps } from '@shopify/polaris';
+export interface GSpinnerProps extends SpinnerProps {
+    tone?: 'subdued';
+}
+export declare const GSpinner: (props: GSpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/shared/components/GSpinner/GSpinner.js

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { Spinner } from '@shopify/polaris';
+import { cls } from '../../../utils/cls.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+
+const GSpinner = (props) => {
+    return (jsx("div", { className: cls('Polaris-GSpinner', props.tone ? `Polaris-GSpinner--${props.tone}` : undefined), children: jsx(Spinner, { ...props }) }));
+};
+
+export { GSpinner };

package/dist/esm/shared/components/GSpinner/GSpinner.mjs

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { Spinner } from '@shopify/polaris';
+import { cls } from '../../../utils/cls.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+
+const GSpinner = (props) => {
+    return (jsx("div", { className: cls('Polaris-GSpinner', props.tone ? `Polaris-GSpinner--${props.tone}` : undefined), children: jsx(Spinner, { ...props }) }));
+};
+
+export { GSpinner };

package/dist/esm/shared/components/GSpinner/index.d.ts

@@ -0,0 +1 @@
+export * from './GSpinner';

package/dist/esm/shared/components/GTextLink/GTextLink.js

@@ -0,0 +1,15 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Link } from '@shopify/polaris';
+import { cls } from '../../../utils/cls.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+
+const GTextLink = ({ linkAction, isDisabled, disabledFocus, children }) => {
+    if (!linkAction || isDisabled) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx("span", { className: cls('GTextLink', { 'GTextLink--disabled-focus': disabledFocus }), children: jsx(Link, { ...linkAction, children: jsx(Fragment, { children: children }) }) }));
+};
+
+export { GTextLink };

package/dist/esm/shared/components/GTextLink/GTextLink.mjs

@@ -0,0 +1,15 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Link } from '@shopify/polaris';
+import { cls } from '../../../utils/cls.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+
+const GTextLink = ({ linkAction, isDisabled, disabledFocus, children }) => {
+    if (!linkAction || isDisabled) {
+        return jsx(Fragment, { children: children });
+    }
+    return (jsx("span", { className: cls('GTextLink', { 'GTextLink--disabled-focus': disabledFocus }), children: jsx(Link, { ...linkAction, children: jsx(Fragment, { children: children }) }) }));
+};
+
+export { GTextLink };

package/dist/esm/shared/components/GTextTooltip/GTextTooltip.js

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box, Text } from '@shopify/polaris';
+import { GTooltip } from '../GTooltip/GTooltip.js';
+import '../GTooltip/components/GTooltipCard.js';
+
+const GTextTooltip = ({ tooltipProps, ...textProps }) => {
+    return (jsx(GTooltip, { ...tooltipProps, children: jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", children: jsx(Text, { ...textProps }) }) }));
+};
+
+export { GTextTooltip };

package/dist/esm/shared/components/GTextTooltip/GTextTooltip.mjs

@@ -0,0 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
+import { Box, Text } from '@shopify/polaris';
+import { GTooltip } from '../GTooltip/GTooltip.mjs';
+import '../GTooltip/components/GTooltipCard.mjs';
+
+const GTextTooltip = ({ tooltipProps, ...textProps }) => {
+    return (jsx(GTooltip, { ...tooltipProps, children: jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", children: jsx(Text, { ...textProps }) }) }));
+};
+
+export { GTextTooltip };

package/dist/esm/shared/components/GTextTruncated/GTextTruncated.js

@@ -0,0 +1,63 @@
+import { jsx } from 'react/jsx-runtime';
+import { Text, Tooltip } from '@shopify/polaris';
+import { useState, useEffect } from 'react';
+import { GTooltip } from '../GTooltip/GTooltip.js';
+import '../GTooltip/components/GTooltipCard.js';
+import { useResizeObserver } from '../../charts/components/GPolarisViz/hooks/useResizeObserver.js';
+import '../../../stores/currencyRatesStore.js';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.js';
+import '../../../core/gemxql/constants/row-reader-mode.js';
+import '../../../core/gemxql/types/analytic-data.js';
+import '../../../core/gemxql/types/analytic-source.js';
+import '../../../core/gemxql/types/extra-condition.js';
+import '../../../core/gemxql/types/field-filters.js';
+import '../../../core/gemxql/types/field-operators.js';
+import '../../../core/gemxql/types/group-with-clause.js';
+import '../../../core/gemxql/types/order-by.js';
+import '../../../core/gemxql/types/page-fields.js';
+import '../../../core/gemxql/types/row-reader-mode.js';
+import '../../../core/gemxql/types/time-dimension.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import '../GPagination/GPagination.js';
+
+const GTextTruncated = ({ children, truncate = true, tooltip, useWrapper = false, ...textProps }) => {
+    const { ref, setRef, entry } = useResizeObserver();
+    const [isTruncated, setIsTruncated] = useState(false);
+    const { content: tooltipContentProp, ...tooltipProps } = tooltip ?? {};
+    useEffect(() => {
+        const element = ref?.firstElementChild;
+        if (!element)
+            return;
+        const checkTruncation = () => {
+            setIsTruncated(element.scrollWidth > element.clientWidth);
+        };
+        checkTruncation();
+    }, [entry, children, ref]);
+    const tooltipContent = (() => {
+        const textTooltip = tooltipContentProp;
+        if (!isTruncated && !textTooltip)
+            return null;
+        if (isTruncated && textTooltip)
+            return `${children}, ${textTooltip}`;
+        return textTooltip ?? children;
+    })();
+    const textNode = (jsx(Wrapper, { useWrapper: useWrapper, children: jsx("div", { ref: setRef, children: jsx(Text, { ...textProps, truncate: truncate, children: children }) }) }));
+    // Always render Tooltip wrapper to keep DOM structure stable.
+    // Toggling between wrapped/unwrapped causes layout shifts that
+    // re-trigger ResizeObserver, creating a blink loop.
+    const hasExplicitTooltip = !!tooltipContentProp;
+    if (hasExplicitTooltip) {
+        return (jsx(GTooltip, { content: tooltipContent ?? '', isEnabled: !!tooltipContent, ...tooltipProps, children: textNode }));
+    }
+    return (jsx(Tooltip, { width: "wide", content: tooltipContent ?? children, active: isTruncated ? undefined : false, children: textNode }));
+};
+const Wrapper = ({ children, useWrapper }) => {
+    if (!useWrapper)
+        return children;
+    return jsx("div", { className: "w-full min-w-0", children: children });
+};
+
+export { GTextTruncated };

package/dist/esm/shared/components/GTextTruncated/GTextTruncated.mjs

@@ -0,0 +1,63 @@
+import { jsx } from 'react/jsx-runtime';
+import { Text, Tooltip } from '@shopify/polaris';
+import { useState, useEffect } from 'react';
+import { GTooltip } from '../GTooltip/GTooltip.mjs';
+import '../GTooltip/components/GTooltipCard.mjs';
+import { useResizeObserver } from '../../charts/components/GPolarisViz/hooks/useResizeObserver.mjs';
+import '../../../stores/currencyRatesStore.mjs';
+import '@tanstack/react-query';
+import '../../../providers/ConvertMoneyProvider.mjs';
+import '../../../core/gemxql/constants/row-reader-mode.mjs';
+import '../../../core/gemxql/types/analytic-data.mjs';
+import '../../../core/gemxql/types/analytic-source.mjs';
+import '../../../core/gemxql/types/extra-condition.mjs';
+import '../../../core/gemxql/types/field-filters.mjs';
+import '../../../core/gemxql/types/field-operators.mjs';
+import '../../../core/gemxql/types/group-with-clause.mjs';
+import '../../../core/gemxql/types/order-by.mjs';
+import '../../../core/gemxql/types/page-fields.mjs';
+import '../../../core/gemxql/types/row-reader-mode.mjs';
+import '../../../core/gemxql/types/time-dimension.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import '../GPagination/GPagination.mjs';
+
+const GTextTruncated = ({ children, truncate = true, tooltip, useWrapper = false, ...textProps }) => {
+    const { ref, setRef, entry } = useResizeObserver();
+    const [isTruncated, setIsTruncated] = useState(false);
+    const { content: tooltipContentProp, ...tooltipProps } = tooltip ?? {};
+    useEffect(() => {
+        const element = ref?.firstElementChild;
+        if (!element)
+            return;
+        const checkTruncation = () => {
+            setIsTruncated(element.scrollWidth > element.clientWidth);
+        };
+        checkTruncation();
+    }, [entry, children, ref]);
+    const tooltipContent = (() => {
+        const textTooltip = tooltipContentProp;
+        if (!isTruncated && !textTooltip)
+            return null;
+        if (isTruncated && textTooltip)
+            return `${children}, ${textTooltip}`;
+        return textTooltip ?? children;
+    })();
+    const textNode = (jsx(Wrapper, { useWrapper: useWrapper, children: jsx("div", { ref: setRef, children: jsx(Text, { ...textProps, truncate: truncate, children: children }) }) }));
+    // Always render Tooltip wrapper to keep DOM structure stable.
+    // Toggling between wrapped/unwrapped causes layout shifts that
+    // re-trigger ResizeObserver, creating a blink loop.
+    const hasExplicitTooltip = !!tooltipContentProp;
+    if (hasExplicitTooltip) {
+        return (jsx(GTooltip, { content: tooltipContent ?? '', isEnabled: !!tooltipContent, ...tooltipProps, children: textNode }));
+    }
+    return (jsx(Tooltip, { width: "wide", content: tooltipContent ?? children, active: isTruncated ? undefined : false, children: textNode }));
+};
+const Wrapper = ({ children, useWrapper }) => {
+    if (!useWrapper)
+        return children;
+    return jsx("div", { className: "w-full min-w-0", children: children });
+};
+
+export { GTextTruncated };

package/dist/esm/shared/components/GThumbnail/GThumbnail.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { cls } from '../../../utils/cls.js';
+import '../../../utils/dayjs.js';
+import '../../../utils/analytics.js';
+import '../../../types/template.js';
+import THUMB_PRODUCT_DEFAULT from '../../../assets/svg/product.svg.js';
+
+/**
+ * Helper function to generate a variation class name.
+ * @param name - Base name of the class.
+ * @param value - Variation value to append.
+ * @returns Combined class name.
+ */
+function variationName(name, value) {
+    return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
+const GThumbnail = ({ source, alt, size, grayscale, defaultSource = THUMB_PRODUCT_DEFAULT, width = '80', height = '80', classRemoved = false, }) => {
+    const sizeClass = size && variationName('Polaris-Thumbnail--size', size);
+    const filterClass = grayscale && 'Polaris-GThumbnail--filter';
+    const className = cls('Polaris-Thumbnail', sizeClass);
+    const thumbnail = (jsx("img", { onError: (e) => {
+            e.currentTarget.src = defaultSource;
+        }, alt: alt ?? 'Thumbnail', src: `${source ?? defaultSource}`, width: width, height: height, style: {
+            '--gp-grayscale-percentage': grayscale || '100%',
+        }, className: cls('Polaris-GThumbnail', filterClass) }));
+    if (classRemoved)
+        return thumbnail;
+    return jsx("span", { className: className, children: thumbnail });
+};
+
+export { GThumbnail, variationName };

package/dist/esm/shared/components/GThumbnail/GThumbnail.mjs

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { cls } from '../../../utils/cls.mjs';
+import '../../../utils/dayjs.mjs';
+import '../../../utils/analytics.mjs';
+import '../../../types/template.mjs';
+import THUMB_PRODUCT_DEFAULT from '../../../assets/svg/product.svg.mjs';
+
+/**
+ * Helper function to generate a variation class name.
+ * @param name - Base name of the class.
+ * @param value - Variation value to append.
+ * @returns Combined class name.
+ */
+function variationName(name, value) {
+    return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
+const GThumbnail = ({ source, alt, size, grayscale, defaultSource = THUMB_PRODUCT_DEFAULT, width = '80', height = '80', classRemoved = false, }) => {
+    const sizeClass = size && variationName('Polaris-Thumbnail--size', size);
+    const filterClass = grayscale && 'Polaris-GThumbnail--filter';
+    const className = cls('Polaris-Thumbnail', sizeClass);
+    const thumbnail = (jsx("img", { onError: (e) => {
+            e.currentTarget.src = defaultSource;
+        }, alt: alt ?? 'Thumbnail', src: `${source ?? defaultSource}`, width: width, height: height, style: {
+            '--gp-grayscale-percentage': grayscale || '100%',
+        }, className: cls('Polaris-GThumbnail', filterClass) }));
+    if (classRemoved)
+        return thumbnail;
+    return jsx("span", { className: className, children: thumbnail });
+};
+
+export { GThumbnail, variationName };

package/dist/esm/shared/components/GTooltip/GTooltip.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '@shopify/polaris';
+
+const GTooltip = ({ isEnabled = true, content, maxWidth, ...props }) => {
+    const hasContent = isEnabled && !!content;
+    return hasContent ? (jsx(Tooltip, { width: "wide", hoverDelay: 500, content: content, ...props, accessibilityLabel: maxWidth?.toString() })) : (props.children);
+};
+
+export { GTooltip };

package/dist/esm/shared/components/GTooltip/GTooltip.mjs

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Tooltip } from '@shopify/polaris';
+
+const GTooltip = ({ isEnabled = true, content, maxWidth, ...props }) => {
+    const hasContent = isEnabled && !!content;
+    return hasContent ? (jsx(Tooltip, { width: "wide", hoverDelay: 500, content: content, ...props, accessibilityLabel: maxWidth?.toString() })) : (props.children);
+};
+
+export { GTooltip };

package/dist/esm/shared/components/GTooltip/components/GTooltipCard.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Box, InlineStack, BlockStack, Text, List } from '@shopify/polaris';
+import { forwardRef, useState, useRef, useImperativeHandle } from 'react';
+import { cls } from '../../../../utils/cls.js';
+import '../../../../utils/dayjs.js';
+import '../../../../utils/analytics.js';
+import '../../../../types/template.js';
+
+const SIZE_CLASS = {
+    default: 'w-[210px]',
+    wide: 'w-[320px]',
+    large: 'w-[328px]',
+};
+const ALIGNMENT_MAP = {
+    start: 'flex justify-start',
+    center: 'flex justify-center',
+    end: 'flex justify-end',
+};
+const GTooltipCard = forwardRef((props, ref) => {
+    const { tooltip, wrapper = 'div', activatorProps, isHideBorder, alignment, delay = 500, textDecoration = 'none', popoverRef, preferredAlignment = 'left', showArrow = false, } = props;
+    const { width = 'default' } = tooltip ?? {};
+    const [isMouseEnter, setIsMouseEnter] = useState(false);
+    const TooltipCardWrapper = wrapper;
+    const sizeClass = SIZE_CLASS[width];
+    const timeoutRef = useRef(null);
+    const handleMouseEnter = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsMouseEnter(true);
+        }, delay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsMouseEnter(false);
+    };
+    useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
+    return (jsx(TooltipCardWrapper, { className: cls('GTooltipCard cursor-pointer ', alignment && ALIGNMENT_MAP[alignment], {
+            'GTooltipCard--text-underline': textDecoration === 'underline',
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "400", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && jsx("div", { className: "!text-bodySm rounded-md font-mono", children: tooltip.formula })] }) }) })) }) }));
+});
+GTooltipCard.displayName = 'GTooltipCard';
+
+export { GTooltipCard };

package/dist/esm/shared/components/GTooltip/components/GTooltipCard.mjs

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Popover, Box, InlineStack, BlockStack, Text, List } from '@shopify/polaris';
+import { forwardRef, useState, useRef, useImperativeHandle } from 'react';
+import { cls } from '../../../../utils/cls.mjs';
+import '../../../../utils/dayjs.mjs';
+import '../../../../utils/analytics.mjs';
+import '../../../../types/template.mjs';
+
+const SIZE_CLASS = {
+    default: 'w-[210px]',
+    wide: 'w-[320px]',
+    large: 'w-[328px]',
+};
+const ALIGNMENT_MAP = {
+    start: 'flex justify-start',
+    center: 'flex justify-center',
+    end: 'flex justify-end',
+};
+const GTooltipCard = forwardRef((props, ref) => {
+    const { tooltip, wrapper = 'div', activatorProps, isHideBorder, alignment, delay = 500, textDecoration = 'none', popoverRef, preferredAlignment = 'left', showArrow = false, } = props;
+    const { width = 'default' } = tooltip ?? {};
+    const [isMouseEnter, setIsMouseEnter] = useState(false);
+    const TooltipCardWrapper = wrapper;
+    const sizeClass = SIZE_CLASS[width];
+    const timeoutRef = useRef(null);
+    const handleMouseEnter = () => {
+        timeoutRef.current = setTimeout(() => {
+            setIsMouseEnter(true);
+        }, delay);
+    };
+    const handleMouseLeave = () => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+        setIsMouseEnter(false);
+    };
+    useImperativeHandle(ref, () => ({ onClose: handleMouseLeave }));
+    return (jsx(TooltipCardWrapper, { className: cls('GTooltipCard cursor-pointer ', alignment && ALIGNMENT_MAP[alignment], {
+            'GTooltipCard--text-underline': textDecoration === 'underline',
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx(Popover, { ref: popoverRef, activator: !isHideBorder ? (jsx(Box, { borderBlockEndWidth: "025", borderStyle: "dashed", borderColor: "border-tertiary", as: wrapper, ...activatorProps, children: props.children })) : (jsx(InlineStack, { children: props.children })), activatorWrapper: wrapper, onClose: () => { }, active: isMouseEnter, preferredPosition: "below", preferredAlignment: preferredAlignment, children: tooltip && (jsx("div", { className: cls(sizeClass, { 'GTooltipCard-arrow': showArrow }), children: jsx(Box, { padding: "400", children: jsxs(BlockStack, { gap: "200", children: [jsxs(BlockStack, { gap: "100", children: [jsx(Text, { as: "span", variant: "headingSm", fontWeight: "semibold", children: tooltip.title }), jsxs(BlockStack, { gap: "400", children: [jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: jsx("span", { dangerouslySetInnerHTML: { __html: tooltip.content } }) }), tooltip.contentList && (jsx(List, { type: "bullet", children: tooltip.contentList.map((item) => (jsx(List.Item, { children: jsx(Text, { as: "span", variant: "bodyMd", tone: "subdued", fontWeight: "medium", children: item }) }, item))) }))] })] }), tooltip.formula && jsx("div", { className: "!text-bodySm rounded-md font-mono", children: tooltip.formula })] }) }) })) }) }));
+});
+GTooltipCard.displayName = 'GTooltipCard';
+
+export { GTooltipCard };