@shopify/shop-minis-react 0.0.20 → 0.0.21

package/dist/hooks/storage/useImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\nimport {UploadTarget} from '../../types'\n\nexport interface UploadImageParams {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The URI of the image to upload.\n   */\n  uri: string\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image attached to the current user.\n   */\n  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams,\n  target: UploadTarget\n) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}) => {\n    formData.append(name, value)\n  })\n  // Append the actual file data last\n  formData.append('file', new Blob([image.uri], {type: image.mimeType}))\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (params: UploadImageParams[]) => {\n      if (params.length > 1) {\n        throw new Error('Multiple image upload is not supported yet')\n      }\n\n      const links = await createImageUploadLink({\n        input: params.map(image => ({\n          mimeType: image.mimeType,\n          fileSize: image.fileSize,\n        })),\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      // TODO: Upload multiple files to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        params[0],\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        // TODO: Add support for multiple files\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["uploadFileToGCS","image","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","links","uploadError","count","result","resolve"],"mappings":";;AA0CA,MAAMA,IAAkB,OACtBC,GACAC,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAAW;AAClC,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEDF,EAAS,OAAO,QAAQ,IAAI,KAAK,CAACF,EAAM,GAAG,GAAG,EAAC,MAAMA,EAAM,SAAS,CAAA,CAAC;AAErE,QAAMK,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA8D7D,SAAA;AAAA,IACL,aA7DkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAOI,EAAO,IAAI,CAAUX,OAAA;AAAA,YAC1B,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,UAAA,EAChB;AAAA,QAAA,CACH;AAEG,YAAA,CAACY,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAKrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMd;AAAA,UACjCY,EAAO,CAAC;AAAA,UACRC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAItC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}
+{"version":3,"file":"useImageUpload.js","sources":["../../../src/hooks/storage/useImageUpload.ts"],"sourcesContent":["import {useCallback} from 'react'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\nimport type {UploadTarget} from '@shopify/shop-minis-platform/actions'\n\nexport interface UploadImageParams {\n  /**\n   * The MIME type of the image.\n   */\n  mimeType: string\n  /**\n   * The size of the image in bytes.\n   */\n  fileSize: number\n  /**\n   * The URI of the image to upload.\n   */\n  uri: string\n}\n\nexport interface UploadedImage {\n  /**\n   * The ID of the uploaded image.\n   */\n  id: string\n  /**\n   * The URL of the uploaded image.\n   */\n  imageUrl?: string\n  /**\n   * The resource URL of the uploaded image.\n   */\n  resourceUrl?: string\n}\n\ninterface UseImageUploadReturns {\n  /**\n   * Upload an image attached to the current user.\n   */\n  uploadImage: (params: UploadImageParams[]) => Promise<UploadedImage[]>\n}\n\nconst uploadFileToGCS = async (\n  image: UploadImageParams,\n  target: UploadTarget\n) => {\n  const formData = new FormData()\n  target.parameters.forEach(({name, value}: {name: string; value: string}) => {\n    formData.append(name, value)\n  })\n  // Append the actual file data last\n  formData.append('file', new Blob([image.uri], {type: image.mimeType}))\n\n  const uploadResponse = await fetch(target.url, {\n    method: 'POST',\n    body: formData,\n  })\n\n  if (!uploadResponse.ok) {\n    console.error('Failed to upload image', {\n      response: await uploadResponse.text(),\n    })\n    return {error: 'Failed to upload image'}\n  }\n\n  return {}\n}\n\nexport const useImageUpload = (): UseImageUploadReturns => {\n  const {createImageUploadLink, completeImageUpload} = useShopActions()\n\n  const uploadImage = useCallback(\n    async (params: UploadImageParams[]) => {\n      if (params.length > 1) {\n        throw new Error('Multiple image upload is not supported yet')\n      }\n\n      const links = await createImageUploadLink({\n        input: params.map(image => ({\n          mimeType: image.mimeType,\n          fileSize: image.fileSize,\n        })),\n      })\n\n      if (!links.ok) {\n        throw new Error(links.error.message)\n      }\n\n      // Upload single file to GCS\n      // TODO: Upload multiple files to GCS\n      const {error: uploadError} = await uploadFileToGCS(\n        params[0],\n        links?.data?.targets?.[0]!\n      )\n\n      if (uploadError) {\n        throw new Error(uploadError)\n      }\n\n      // 10 second polling for image upload\n      let count = 0\n      while (count < 30) {\n        const result = await completeImageUpload({\n          resourceUrls:\n            links?.data?.targets?.map(target => target.resourceUrl) || [],\n        })\n\n        if (!result.ok) {\n          throw new Error(result.error.message)\n        }\n\n        // TODO: Add support for multiple files\n        if (result.data?.files?.[0]?.fileStatus === 'READY') {\n          return [\n            {\n              id: result.data.files[0].id,\n              imageUrl: result.data.files[0].image?.url,\n              resourceUrl: links?.data?.targets?.[0]?.resourceUrl,\n            },\n          ]\n        }\n\n        await new Promise(resolve => setTimeout(resolve, 1000))\n        count++\n      }\n\n      throw new Error('Image upload completion timed out')\n    },\n    [createImageUploadLink, completeImageUpload]\n  )\n\n  return {\n    uploadImage,\n  }\n}\n"],"names":["uploadFileToGCS","image","target","formData","name","value","uploadResponse","useImageUpload","createImageUploadLink","completeImageUpload","useShopActions","useCallback","params","links","uploadError","count","result","resolve"],"mappings":";;AA2CA,MAAMA,IAAkB,OACtBC,GACAC,MACG;AACG,QAAAC,IAAW,IAAI,SAAS;AAC9B,EAAAD,EAAO,WAAW,QAAQ,CAAC,EAAC,MAAAE,GAAM,OAAAC,QAA0C;AACjE,IAAAF,EAAA,OAAOC,GAAMC,CAAK;AAAA,EAAA,CAC5B,GAEDF,EAAS,OAAO,QAAQ,IAAI,KAAK,CAACF,EAAM,GAAG,GAAG,EAAC,MAAMA,EAAM,SAAS,CAAA,CAAC;AAErE,QAAMK,IAAiB,MAAM,MAAMJ,EAAO,KAAK;AAAA,IAC7C,QAAQ;AAAA,IACR,MAAMC;AAAA,EAAA,CACP;AAEG,SAACG,EAAe,KAOb,CAAC,KANN,QAAQ,MAAM,0BAA0B;AAAA,IACtC,UAAU,MAAMA,EAAe,KAAK;AAAA,EAAA,CACrC,GACM,EAAC,OAAO,yBAAwB;AAI3C,GAEaC,IAAiB,MAA6B;AACzD,QAAM,EAAC,uBAAAC,GAAuB,qBAAAC,EAAmB,IAAIC,EAAe;AA8D7D,SAAA;AAAA,IACL,aA7DkBC;AAAA,MAClB,OAAOC,MAAgC;AACjC,YAAAA,EAAO,SAAS;AACZ,gBAAA,IAAI,MAAM,4CAA4C;AAGxD,cAAAC,IAAQ,MAAML,EAAsB;AAAA,UACxC,OAAOI,EAAO,IAAI,CAAUX,OAAA;AAAA,YAC1B,UAAUA,EAAM;AAAA,YAChB,UAAUA,EAAM;AAAA,UAAA,EAChB;AAAA,QAAA,CACH;AAEG,YAAA,CAACY,EAAM;AACT,gBAAM,IAAI,MAAMA,EAAM,MAAM,OAAO;AAKrC,cAAM,EAAC,OAAOC,EAAW,IAAI,MAAMd;AAAA,UACjCY,EAAO,CAAC;AAAA,UACRC,GAAO,MAAM,UAAU,CAAC;AAAA,QAC1B;AAEA,YAAIC;AACI,gBAAA,IAAI,MAAMA,CAAW;AAI7B,YAAIC,IAAQ;AACZ,eAAOA,IAAQ,MAAI;AACX,gBAAAC,IAAS,MAAMP,EAAoB;AAAA,YACvC,cACEI,GAAO,MAAM,SAAS,IAAI,CAAUX,MAAAA,EAAO,WAAW,KAAK,CAAA;AAAA,UAAC,CAC/D;AAEG,cAAA,CAACc,EAAO;AACV,kBAAM,IAAI,MAAMA,EAAO,MAAM,OAAO;AAItC,cAAIA,EAAO,MAAM,QAAQ,CAAC,GAAG,eAAe;AACnC,mBAAA;AAAA,cACL;AAAA,gBACE,IAAIA,EAAO,KAAK,MAAM,CAAC,EAAE;AAAA,gBACzB,UAAUA,EAAO,KAAK,MAAM,CAAC,EAAE,OAAO;AAAA,gBACtC,aAAaH,GAAO,MAAM,UAAU,CAAC,GAAG;AAAA,cAAA;AAAA,YAE5C;AAGF,gBAAM,IAAI,QAAQ,CAAAI,MAAW,WAAWA,GAAS,GAAI,CAAC,GACtDF;AAAA,QAAA;AAGI,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAAA,MACA,CAACP,GAAuBC,CAAmB;AAAA,IAC7C;AAAA,EAIA;AACF;"}

package/dist/hooks/util/useErrorScreen.js.map

@@ -1 +1 @@
-{"version":3,"file":"useErrorScreen.js","sources":["../../../src/hooks/util/useErrorScreen.ts"],"sourcesContent":["import {useShopActions} from '../../internal/useShopActions'\nimport {ShopActions} from '../../types'\n\ninterface UseErrorScreenReturns {\n  /**\n   * Show an error screen with the given error message.\n   */\n  showErrorScreen: ShopActions['showErrorScreen']\n}\n\nexport const useErrorScreen = (): UseErrorScreenReturns => {\n  const {showErrorScreen} = useShopActions()\n\n  return {showErrorScreen}\n}\n"],"names":["useErrorScreen","showErrorScreen","useShopActions"],"mappings":";AAUO,MAAMA,IAAiB,MAA6B;AACnD,QAAA,EAAC,iBAAAC,EAAe,IAAIC,EAAe;AAEzC,SAAO,EAAC,iBAAAD,EAAe;AACzB;"}
+{"version":3,"file":"useErrorScreen.js","sources":["../../../src/hooks/util/useErrorScreen.ts"],"sourcesContent":["import {ShopActions} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseErrorScreenReturns {\n  /**\n   * Show an error screen with the given error message.\n   */\n  showErrorScreen: ShopActions['showErrorScreen']\n}\n\nexport const useErrorScreen = (): UseErrorScreenReturns => {\n  const {showErrorScreen} = useShopActions()\n\n  return {showErrorScreen}\n}\n"],"names":["useErrorScreen","showErrorScreen","useShopActions"],"mappings":";AAWO,MAAMA,IAAiB,MAA6B;AACnD,QAAA,EAAC,iBAAAC,EAAe,IAAIC,EAAe;AAEzC,SAAO,EAAC,iBAAAD,EAAe;AACzB;"}

package/dist/hooks/util/useErrorToast.js.map

@@ -1 +1 @@
-{"version":3,"file":"useErrorToast.js","sources":["../../../src/hooks/util/useErrorToast.ts"],"sourcesContent":["import {useShopActions} from '../../internal/useShopActions'\nimport {ShopActions} from '../../types'\n\ninterface UseErrorToastReturns {\n  /**\n   * Show an error toast with the given error message.\n   */\n  showErrorToast: ShopActions['showErrorToast']\n}\n\nexport const useErrorToast = (): UseErrorToastReturns => {\n  const {showErrorToast} = useShopActions()\n\n  return {showErrorToast}\n}\n"],"names":["useErrorToast","showErrorToast","useShopActions"],"mappings":";AAUO,MAAMA,IAAgB,MAA4B;AACjD,QAAA,EAAC,gBAAAC,EAAc,IAAIC,EAAe;AAExC,SAAO,EAAC,gBAAAD,EAAc;AACxB;"}
+{"version":3,"file":"useErrorToast.js","sources":["../../../src/hooks/util/useErrorToast.ts"],"sourcesContent":["import {ShopActions} from '@shopify/shop-minis-platform/actions'\n\nimport {useShopActions} from '../../internal/useShopActions'\n\ninterface UseErrorToastReturns {\n  /**\n   * Show an error toast with the given error message.\n   */\n  showErrorToast: ShopActions['showErrorToast']\n}\n\nexport const useErrorToast = (): UseErrorToastReturns => {\n  const {showErrorToast} = useShopActions()\n\n  return {showErrorToast}\n}\n"],"names":["useErrorToast","showErrorToast","useShopActions"],"mappings":";AAWO,MAAMA,IAAgB,MAA4B;AACjD,QAAA,EAAC,gBAAAC,EAAc,IAAIC,EAAe;AAExC,SAAO,EAAC,gBAAAD,EAAc;AACxB;"}

package/dist/index.js

@@ -4,7 +4,7 @@ import { ProductCard as p } from "./components/commerce/product-card.js";
 import { ProductLink as m } from "./components/commerce/product-link.js";
 import { MerchantCard as u, MerchantCardPrimitive as x } from "./components/commerce/merchant-card.js";
 import { ProductCardSkeleton as c } from "./components/commerce/product-card-skeleton.js";
-import { MerchantCardSkeleton as S } from "./components/commerce/merchant-card-skeleton.js";
+import { MerchantCardSkeleton as g } from "./components/commerce/merchant-card-skeleton.js";
 import { TransitionContainer as D } from "./components/navigation/transition-container.js";
 import { TransitionLink as C } from "./components/navigation/transition-link.js";
 import { Button as T } from "./components/atoms/button.js";
@@ -12,65 +12,66 @@ import { FavoriteButton as I } from "./components/atoms/favorite-button.js";
 import { IconButton as v } from "./components/atoms/icon-button.js";
 import { ThumbhashImage as k } from "./components/atoms/thumbhash-image.js";
 import { Touchable as F } from "./components/atoms/touchable.js";
-import { AlertDialogAtom as M } from "./components/atoms/alert-dialog.js";
-import { List as B } from "./components/atoms/list.js";
+import { AlertDialogAtom as B } from "./components/atoms/alert-dialog.js";
+import { List as N } from "./components/atoms/list.js";
 import { Accordion as y, AccordionContent as G, AccordionItem as H, AccordionTrigger as O } from "./components/ui/accordion.js";
 import { Alert as V, AlertDescription as _, AlertTitle as z } from "./components/ui/alert.js";
 import { AlertDialog as W, AlertDialogAction as j, AlertDialogCancel as q, AlertDialogContent as J, AlertDialogDescription as K, AlertDialogFooter as Q, AlertDialogHeader as X, AlertDialogOverlay as Z, AlertDialogPortal as $, AlertDialogTitle as rr, AlertDialogTrigger as er } from "./components/ui/alert-dialog.js";
 import { Avatar as tr, AvatarFallback as ar, AvatarImage as ir } from "./components/ui/avatar.js";
-import { Card as pr, CardAction as sr, CardContent as mr, CardDescription as nr, CardFooter as ur, CardHeader as xr, CardTitle as fr } from "./components/ui/card.js";
-import { Carousel as dr, CarouselContent as Sr, CarouselItem as gr, CarouselNext as Dr, CarouselPrevious as Ar } from "./components/ui/carousel.js";
-import { Checkbox as Pr } from "./components/ui/checkbox.js";
-import { Dialog as hr, DialogClose as Ir, DialogContent as wr, DialogDescription as vr, DialogFooter as br, DialogHeader as kr, DialogOverlay as Er, DialogPortal as Fr, DialogTitle as Rr, DialogTrigger as Mr } from "./components/ui/dialog.js";
-import { Drawer as Br, DrawerClose as Lr, DrawerContent as yr, DrawerDescription as Gr, DrawerFooter as Hr, DrawerHeader as Or, DrawerOverlay as Ur, DrawerPortal as Vr, DrawerTitle as _r, DrawerTrigger as zr } from "./components/ui/drawer.js";
-import { Input as Wr } from "./components/ui/input.js";
-import { Label as qr } from "./components/ui/label.js";
-import { Progress as Kr } from "./components/ui/progress.js";
-import { RadioGroup as Xr, RadioGroupItem as Zr } from "./components/ui/radio-group.js";
-import { ResizableHandle as re, ResizablePanel as ee, ResizablePanelGroup as oe } from "./components/ui/resizable.js";
-import { ScrollArea as ae, ScrollBar as ie } from "./components/ui/scroll-area.js";
-import { Select as pe, SelectContent as se, SelectGroup as me, SelectItem as ne, SelectLabel as ue, SelectScrollDownButton as xe, SelectScrollUpButton as fe, SelectSeparator as ce, SelectTrigger as de, SelectValue as Se } from "./components/ui/select.js";
-import { Separator as De } from "./components/ui/separator.js";
-import { Sheet as Ce, SheetClose as Pe, SheetContent as Te, SheetDescription as he, SheetFooter as Ie, SheetHeader as we, SheetTitle as ve, SheetTrigger as be } from "./components/ui/sheet.js";
-import { Toaster as Ee } from "./components/ui/sonner.js";
-import { Skeleton as Re } from "./components/ui/skeleton.js";
-import { useRecentProducts as Ne } from "./hooks/user/useRecentProducts.js";
-import { useRecentShops as Le } from "./hooks/user/useRecentShops.js";
-import { useSavedProducts as Ge } from "./hooks/user/useSavedProducts.js";
-import { useSavedProductsActions as Oe } from "./hooks/user/useSavedProductsActions.js";
-import { useFollowedShops as Ve } from "./hooks/user/useFollowedShops.js";
-import { useFollowedShopsActions as ze } from "./hooks/user/useFollowedShopsActions.js";
-import { useCurrentUser as We } from "./hooks/user/useCurrentUser.js";
-import { useOrders as qe } from "./hooks/user/useOrders.js";
-import { useBuyerAttributes as Ke } from "./hooks/user/useBuyerAttributes.js";
-import { useProductListActions as Xe } from "./hooks/product/useProductListActions.js";
-import { useProductLists as $e } from "./hooks/product/useProductLists.js";
-import { useProductList as eo } from "./hooks/product/useProductList.js";
-import { useProduct as to } from "./hooks/product/useProduct.js";
-import { useProducts as io } from "./hooks/product/useProducts.js";
-import { useProductVariants as po } from "./hooks/product/useProductVariants.js";
-import { useProductMedia as mo } from "./hooks/product/useProductMedia.js";
-import { useProductSearch as uo } from "./hooks/product/useProductSearch.js";
-import { useRecommendedProducts as fo } from "./hooks/product/useRecommendedProducts.js";
-import { usePopularProducts as So } from "./hooks/product/usePopularProducts.js";
-import { useCuratedProducts as Do } from "./hooks/product/useCuratedProducts.js";
-import { useAsyncStorage as Co } from "./hooks/storage/useAsyncStorage.js";
-import { useSecureStorage as To } from "./hooks/storage/useSecureStorage.js";
-import { useImageUpload as Io } from "./hooks/storage/useImageUpload.js";
-import { useShopNavigation as vo } from "./hooks/navigation/useShopNavigation.js";
-import { useCloseMini as ko } from "./hooks/navigation/useCloseMini.js";
-import { useDeeplink as Fo } from "./hooks/navigation/useDeeplink.js";
-import { useNavigateWithTransition as Mo } from "./hooks/navigation/useNavigateWithTransition.js";
-import { useShop as Bo } from "./hooks/shop/useShop.js";
-import { useShopCartActions as yo } from "./hooks/shop/useShopCartActions.js";
-import { useRecommendedShops as Ho } from "./hooks/shop/useRecommendedShops.js";
-import { useErrorToast as Uo } from "./hooks/util/useErrorToast.js";
-import { useErrorScreen as _o } from "./hooks/util/useErrorScreen.js";
-import { useShare as Yo } from "./hooks/util/useShare.js";
-import { useImagePicker as jo } from "./hooks/util/useImagePicker.js";
-import { MiniEntityNotFoundError as Jo, MiniError as Ko, MiniNetworkError as Qo, formatError as Xo } from "./utils/errors.js";
-import { parseUrl as $o } from "./utils/parseUrl.js";
-import { Consent as et, ConsentStatus as ot } from "./shop-minis-platform/src/types/permissions.js";
+import { Badge as pr, badgeVariants as sr } from "./components/ui/badge.js";
+import { Card as nr, CardAction as ur, CardContent as xr, CardDescription as fr, CardFooter as cr, CardHeader as dr, CardTitle as gr } from "./components/ui/card.js";
+import { Carousel as Dr, CarouselContent as Ar, CarouselItem as Cr, CarouselNext as Pr, CarouselPrevious as Tr } from "./components/ui/carousel.js";
+import { Checkbox as Ir } from "./components/ui/checkbox.js";
+import { Dialog as vr, DialogClose as br, DialogContent as kr, DialogDescription as Er, DialogFooter as Fr, DialogHeader as Rr, DialogOverlay as Br, DialogPortal as Mr, DialogTitle as Nr, DialogTrigger as Lr } from "./components/ui/dialog.js";
+import { Drawer as Gr, DrawerClose as Hr, DrawerContent as Or, DrawerDescription as Ur, DrawerFooter as Vr, DrawerHeader as _r, DrawerOverlay as zr, DrawerPortal as Yr, DrawerTitle as Wr, DrawerTrigger as jr } from "./components/ui/drawer.js";
+import { Input as Jr } from "./components/ui/input.js";
+import { Label as Qr } from "./components/ui/label.js";
+import { Progress as Zr } from "./components/ui/progress.js";
+import { RadioGroup as re, RadioGroupItem as ee } from "./components/ui/radio-group.js";
+import { ResizableHandle as te, ResizablePanel as ae, ResizablePanelGroup as ie } from "./components/ui/resizable.js";
+import { ScrollArea as pe, ScrollBar as se } from "./components/ui/scroll-area.js";
+import { Select as ne, SelectContent as ue, SelectGroup as xe, SelectItem as fe, SelectLabel as ce, SelectScrollDownButton as de, SelectScrollUpButton as ge, SelectSeparator as Se, SelectTrigger as De, SelectValue as Ae } from "./components/ui/select.js";
+import { Separator as Pe } from "./components/ui/separator.js";
+import { Sheet as he, SheetClose as Ie, SheetContent as we, SheetDescription as ve, SheetFooter as be, SheetHeader as ke, SheetTitle as Ee, SheetTrigger as Fe } from "./components/ui/sheet.js";
+import { Toaster as Be } from "./components/ui/sonner.js";
+import { Skeleton as Ne } from "./components/ui/skeleton.js";
+import { useRecentProducts as ye } from "./hooks/user/useRecentProducts.js";
+import { useRecentShops as He } from "./hooks/user/useRecentShops.js";
+import { useSavedProducts as Ue } from "./hooks/user/useSavedProducts.js";
+import { useSavedProductsActions as _e } from "./hooks/user/useSavedProductsActions.js";
+import { useFollowedShops as Ye } from "./hooks/user/useFollowedShops.js";
+import { useFollowedShopsActions as je } from "./hooks/user/useFollowedShopsActions.js";
+import { useCurrentUser as Je } from "./hooks/user/useCurrentUser.js";
+import { useOrders as Qe } from "./hooks/user/useOrders.js";
+import { useBuyerAttributes as Ze } from "./hooks/user/useBuyerAttributes.js";
+import { useProductListActions as ro } from "./hooks/product/useProductListActions.js";
+import { useProductLists as oo } from "./hooks/product/useProductLists.js";
+import { useProductList as ao } from "./hooks/product/useProductList.js";
+import { useProduct as lo } from "./hooks/product/useProduct.js";
+import { useProducts as so } from "./hooks/product/useProducts.js";
+import { useProductVariants as no } from "./hooks/product/useProductVariants.js";
+import { useProductMedia as xo } from "./hooks/product/useProductMedia.js";
+import { useProductSearch as co } from "./hooks/product/useProductSearch.js";
+import { useRecommendedProducts as So } from "./hooks/product/useRecommendedProducts.js";
+import { usePopularProducts as Ao } from "./hooks/product/usePopularProducts.js";
+import { useCuratedProducts as Po } from "./hooks/product/useCuratedProducts.js";
+import { useAsyncStorage as ho } from "./hooks/storage/useAsyncStorage.js";
+import { useSecureStorage as wo } from "./hooks/storage/useSecureStorage.js";
+import { useImageUpload as bo } from "./hooks/storage/useImageUpload.js";
+import { useShopNavigation as Eo } from "./hooks/navigation/useShopNavigation.js";
+import { useCloseMini as Ro } from "./hooks/navigation/useCloseMini.js";
+import { useDeeplink as Mo } from "./hooks/navigation/useDeeplink.js";
+import { useNavigateWithTransition as Lo } from "./hooks/navigation/useNavigateWithTransition.js";
+import { useShop as Go } from "./hooks/shop/useShop.js";
+import { useShopCartActions as Oo } from "./hooks/shop/useShopCartActions.js";
+import { useRecommendedShops as Vo } from "./hooks/shop/useRecommendedShops.js";
+import { useErrorToast as zo } from "./hooks/util/useErrorToast.js";
+import { useErrorScreen as Wo } from "./hooks/util/useErrorScreen.js";
+import { useShare as qo } from "./hooks/util/useShare.js";
+import { useImagePicker as Ko } from "./hooks/util/useImagePicker.js";
+import { MiniEntityNotFoundError as Xo, MiniError as Zo, MiniNetworkError as $o, formatError as rt } from "./utils/errors.js";
+import { parseUrl as ot } from "./utils/parseUrl.js";
+import { Consent as at, ConsentStatus as it } from "./shop-minis-platform/src/types/permissions.js";
 export {
   y as Accordion,
   G as AccordionContent,
@@ -80,7 +81,7 @@ export {
   _ as AlertDescription,
   W as AlertDialog,
   j as AlertDialogAction,
-  M as AlertDialogAtom,
+  B as AlertDialogAtom,
   q as AlertDialogCancel,
   J as AlertDialogContent,
   K as AlertDialogDescription,
@@ -94,127 +95,129 @@ export {
   tr as Avatar,
   ar as AvatarFallback,
   ir as AvatarImage,
+  pr as Badge,
   T as Button,
-  pr as Card,
-  sr as CardAction,
-  mr as CardContent,
-  nr as CardDescription,
-  ur as CardFooter,
-  xr as CardHeader,
-  fr as CardTitle,
-  dr as Carousel,
-  Sr as CarouselContent,
-  gr as CarouselItem,
-  Dr as CarouselNext,
-  Ar as CarouselPrevious,
-  Pr as Checkbox,
-  et as Consent,
-  ot as ConsentStatus,
+  nr as Card,
+  ur as CardAction,
+  xr as CardContent,
+  fr as CardDescription,
+  cr as CardFooter,
+  dr as CardHeader,
+  gr as CardTitle,
+  Dr as Carousel,
+  Ar as CarouselContent,
+  Cr as CarouselItem,
+  Pr as CarouselNext,
+  Tr as CarouselPrevious,
+  Ir as Checkbox,
+  at as Consent,
+  it as ConsentStatus,
   o as DATA_NAVIGATION_TYPE_ATTRIBUTE,
-  hr as Dialog,
-  Ir as DialogClose,
-  wr as DialogContent,
-  vr as DialogDescription,
-  br as DialogFooter,
-  kr as DialogHeader,
-  Er as DialogOverlay,
-  Fr as DialogPortal,
-  Rr as DialogTitle,
-  Mr as DialogTrigger,
-  Br as Drawer,
-  Lr as DrawerClose,
-  yr as DrawerContent,
-  Gr as DrawerDescription,
-  Hr as DrawerFooter,
-  Or as DrawerHeader,
-  Ur as DrawerOverlay,
-  Vr as DrawerPortal,
-  _r as DrawerTitle,
-  zr as DrawerTrigger,
+  vr as Dialog,
+  br as DialogClose,
+  kr as DialogContent,
+  Er as DialogDescription,
+  Fr as DialogFooter,
+  Rr as DialogHeader,
+  Br as DialogOverlay,
+  Mr as DialogPortal,
+  Nr as DialogTitle,
+  Lr as DialogTrigger,
+  Gr as Drawer,
+  Hr as DrawerClose,
+  Or as DrawerContent,
+  Ur as DrawerDescription,
+  Vr as DrawerFooter,
+  _r as DrawerHeader,
+  zr as DrawerOverlay,
+  Yr as DrawerPortal,
+  Wr as DrawerTitle,
+  jr as DrawerTrigger,
   I as FavoriteButton,
   v as IconButton,
-  Wr as Input,
-  qr as Label,
-  B as List,
+  Jr as Input,
+  Qr as Label,
+  N as List,
   u as MerchantCard,
   x as MerchantCardPrimitive,
-  S as MerchantCardSkeleton,
-  Jo as MiniEntityNotFoundError,
-  Ko as MiniError,
-  Qo as MiniNetworkError,
+  g as MerchantCardSkeleton,
+  Xo as MiniEntityNotFoundError,
+  Zo as MiniError,
+  $o as MiniNetworkError,
   i as MinisContainer,
   t as NAVIGATION_TYPES,
   p as ProductCard,
   c as ProductCardSkeleton,
   m as ProductLink,
-  Kr as Progress,
-  Xr as RadioGroup,
-  Zr as RadioGroupItem,
-  re as ResizableHandle,
-  ee as ResizablePanel,
-  oe as ResizablePanelGroup,
-  ae as ScrollArea,
-  ie as ScrollBar,
-  pe as Select,
-  se as SelectContent,
-  me as SelectGroup,
-  ne as SelectItem,
-  ue as SelectLabel,
-  xe as SelectScrollDownButton,
-  fe as SelectScrollUpButton,
-  ce as SelectSeparator,
-  de as SelectTrigger,
-  Se as SelectValue,
-  De as Separator,
-  Ce as Sheet,
-  Pe as SheetClose,
-  Te as SheetContent,
-  he as SheetDescription,
-  Ie as SheetFooter,
-  we as SheetHeader,
-  ve as SheetTitle,
-  be as SheetTrigger,
-  Re as Skeleton,
+  Zr as Progress,
+  re as RadioGroup,
+  ee as RadioGroupItem,
+  te as ResizableHandle,
+  ae as ResizablePanel,
+  ie as ResizablePanelGroup,
+  pe as ScrollArea,
+  se as ScrollBar,
+  ne as Select,
+  ue as SelectContent,
+  xe as SelectGroup,
+  fe as SelectItem,
+  ce as SelectLabel,
+  de as SelectScrollDownButton,
+  ge as SelectScrollUpButton,
+  Se as SelectSeparator,
+  De as SelectTrigger,
+  Ae as SelectValue,
+  Pe as Separator,
+  he as Sheet,
+  Ie as SheetClose,
+  we as SheetContent,
+  ve as SheetDescription,
+  be as SheetFooter,
+  ke as SheetHeader,
+  Ee as SheetTitle,
+  Fe as SheetTrigger,
+  Ne as Skeleton,
   k as ThumbhashImage,
-  Ee as Toaster,
+  Be as Toaster,
   F as Touchable,
   D as TransitionContainer,
   C as TransitionLink,
-  Xo as formatError,
-  $o as parseUrl,
-  Co as useAsyncStorage,
-  Ke as useBuyerAttributes,
-  ko as useCloseMini,
-  Do as useCuratedProducts,
-  We as useCurrentUser,
-  Fo as useDeeplink,
-  _o as useErrorScreen,
-  Uo as useErrorToast,
-  Ve as useFollowedShops,
-  ze as useFollowedShopsActions,
-  jo as useImagePicker,
-  Io as useImageUpload,
-  Mo as useNavigateWithTransition,
-  qe as useOrders,
-  So as usePopularProducts,
-  to as useProduct,
-  eo as useProductList,
-  Xe as useProductListActions,
-  $e as useProductLists,
-  mo as useProductMedia,
-  uo as useProductSearch,
-  po as useProductVariants,
-  io as useProducts,
-  Ne as useRecentProducts,
-  Le as useRecentShops,
-  fo as useRecommendedProducts,
-  Ho as useRecommendedShops,
-  Ge as useSavedProducts,
-  Oe as useSavedProductsActions,
-  To as useSecureStorage,
-  Yo as useShare,
-  Bo as useShop,
-  yo as useShopCartActions,
-  vo as useShopNavigation
+  sr as badgeVariants,
+  rt as formatError,
+  ot as parseUrl,
+  ho as useAsyncStorage,
+  Ze as useBuyerAttributes,
+  Ro as useCloseMini,
+  Po as useCuratedProducts,
+  Je as useCurrentUser,
+  Mo as useDeeplink,
+  Wo as useErrorScreen,
+  zo as useErrorToast,
+  Ye as useFollowedShops,
+  je as useFollowedShopsActions,
+  Ko as useImagePicker,
+  bo as useImageUpload,
+  Lo as useNavigateWithTransition,
+  Qe as useOrders,
+  Ao as usePopularProducts,
+  lo as useProduct,
+  ao as useProductList,
+  ro as useProductListActions,
+  oo as useProductLists,
+  xo as useProductMedia,
+  co as useProductSearch,
+  no as useProductVariants,
+  so as useProducts,
+  ye as useRecentProducts,
+  He as useRecentShops,
+  So as useRecommendedProducts,
+  Vo as useRecommendedShops,
+  Ue as useSavedProducts,
+  _e as useSavedProductsActions,
+  wo as useSecureStorage,
+  qo as useShare,
+  Go as useShop,
+  Oo as useShopCartActions,
+  Eo as useShopNavigation
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shopify/shop-minis-react",
   "license": "SEE LICENSE IN LICENSE.txt",
-  "version": "0.0.20",
+  "version": "0.0.21",
   "sideEffects": false,
   "type": "module",
   "engines": {
@@ -106,7 +106,7 @@
     "clean": "rm -rf dist",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "lint": "eslint . --format codeframe --cache --max-warnings=0",
+    "lint": "eslint . --format codeframe --cache",
     "lint:fix": "eslint . --format codeframe --cache --fix"
   }
 }

package/src/components/index.ts

@@ -21,6 +21,7 @@ export * from './ui/accordion'
 export * from './ui/alert'
 export * from './ui/alert-dialog'
 export * from './ui/avatar'
+export * from './ui/badge'
 export * from './ui/card'
 export * from './ui/carousel'
 export * from './ui/checkbox'

package/src/hooks/navigation/useCloseMini.example.tsx

@@ -3,5 +3,5 @@ import {useCloseMini, Button} from '@shopify/shop-minis-react'
 export function Example() {
   const {closeMini} = useCloseMini()
 
-  return <Button onPress={closeMini} text="Close Mini" />
+  return <Button onClick={closeMini}>Close Mini</Button>
 }

package/src/hooks/navigation/useShopNavigation.example.tsx

@@ -7,23 +7,26 @@ export default function MyComponent() {
   return (
     <>
       <Button
-        onPress={() =>
+        onClick={() =>
           navigateToProduct({productId: 'gid://shopify/Product/123'})
         }
-        text="View Product"
-      />
+      >
+        View Product
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           navigateToShop({
             shopId: 'gid://shopify/Shop/123',
           })
         }
-        text="Go to Shop"
-      />
+      >
+        Go to Shop
+      </Button>
       <Button
-        onPress={() => navigateToOrder({orderId: 'gid://shopify/Order/123'})}
-        text="View Order"
-      />
+        onClick={() => navigateToOrder({orderId: 'gid://shopify/Order/123'})}
+      >
+        View Order
+      </Button>
     </>
   )
 }

package/src/hooks/product/useProductListActions.example.tsx

@@ -11,25 +11,26 @@ export default function MyComponent() {
 
   return (
     <>
+      <Button onClick={() => addProductList({name: 'My product list'})}>
+        Add product list
+      </Button>
       <Button
-        onPress={() => addProductList({name: 'My product list'})}
-        text="Add product list"
-      />
+        onClick={() => removeProductList({id: 'gid://shopapp/ProductList/123'})}
+      >
+        Remove product list
+      </Button>
       <Button
-        onPress={() => removeProductList({id: 'gid://shopapp/ProductList/123'})}
-        text="Remove product list"
-      />
-      <Button
-        onPress={() =>
+        onClick={() =>
           renameProductList({
             id: 'gid://shopapp/ProductList/123',
             name: 'My renamed product list',
           })
         }
-        text="Rename product list"
-      />
+      >
+        Rename product list
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           addProductListItem({
             shopId: 'gid://shopify/Shop/42',
             productId: 'gid://shopify/Product/123',
@@ -38,10 +39,11 @@ export default function MyComponent() {
             publicListId: 'abc123',
           })
         }
-        text="Add product to list"
-      />
+      >
+        Add product to list
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           removeProductListItem({
             shopId: 'gid://shopify/Shop/42',
             productId: 'gid://shopify/Product/123',
@@ -50,8 +52,9 @@ export default function MyComponent() {
             publicListId: 'abc123',
           })
         }
-        text="Remove product from list"
-      />
+      >
+        Remove product from list
+      </Button>
     </>
   )
 }

package/src/hooks/shop/useShopCartActions.example.tsx

@@ -21,8 +21,8 @@ export default function MyComponent() {
 
   return (
     <>
-      <Button text="Add to cart" onPress={handleAddToCart} />
-      <Button text="Buy now" onPress={handleBuyNow} />
+      <Button onClick={handleAddToCart}>Add to cart</Button>
+      <Button onClick={handleBuyNow}>Buy now</Button>
     </>
   )
 }

package/src/hooks/storage/useImageUpload.example.tsx

@@ -16,5 +16,5 @@ export default function MyComponent() {
     console.log('Uploaded image:', result[0])
   }, [uploadImage])
 
-  return <Button onPress={handleUpload} text="Upload image" />
+  return <Button onClick={handleUpload}>Upload image</Button>
 }

package/src/hooks/storage/useImageUpload.ts

@@ -1,7 +1,8 @@
 import {useCallback} from 'react'
 
 import {useShopActions} from '../../internal/useShopActions'
-import {UploadTarget} from '../../types'
+
+import type {UploadTarget} from '@shopify/shop-minis-platform/actions'
 
 export interface UploadImageParams {
   /**
@@ -45,7 +46,7 @@ const uploadFileToGCS = async (
   target: UploadTarget
 ) => {
   const formData = new FormData()
-  target.parameters.forEach(({name, value}) => {
+  target.parameters.forEach(({name, value}: {name: string; value: string}) => {
     formData.append(name, value)
   })
   // Append the actual file data last

package/src/hooks/user/useFollowedShopsActions.example.tsx

@@ -5,14 +5,12 @@ export default function MyComponent() {
 
   return (
     <>
-      <Button
-        onPress={() => followShop({shopId: 'gid://shopify/Shop/123'})}
-        text="Follow shop"
-      />
-      <Button
-        onPress={() => unfollowShop({shopId: 'gid://shopify/Shop/123'})}
-        text="Unfollow shop"
-      />
+      <Button onClick={() => followShop({shopId: 'gid://shopify/Shop/123'})}>
+        Follow shop
+      </Button>
+      <Button onClick={() => unfollowShop({shopId: 'gid://shopify/Shop/123'})}>
+        Unfollow shop
+      </Button>
     </>
   )
 }

package/src/hooks/user/useSavedProductsActions.example.tsx

@@ -6,25 +6,27 @@ export default function MyComponent() {
   return (
     <>
       <Button
-        onPress={() =>
+        onClick={() =>
           saveProduct({
             productId: 'gid://shopify/Product/123',
             productVariantId: 'gid://shopify/ProductVariant/456',
             shopId: 'gid://shopify/Shop/42',
           })
         }
-        text="Save product"
-      />
+      >
+        Save product
+      </Button>
       <Button
-        onPress={() =>
+        onClick={() =>
           unsaveProduct({
             productId: 'gid://shopify/Product/123',
             productVariantId: 'gid://shopify/ProductVariant/456',
             shopId: 'gid://shopify/Shop/42',
           })
         }
-        text="Unsave product"
-      />
+      >
+        Unsave product
+      </Button>
     </>
   )
 }

package/src/hooks/util/useErrorScreen.example.tsx

@@ -8,9 +8,8 @@ export default function MyComponent() {
   const handleError = useCallback(() => {
     showErrorScreen({
       message: 'Something went wrong',
-      title: 'Error',
     })
   }, [showErrorScreen])
 
-  return <Button onPress={handleError} text="Show error screen" />
+  return <Button onClick={handleError}>Show error screen</Button>
 }

package/src/hooks/util/useErrorScreen.ts

@@ -1,5 +1,6 @@
+import {ShopActions} from '@shopify/shop-minis-platform/actions'
+
 import {useShopActions} from '../../internal/useShopActions'
-import {ShopActions} from '../../types'
 
 interface UseErrorScreenReturns {
   /**

package/src/hooks/util/useErrorToast.example.tsx

@@ -11,5 +11,5 @@ export default function MyComponent() {
     })
   }, [showErrorToast])
 
-  return <Button onPress={handleError} text="Show error toast" />
+  return <Button onClick={handleError}>Show error toast</Button>
 }

package/src/hooks/util/useErrorToast.ts

@@ -1,5 +1,6 @@
+import {ShopActions} from '@shopify/shop-minis-platform/actions'
+
 import {useShopActions} from '../../internal/useShopActions'
-import {ShopActions} from '../../types'
 
 interface UseErrorToastReturns {
   /**

package/src/hooks/util/useImagePicker.example.tsx

@@ -1,9 +1,7 @@
 import React, {useState} from 'react'
 
-import {Camera, Image} from 'lucide-react'
-
+import {Button} from '../../components/atoms/button'
 import {Alert, AlertDescription, AlertTitle} from '../../components/ui/alert'
-import {Button} from '../../components/ui/button'
 import {
   Card,
   CardContent,
@@ -16,14 +14,12 @@ import {useImagePicker} from './useImagePicker'
 export const UseImagePickerExample = () => {
   const [selectedImage, setSelectedImage] = useState<string | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const {openCamera, openGallery, ImagePickerInputs} = useImagePicker({
-    cameraFacing: 'user',
-  })
+  const {openCamera, openGallery} = useImagePicker()
 
   const handleCameraCapture = async () => {
     try {
       setError(null)
-      const file = await openCamera()
+      const file = await openCamera('front')
       const url = URL.createObjectURL(file)
       setSelectedImage(url)
     } catch (err) {
@@ -48,16 +44,12 @@ export const UseImagePickerExample = () => {
         <CardTitle>Image Picker Example</CardTitle>
       </CardHeader>
       <CardContent className="space-y-4">
-        <ImagePickerInputs />
-
         <div className="flex gap-2">
-          <Button onClick={handleCameraCapture} variant="primary">
-            <Camera className="mr-2 h-4 w-4" />
+          <Button onClick={handleCameraCapture} variant="default">
             Open Camera
           </Button>
 
           <Button onClick={handleGallerySelect} variant="secondary">
-            <Image className="mr-2 h-4 w-4" />
             Open Gallery
           </Button>
         </div>