@soppiya/app-bridge 1.0.8 → 1.0.9

package/dist/components/meta-data/ui/MetaData.stories.js

@@ -0,0 +1,136 @@
+import { jsx } from "react/jsx-runtime";
+import { Card } from "@soppiya/elementus";
+import { useState } from "react";
+import MetaData from "./MetaData.js";
+const meta = {
+    title: "Example/MetaData",
+    component: MetaData
+};
+const MetaData_stories = meta;
+const Product = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "product",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Article = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "article",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Variant = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "variant",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Blog = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "blog",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Page = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "page",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Collection = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "collection",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+export { Article, Blog, Collection, Page, Product, Variant, MetaData_stories as default };

package/dist/components/meta-data/ui/MetaDataItem.d.ts

@@ -0,0 +1,16 @@
+import { Metafield } from "../../../shared/graphql/graphql";
+import React from "react";
+interface Props {
+    metaField: Metafield;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+export interface MetaDataProps {
+    entry?: string;
+    value?: string;
+    children?: React.ReactNode;
+    onChange: (value: string) => void;
+    onDelete?: () => void;
+}
+declare const MetaDataItem: ({ metaField, value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MetaDataItem;

package/dist/components/meta-data/ui/MetaDataItem.js

@@ -0,0 +1,247 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, Button, Card, InlineStack, SoppiyaIcon, Text } from "@soppiya/elementus";
+import ArticlesPicker from "../../articles-picker/ui/ArticlesPicker.js";
+import BlogsPicker from "../../blogs-picker/ui/BlogsPicker.js";
+import CollectionPicker from "../../collections-pciker/ui/CollectionPicker.js";
+import { ProductsPicker } from "../../products-picker/index.js";
+import { VariantsPicker } from "../../variants-picker/index.js";
+import { useClickAway } from "@uidotdev/usehooks";
+import classnames from "classnames";
+import { isEmpty, isFunction, isNumber } from "lodash";
+import react, { useCallback, useState } from "react";
+import meta_types from "../model/meta.types.js";
+import ArticleRefMetaField from "./ArticleRefMetaField.js";
+import BlogRefMetaField from "./BlogRefMetaField.js";
+import BooleanMetaField from "./BooleanMetaField.js";
+import CollectionRefMetaField from "./CollectionRefMetaField.js";
+import ColorMetaField from "./ColorMetaField.js";
+import DateAndTimeMetaField from "./DateAndTimeMetaField.js";
+import DateMetaField from "./DateMetaField.js";
+import MetaDataTypePopup from "./MetaDataTypePopup.js";
+import MultilineTextMetaField from "./MultilineTextMetaField.js";
+import NumberMetaField from "./NumberMetaField.js";
+import PageRefMetaField from "./PageRefMetaField.js";
+import ProductRefMetaField from "./ProductRefMetaField.js";
+import SingleLineTextMetaField from "./SingleLineTextMetaField.js";
+import VariantRefMetaField from "./VariantRefMetaField.js";
+const MetaDataItem_MetaDataItem = ({ metaField, value = [], onChange })=>{
+    const [activeMetaField, setActiveMetaField] = useState(null);
+    const [visibleExplorer, setVisibleExplorer] = useState("");
+    const metaFieldRef = useClickAway(()=>visibleExplorer ? null : setActiveMetaField(null));
+    const isRefType = meta_types.isRefType(metaField.type);
+    let MetaFieldJSX;
+    switch(metaField.type){
+        case "date_time":
+            MetaFieldJSX = DateAndTimeMetaField;
+            break;
+        case "date":
+            MetaFieldJSX = DateMetaField;
+            break;
+        case "number":
+            MetaFieldJSX = NumberMetaField;
+            break;
+        case "multiline_text":
+            MetaFieldJSX = MultilineTextMetaField;
+            break;
+        case "single_line_text":
+            MetaFieldJSX = SingleLineTextMetaField;
+            break;
+        case "product_ref":
+            MetaFieldJSX = ProductRefMetaField;
+            break;
+        case "collection_ref":
+            MetaFieldJSX = CollectionRefMetaField;
+            break;
+        case "variant_ref":
+            MetaFieldJSX = VariantRefMetaField;
+            break;
+        case "page_ref":
+            MetaFieldJSX = PageRefMetaField;
+            break;
+        case "article_ref":
+            MetaFieldJSX = ArticleRefMetaField;
+            break;
+        case "blog_ref":
+            MetaFieldJSX = BlogRefMetaField;
+            break;
+        case "boolean":
+            MetaFieldJSX = BooleanMetaField;
+            break;
+        case "color":
+            MetaFieldJSX = ColorMetaField;
+            break;
+    }
+    const handleCheckIsMultiple = ()=>{
+        if (isRefType && "single" === metaField.entry) return !(value.length >= 1);
+        return "multiple" === metaField.entry;
+    };
+    const handleToggleMetaField = (value)=>{
+        setActiveMetaField((prev)=>prev ? null : value);
+    };
+    const handleAddMetaField = ()=>{
+        switch(metaField.type){
+            case "product_ref":
+                setVisibleExplorer("product");
+                break;
+            case "collection_ref":
+                setVisibleExplorer("collection");
+                break;
+            case "variant_ref":
+                setVisibleExplorer("variant");
+                break;
+            case "page_ref":
+                setVisibleExplorer("page");
+                break;
+            case "blog_ref":
+                setVisibleExplorer("blog");
+                break;
+            case "article_ref":
+                setVisibleExplorer("article");
+                break;
+            default:
+                isFunction(onChange) && onChange(value.concat(""));
+        }
+    };
+    const handleDeleteMetaField = (i)=>{
+        if (!isNumber(i)) return;
+        const filteredValue = value.filter((_, index)=>index !== i);
+        isFunction(onChange) && onChange(filteredValue);
+    };
+    const handleClearMetaField = ()=>{
+        isFunction(onChange) && onChange([]);
+    };
+    const handleChange = (newValue, i)=>{
+        if (i && "multiple" === metaField.entry) {
+            const mappedValue = value.map((item, index)=>index === i ? newValue : item);
+            isFunction(onChange) && onChange(mappedValue);
+        } else isFunction(onChange) && onChange([
+            newValue
+        ]);
+    };
+    const handleSelectExplorerItems = useCallback((items)=>{
+        isFunction(onChange) && onChange(items);
+        setVisibleExplorer("");
+    }, [
+        visibleExplorer,
+        onChange
+    ]);
+    return /*#__PURE__*/ jsxs(react.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(InlineStack, {
+                padding: 70,
+                className: "border-t border-t-[#ebebeb] relative",
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ jsx(InlineStack, {
+                        className: "w-[calc(100%-188px)]! md:w-[calc(100%-256px)]! lg:w-[calc(100%-352px)]!",
+                        alignItems: "center",
+                        children: /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            children: metaField.name
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(InlineStack, {
+                        className: "w-[188px]! md:w-[256px]! lg:w-[352px]! bg-[#f1f1f1] py-1.5 px-3 lg:cursor-pointer",
+                        radius: 3,
+                        justifyContent: "space-between",
+                        onClick: ()=>handleToggleMetaField(metaField.type),
+                        children: [
+                            /*#__PURE__*/ jsxs(Text, {
+                                size: "sm",
+                                weight: "regular",
+                                children: [
+                                    "[",
+                                    metaField.type,
+                                    "]"
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Text, {
+                                size: "sm",
+                                weight: "regular",
+                                children: [
+                                    value.length,
+                                    " item"
+                                ]
+                            })
+                        ]
+                    }),
+                    activeMetaField && /*#__PURE__*/ jsx(Card, {
+                        radius: 6,
+                        className: classnames('invisible absolute p-4! left-0 md:-left-5 top-0.5 md:w-[calc(100%+40px)]! z-20', {
+                            visible: activeMetaField
+                        }),
+                        ref: metaFieldRef,
+                        children: /*#__PURE__*/ jsx(MetaDataTypePopup, {
+                            name: metaField.name,
+                            type: metaField.type,
+                            isMultiple: handleCheckIsMultiple(),
+                            onAdd: handleAddMetaField,
+                            onClear: handleClearMetaField,
+                            children: MetaFieldJSX && ("multiple" !== metaField.entry || isRefType ? /*#__PURE__*/ jsx(MetaFieldJSX, {
+                                value: isRefType ? value.join(",") : value[0],
+                                onChange: (v)=>handleChange(v),
+                                children: /*#__PURE__*/ jsx(Box, {
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        color: "white",
+                                        onClick: ()=>handleDeleteMetaField(0),
+                                        children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                            icon: "minus.svg",
+                                            size: "md"
+                                        })
+                                    })
+                                })
+                            }) : (isEmpty(value) ? [
+                                ""
+                            ] : value).map((v, key)=>/*#__PURE__*/ jsx(MetaFieldJSX, {
+                                    entry: metaField.entry,
+                                    onChange: (v)=>handleChange(v, key),
+                                    children: /*#__PURE__*/ jsx(Box, {
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            color: "white",
+                                            onClick: ()=>handleDeleteMetaField(key),
+                                            children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                                icon: "minus.svg",
+                                                size: "md"
+                                            })
+                                        })
+                                    })
+                                }, key)))
+                        })
+                    })
+                ]
+            }),
+            "product" === visibleExplorer && /*#__PURE__*/ jsx(ProductsPicker, {
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                initialIds: value,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "variant" === visibleExplorer && /*#__PURE__*/ jsx(VariantsPicker, {
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                initialIds: value,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "article" === visibleExplorer && /*#__PURE__*/ jsx(ArticlesPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "collection" === visibleExplorer && /*#__PURE__*/ jsx(CollectionPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "blog" === visibleExplorer && /*#__PURE__*/ jsx(BlogsPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            })
+        ]
+    });
+};
+const MetaDataItem = MetaDataItem_MetaDataItem;
+export { MetaDataItem as default };

package/dist/components/meta-data/ui/MetaDataTypePopup.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface Props {
+    isMultiple: boolean;
+    name: string;
+    type: string;
+    children: React.ReactNode;
+    onAdd?: () => void;
+    onClear?: () => void;
+}
+declare const MetaFieldTypePopup: ({ isMultiple, name, type, children, onAdd, onClear }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MetaFieldTypePopup;

package/dist/components/meta-data/ui/MetaDataTypePopup.js

@@ -0,0 +1,62 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BlockStack, Button, InlineStack, Text } from "@soppiya/elementus";
+import react from "react";
+import meta_types from "../model/meta.types.js";
+const MetaFieldTypePopup = ({ isMultiple, name, type, children, onAdd, onClear })=>{
+    const isRefType = meta_types.isRefType(type);
+    const textCapitalize = (value)=>value.split("_").map((w)=>w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+    return /*#__PURE__*/ jsx(react.Fragment, {
+        children: /*#__PURE__*/ jsxs(InlineStack, {
+            children: [
+                /*#__PURE__*/ jsxs(BlockStack, {
+                    className: "w-[170px]!",
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            decoration: "underline",
+                            children: name
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            color: "secondary",
+                            children: textCapitalize(type)
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(BlockStack, {
+                    className: "grow",
+                    children: [
+                        isMultiple && /*#__PURE__*/ jsx(BlockStack, {
+                            children: /*#__PURE__*/ jsxs(InlineStack, {
+                                justifyContent: "space-between",
+                                className: "border-b border-b-[#ebebeb] pb-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        color: "white",
+                                        onClick: onAdd,
+                                        children: isRefType ? `Select ${type.split("_")[0]}` : "Add Item"
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "plain",
+                                        color: "blue",
+                                        onClick: onClear,
+                                        children: "Clear all"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(BlockStack, {
+                            gap: 50,
+                            padding: {
+                                top: 70
+                            },
+                            children: children
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const MetaDataTypePopup = MetaFieldTypePopup;
+export { MetaDataTypePopup as default };

package/dist/components/meta-data/ui/MultilineTextMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const MultilineTextMetaField: ({ entry, value, children, onChange }: MetaDataProps) => import("react/jsx-runtime").JSX.Element;
+export default MultilineTextMetaField;

package/dist/components/meta-data/ui/MultilineTextMetaField.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Textarea } from "@soppiya/elementus";
+const MultilineTextMetaField_MultilineTextMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx(Textarea, {
+                    value: value,
+                    onChange: (e)=>onChange(e.target.value)
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const MultilineTextMetaField = MultilineTextMetaField_MultilineTextMetaField;
+export { MultilineTextMetaField as default };

package/dist/components/meta-data/ui/NumberMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const NumberMetaField: ({ entry, value, children, onChange }: MetaDataProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberMetaField;

package/dist/components/meta-data/ui/NumberMetaField.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@soppiya/elementus";
+const NumberMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsx(Input, {
+                        size: "sm",
+                        type: "number",
+                        value: value,
+                        onChange: (e)=>onChange(e.target.value)
+                    })
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const ui_NumberMetaField = NumberMetaField;
+export { ui_NumberMetaField as default };

package/dist/components/meta-data/ui/PageRefMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const PageRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element;
+export default PageRefMetaField;

package/dist/components/meta-data/ui/PageRefMetaField.js

@@ -0,0 +1,6 @@
+import { jsx } from "react/jsx-runtime";
+const PageRefMetaField = ({ value, children })=>/*#__PURE__*/ jsx("h1", {
+        children: "Page ref"
+    });
+const ui_PageRefMetaField = PageRefMetaField;
+export { ui_PageRefMetaField as default };

package/dist/components/meta-data/ui/ProductRefMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const ProductRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | undefined;
+export default ProductRefMetaField;

package/dist/components/meta-data/ui/ProductRefMetaField.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useProducts } from "../../products-picker/model/useProducts.js";
+import { Loading } from "../../../shared/loading/index.js";
+import { Image, InlineStack, Text } from "@soppiya/elementus";
+const ProductRefMetaField = ({ value, children })=>{
+    const { products, isLoadingProducts } = useProducts({
+        skip: !value,
+        filterKeys: {
+            cursors: value?.split(",")
+        }
+    });
+    if (isLoadingProducts) return /*#__PURE__*/ jsx(Loading, {});
+    return products?.map((product)=>/*#__PURE__*/ jsxs(InlineStack, {
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ jsxs(InlineStack, {
+                    alignItems: "center",
+                    gapX: 70,
+                    children: [
+                        /*#__PURE__*/ jsx(Image, {
+                            size: "xs",
+                            url: product.image?.url ?? ""
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            weight: "regular",
+                            color: "blue",
+                            children: product.title
+                        })
+                    ]
+                }),
+                children
+            ]
+        }, product._id));
+};
+const ui_ProductRefMetaField = ProductRefMetaField;
+export { ui_ProductRefMetaField as default };

package/dist/components/meta-data/ui/SingleLineTextMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const SingleLineTextMetaField: ({ entry, value, children, onChange }: MetaDataProps) => import("react/jsx-runtime").JSX.Element;
+export default SingleLineTextMetaField;

package/dist/components/meta-data/ui/SingleLineTextMetaField.js

@@ -0,0 +1,18 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@soppiya/elementus";
+const SingleLineTextMetaField_SingleLineTextMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsx(Input, {
+                        size: "sm",
+                        value: value,
+                        onChange: (e)=>onChange(e.target.value)
+                    })
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const SingleLineTextMetaField = SingleLineTextMetaField_SingleLineTextMetaField;
+export { SingleLineTextMetaField as default };

package/dist/components/meta-data/ui/VariantRefMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const VariantRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export default VariantRefMetaField;

package/dist/components/meta-data/ui/VariantRefMetaField.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useVariants } from "../../variants-picker/model/useVariants.js";
+import { Loading } from "../../../shared/loading/index.js";
+import { Image, InlineStack, Text } from "@soppiya/elementus";
+const VariantRefMetaField_VariantRefMetaField = ({ value, children })=>{
+    const { variants, isLoadingVariants } = useVariants({
+        skip: !value,
+        filterKeys: {
+            cursors: value?.split(",")
+        }
+    });
+    if (isLoadingVariants) return /*#__PURE__*/ jsx(Loading, {});
+    return variants?.map((variant)=>/*#__PURE__*/ jsxs(InlineStack, {
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ jsxs(InlineStack, {
+                    gapX: 70,
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(Image, {
+                            size: "xs",
+                            url: variant.image?.url ?? ""
+                        }),
+                        /*#__PURE__*/ jsxs(Text, {
+                            size: "md",
+                            weight: "regular",
+                            color: "blue",
+                            children: [
+                                variant.product?.title,
+                                " ",
+                                [
+                                    variant.option1,
+                                    variant.option2,
+                                    variant.option3
+                                ].filter(Boolean).join(", ")
+                            ]
+                        })
+                    ]
+                }),
+                children
+            ]
+        }, variant._id));
+};
+const VariantRefMetaField = VariantRefMetaField_VariantRefMetaField;
+export { VariantRefMetaField as default };

package/dist/components/products-picker/api/query.d.ts

@@ -0,0 +1,8 @@
+export declare const productsQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").ProductsQuery, import("../../../shared/graphql/graphql").Exact<{
+    after?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    before?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    last?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").ProductFilterKeys>;
+}>>;