@rubixstudios/payload-media 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 rilrom / Riley Langbein
+Copyright (c) 2025-2026 Rubix Studios Pty. Ltd. <https://rubixstudios.com.au>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# PayloadCMS Media Search Plugin
+
+PayloadCMS plugin for stock image and video search across Unsplash, Pexels, and Pixabay, with filterable results and instant import.
+
+<img width="1899" height="907" alt="image" src="https://github.com/user-attachments/assets/1c19f977-d075-4dfc-9f52-8d9426bc1500" />
+
+This project is an independent implementation derived [PayloadBites' Image Search](https://github.com/rilrom/payload-bites/tree/main/packages/image-search) extended with provider-specific image filtering and improved Windows OS compatibility.
+
+## Installation
+
+```sh
+pnpm add @rubixstudios/payload-media
+```
+
+```typescript
+// payload.config.ts
+import { buildConfig } from 'payload/config'
+import { mediaPlugin } from '@rubixstudios/payload-media'
+
+export default buildConfig({
+  plugins: [
+    mediaPlugin({
+      disabled: false, // Optional, defaults to false
+      access: ({ req: { user } }) => Boolean(user), // Media search access control
+      pexels: process.env.API_KEY_PEXELS!,
+      pixabay: process.env.API_KEY_PIXABAY!,
+      unsplash: process.env.API_KEY_UNSPLASH!,
+    }),
+  ],
+})
+```
+
+## Notes
+
+API key can be obtained from the respective provider's website.
+
+- [Unsplash](https://unsplash.com/developers)
+- [Pexels](https://www.pexels.com/api/)
+- [Pixabay](https://pixabay.com/api/docs/)
+
+When using Unplash, utilise your Access Key for the API Token.
+
+## Features
+
+- Stock image and video search inside Payload Admin
+- Providers: Unsplash, Pexels, Pixabay
+- Provider-specific filters (color, orientation, size, type)
+- Featured and keyword search modes
+- One-click image import
+- Permission-based access control
+
+## Liability
+
+Rubix Studios, its developers, and contributors bear no responsibility for how images are used.
+Before using any provider, ensure you have reviewed and agreed to their terms and usage policies.
+
+## Support
+
+For support or inquiries:
+
+- LinkedIn: [rubixvi](https://www.linkedin.com/in/rubixvi/)
+- Website: [Rubix Studios](https://rubixstudios.com.au)
+
+## Author
+
+Rubix Studios Pty. Ltd.  
+[https://rubixstudios.com.au](https://rubixstudios.com.au)
+
+## Acknowledgments
+
+This project is based on the Image Search by Riley Langbein:
+
+- [Riley Langbein](https://github.com/rilrom)

package/dist/components/media-search/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const drawerSlug = "payload-media-search";
+export declare const MediaSearch: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/media-search/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/media-search/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAI1C,eAAO,MAAM,UAAU,yBAAyB,CAAA;AAEhD,eAAO,MAAM,WAAW,yBA8BvB,CAAA"}

package/dist/components/media-search/index.js

@@ -0,0 +1,31 @@
+'use client';
+import { Button, Drawer, useConfig, useModal, useUploadControls } from '@payloadcms/ui';
+import React, { useCallback } from 'react';
+import { SearchDrawer } from '../search-drawer/index.js';
+export const drawerSlug = 'payload-media-search';
+export const MediaSearch = ()=>{
+    const { config } = useConfig();
+    const { setUploadControlFileUrl } = useUploadControls();
+    const { openModal, closeModal } = useModal();
+    const handleSearchSubmit = useCallback((url)=>{
+        if (!url) return;
+        setUploadControlFileUrl(url);
+        closeModal(drawerSlug);
+    }, [
+        setUploadControlFileUrl,
+        closeModal
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+        className: "file-field__orText"
+    }, "Or"), /*#__PURE__*/ React.createElement(Button, {
+        buttonStyle: "pill",
+        size: "small",
+        onClick: ()=>openModal(drawerSlug)
+    }, "Search media"), /*#__PURE__*/ React.createElement(Drawer, {
+        slug: drawerSlug
+    }, /*#__PURE__*/ React.createElement(SearchDrawer, {
+        serverURL: config.serverURL,
+        api: config.routes.api,
+        onSelect: handleSearchSubmit
+    })));
+};

package/dist/components/search-drawer/filters/pexels.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ProviderFilters } from '../../../types.js';
+type PexelsFiltersProps = {
+    filters: ProviderFilters;
+    mediaType: 'image' | 'video';
+    setFilters: React.Dispatch<React.SetStateAction<ProviderFilters | null>>;
+    baseClass: string;
+};
+export declare const PexelsFilters: ({ filters, mediaType, setFilters, baseClass, }: PexelsFiltersProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=pexels.d.ts.map

package/dist/components/search-drawer/filters/pexels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pexels.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/pexels.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAKL,KAAK,eAAe,EAErB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IACxE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,gDAK3B,kBAAkB,6BAyEpB,CAAA"}

package/dist/components/search-drawer/filters/pexels.js

@@ -0,0 +1,48 @@
+import { Select } from '@payloadcms/ui';
+import React from 'react';
+import { PexelsColours, PexelsOrientation, PexelsSize, PexelsVideoSize } from '../../../types.js';
+export const PexelsFilters = ({ filters, mediaType, setFilters, baseClass })=>{
+    if (filters?.provider !== 'pexels') return null;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__filters`
+    }, mediaType !== 'video' && /*#__PURE__*/ React.createElement(Select, {
+        options: PexelsColours,
+        value: PexelsColours.find((o)=>o.value === filters.options.color),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
+                    provider: 'pexels',
+                    options: {
+                        ...prev.options,
+                        color: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Colour"
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: mediaType === 'video' ? PexelsVideoSize : PexelsSize,
+        value: (mediaType === 'video' ? PexelsVideoSize : PexelsSize).find((o)=>o.value === filters.options.size),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
+                    provider: 'pexels',
+                    options: {
+                        ...prev.options,
+                        size: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Size"
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PexelsOrientation,
+        value: PexelsOrientation.find((o)=>o.value === filters.options.orientation),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
+                    provider: 'pexels',
+                    options: {
+                        ...prev.options,
+                        orientation: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Orientation"
+    }));
+};

package/dist/components/search-drawer/filters/pixabay.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type ProviderFilters } from '../../../types.js';
+type PixabayFiltersProps = {
+    filters: ProviderFilters;
+    mediaType: 'image' | 'video';
+    setFilters: React.Dispatch<React.SetStateAction<ProviderFilters | null>>;
+    baseClass: string;
+};
+export declare const PixabayFilters: ({ filters, mediaType, setFilters, baseClass, }: PixabayFiltersProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=pixabay.d.ts.map

package/dist/components/search-drawer/filters/pixabay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixabay.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/pixabay.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAML,KAAK,eAAe,EAErB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,mBAAmB,GAAG;IACzB,OAAO,EAAE,eAAe,CAAA;IACxB,SAAS,EAAE,OAAO,GAAG,OAAO,CAAA;IAC5B,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IACxE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,gDAK5B,mBAAmB,6BAmHrB,CAAA"}

package/dist/components/search-drawer/filters/pixabay.js

@@ -0,0 +1,74 @@
+import { Select } from '@payloadcms/ui';
+import React from 'react';
+import { PixabayCategories, PixabayColours, PixabayImageType, PixabayOrder, PixabayOrientation } from '../../../types.js';
+export const PixabayFilters = ({ filters, mediaType, setFilters, baseClass })=>{
+    if (filters?.provider !== 'pixabay') return null;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__filters`
+    }, /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayCategories,
+        value: PixabayCategories.find((o)=>o.value === filters.options.category),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
+                    provider: 'pixabay',
+                    options: {
+                        ...prev.options,
+                        category: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Category"
+    }), mediaType !== 'video' && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayImageType,
+        value: PixabayImageType.find((o)=>o.value === filters.options.image_type),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
+                    provider: 'pixabay',
+                    options: {
+                        ...prev.options,
+                        image_type: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Type"
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayColours,
+        value: PixabayColours.find((o)=>o.value === filters.options.colors),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
+                    provider: 'pixabay',
+                    options: {
+                        ...prev.options,
+                        colors: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Colour"
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayOrientation,
+        value: PixabayOrientation.find((o)=>o.value === filters.options.orientation),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
+                    provider: 'pixabay',
+                    options: {
+                        ...prev.options,
+                        orientation: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Orientation"
+    })), /*#__PURE__*/ React.createElement(Select, {
+        options: PixabayOrder,
+        value: PixabayOrder.find((o)=>o.value === filters.options.order),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
+                    provider: 'pixabay',
+                    options: {
+                        ...prev.options,
+                        order: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Order"
+    }));
+};

package/dist/components/search-drawer/filters/unsplash.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type ProviderFilters } from '../../../types.js';
+type UnsplashFiltersProps = {
+    filters: ProviderFilters;
+    setFilters: React.Dispatch<React.SetStateAction<ProviderFilters | null>>;
+    baseClass: string;
+};
+export declare const UnsplashFilters: ({ filters, setFilters, baseClass }: UnsplashFiltersProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=unsplash.d.ts.map

package/dist/components/search-drawer/filters/unsplash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"unsplash.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/filters/unsplash.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,KAAK,eAAe,EAIrB,MAAM,mBAAmB,CAAA;AAE1B,KAAK,oBAAoB,GAAG;IAC1B,OAAO,EAAE,eAAe,CAAA;IACxB,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,GAAG,IAAI,CAAC,CAAC,CAAA;IACxE,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,eAAe,GAAI,oCAAoC,oBAAoB,6BAgDvF,CAAA"}

package/dist/components/search-drawer/filters/unsplash.js

@@ -0,0 +1,35 @@
+import { Select } from '@payloadcms/ui';
+import React from 'react';
+import { UnsplashColours, UnsplashOrientation } from '../../../types.js';
+export const UnsplashFilters = ({ filters, setFilters, baseClass })=>{
+    if (filters?.provider !== 'unsplash') return null;
+    return /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__filters`
+    }, /*#__PURE__*/ React.createElement(Select, {
+        options: UnsplashColours,
+        value: UnsplashColours.find((o)=>o.value === filters.options.color),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'unsplash' ? {
+                    provider: 'unsplash',
+                    options: {
+                        ...prev.options,
+                        color: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Colour"
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: UnsplashOrientation,
+        value: UnsplashOrientation.find((o)=>o.value === filters.options.orientation),
+        onChange: (opt)=>setFilters((prev)=>prev?.provider === 'unsplash' ? {
+                    provider: 'unsplash',
+                    options: {
+                        ...prev.options,
+                        orientation: opt?.value
+                    }
+                } : prev),
+        isClearable: true,
+        isSearchable: false,
+        placeholder: "Orientation"
+    }));
+};

package/dist/components/search-drawer/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import './style.css';
+export type SearchDrawerProps = {
+    serverURL: string;
+    api: string;
+    onSelect: (value: string) => void;
+};
+export declare const SearchDrawer: (props: SearchDrawerProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/search-drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/search-drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAe/D,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,EAAE,MAAM,CAAA;IACjB,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBA4TpD,CAAA"}

package/dist/components/search-drawer/index.js

@@ -0,0 +1,306 @@
+'use client';
+import { Pagination, SearchFilter, Select, toast } from '@payloadcms/ui';
+import React, { useCallback, useEffect, useState } from 'react';
+import { MediaOptions } from '../../types.js';
+import { fetchCache } from '../../utils/fetchCache.js';
+import { PexelsFilters } from './filters/pexels.js';
+import { PixabayFilters } from './filters/pixabay.js';
+import { UnsplashFilters } from './filters/unsplash.js';
+import { ImageCard } from './media/image.js';
+import { VideoCard } from './media/video.js';
+import './style.css';
+const baseClass = 'search-media';
+export const SearchDrawer = (props)=>{
+    const { serverURL, api, onSelect } = props;
+    const [selectedProvider, setSelectedProvider] = useState(null);
+    const [options, setOptions] = useState([]);
+    const [mediaType, setMediaType] = useState('image');
+    const [media, setMedia] = useState(null);
+    const [filters, setFilters] = useState(null);
+    const [currentPage, setCurrentPage] = useState(null);
+    const [totalPages, setTotalPages] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [value, setValue] = useState('');
+    const defaultError = useCallback(()=>{
+        toast.error('Something went wrong.');
+    }, []);
+    const resetMedia = useCallback(()=>{
+        setMedia(null);
+        setTotalPages(null);
+        setCurrentPage(1);
+    }, []);
+    const getOptions = useCallback(async ()=>{
+        try {
+            const response = await fetch(`${serverURL}${api}/providers`);
+            const json = await response.json();
+            if (json.error) {
+                setLoading(false);
+                return toast.error(json.error);
+            }
+            const providers = json.data.map((provider)=>({
+                    label: provider.name,
+                    value: provider.key.toLowerCase()
+                }));
+            setOptions(providers);
+            const initial = providers[0];
+            if (!initial) {
+                setLoading(false);
+                return;
+            }
+            setFilters({
+                provider: initial.value,
+                options: {}
+            });
+            setSelectedProvider(initial);
+        } catch  {
+            setLoading(false);
+            defaultError();
+        }
+    }, [
+        serverURL,
+        api,
+        defaultError
+    ]);
+    const buildFeatured = useCallback(()=>{
+        if (!filters || !mediaType) return '';
+        const params = new URLSearchParams();
+        switch(filters.provider){
+            case 'unsplash':
+                {
+                    const { color, orientation } = filters.options;
+                    if (color) params.set('color', color);
+                    if (orientation) params.set('orientation', orientation);
+                    break;
+                }
+            case 'pexels':
+                {
+                    const { color, orientation, size } = filters.options;
+                    if (color) params.set('color', color);
+                    if (orientation) params.set('orientation', orientation);
+                    if (size) params.set('size', size);
+                    if (mediaType === 'video') params.set('media', 'video');
+                    break;
+                }
+            case 'pixabay':
+                {
+                    const { category, image_type, order, orientation, colors } = filters.options;
+                    if (category) params.set('category', category);
+                    if (image_type) params.set('image_type', image_type);
+                    if (order) params.set('order', order);
+                    if (orientation) params.set('orientation', orientation);
+                    if (colors) params.set('colors', colors);
+                    if (mediaType === 'video') params.set('media', 'video');
+                    break;
+                }
+        }
+        const query = params.toString();
+        return query ? `?${query}` : '';
+    }, [
+        filters,
+        mediaType
+    ]);
+    const getFeatured = useCallback(async ()=>{
+        if (!selectedProvider || !filters || !mediaType) return;
+        try {
+            setLoading(true);
+            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider.value}/featured${buildFeatured()}`);
+            if (!json) return;
+            if (json.error) {
+                toast.error(json.error);
+                return;
+            }
+            setMedia(json.data.images);
+        } catch  {
+            defaultError();
+        } finally{
+            setLoading(false);
+        }
+    }, [
+        serverURL,
+        api,
+        selectedProvider,
+        filters,
+        buildFeatured,
+        mediaType,
+        defaultError
+    ]);
+    const buildQuery = useCallback((page = 1)=>{
+        if (!filters || !mediaType) return '';
+        const params = new URLSearchParams();
+        params.set('query', value);
+        params.set('page', String(page));
+        switch(filters.provider){
+            case 'unsplash':
+                {
+                    const { color, orientation } = filters.options;
+                    if (color) params.set('color', color);
+                    if (orientation) params.set('orientation', orientation);
+                    break;
+                }
+            case 'pexels':
+                {
+                    const { color, orientation, size } = filters.options;
+                    if (color) params.set('color', color);
+                    if (orientation) params.set('orientation', orientation);
+                    if (size) params.set('size', size);
+                    if (mediaType === 'video') params.set('media', 'video');
+                    break;
+                }
+            case 'pixabay':
+                {
+                    const { category, image_type, order, orientation, colors } = filters.options;
+                    if (category) params.set('category', category);
+                    if (image_type) params.set('image_type', image_type);
+                    if (order) params.set('order', order);
+                    if (orientation) params.set('orientation', orientation);
+                    if (colors) params.set('colors', colors);
+                    if (mediaType === 'video') params.set('media', 'video');
+                    break;
+                }
+        }
+        return params.toString();
+    }, [
+        filters,
+        value,
+        mediaType
+    ]);
+    const getMedia = useCallback(async (page = 1)=>{
+        try {
+            setLoading(true);
+            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider?.value}/search?${buildQuery(page)}`);
+            if (json.error) return toast.error(json.error);
+            setMedia(json.data.images);
+            setTotalPages(json.data.totalPages);
+            setCurrentPage(page);
+        } catch  {
+            defaultError();
+        } finally{
+            setLoading(false);
+        }
+    }, [
+        serverURL,
+        api,
+        selectedProvider?.value,
+        defaultError,
+        buildQuery
+    ]);
+    const selectImage = async (url, download)=>{
+        onSelect(url);
+        if (!download) return;
+        try {
+            await fetch(`${serverURL}${api}/providers/${selectedProvider?.value}/track-download?url=${download}`);
+        } catch  {
+            return null;
+        }
+    };
+    const selectFilter = useCallback((select)=>{
+        setFilters({
+            provider: select.value,
+            options: {}
+        });
+        setSelectedProvider(select);
+        if (select.value === 'unsplash') {
+            setMediaType('image');
+        }
+        resetMedia();
+    }, [
+        resetMedia
+    ]);
+    const changeFilters = useCallback((search)=>{
+        setValue(search);
+        resetMedia();
+    }, [
+        resetMedia
+    ]);
+    useEffect(()=>{
+        void getOptions();
+    }, [
+        getOptions
+    ]);
+    useEffect(()=>{
+        if (!selectedProvider?.value || !filters || !mediaType) return;
+        if (value.trim().length > 0) {
+            void getMedia(1);
+        } else {
+            void getFeatured();
+        }
+    }, [
+        selectedProvider?.value,
+        filters,
+        value,
+        mediaType,
+        getMedia,
+        getFeatured
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        className: baseClass
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__fields`
+    }, /*#__PURE__*/ React.createElement(SearchFilter, {
+        label: "",
+        handleChange: changeFilters
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: MediaOptions.filter((option)=>filters?.provider === 'unsplash' ? option.value === 'image' : true),
+        value: {
+            label: mediaType === 'image' ? 'Images' : 'Videos',
+            value: mediaType
+        },
+        onChange: (opt)=>{
+            const val = opt?.value;
+            setMediaType(val);
+            resetMedia();
+        },
+        isClearable: false,
+        isSearchable: false,
+        isCreatable: false,
+        className: `${baseClass}__mediaToggle`
+    }), /*#__PURE__*/ React.createElement(Select, {
+        options: options,
+        value: selectedProvider,
+        onChange: (value)=>selectFilter(value),
+        isClearable: false,
+        isSearchable: false,
+        isCreatable: false,
+        className: `${baseClass}__options`
+    })), filters?.provider === 'pexels' && /*#__PURE__*/ React.createElement(PexelsFilters, {
+        filters: filters,
+        mediaType: mediaType,
+        setFilters: setFilters,
+        baseClass: baseClass
+    }), filters?.provider === 'pixabay' && /*#__PURE__*/ React.createElement(PixabayFilters, {
+        filters: filters,
+        mediaType: mediaType,
+        setFilters: setFilters,
+        baseClass: baseClass
+    }), filters?.provider === 'unsplash' && /*#__PURE__*/ React.createElement(UnsplashFilters, {
+        filters: filters,
+        setFilters: setFilters,
+        baseClass: baseClass
+    }), loading && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__loading`
+    }, "Loading media..."), !loading && media?.length === 0 && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__noResults`
+    }, "No media found"), !loading && media && media?.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__results`
+    }, media.map((data)=>/*#__PURE__*/ React.createElement(React.Fragment, {
+            key: data.id
+        }, mediaType === 'video' ? /*#__PURE__*/ React.createElement(VideoCard, {
+            data: data,
+            baseClass: baseClass
+        }) : /*#__PURE__*/ React.createElement(ImageCard, {
+            data: data,
+            baseClass: baseClass,
+            onSelect: selectImage
+        })))), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
+        className: `${baseClass}__pagination`
+    }, /*#__PURE__*/ React.createElement(Pagination, {
+        hasNextPage: currentPage < totalPages,
+        hasPrevPage: currentPage > 1,
+        nextPage: currentPage < totalPages ? currentPage + 1 : undefined,
+        numberOfNeighbors: 3,
+        page: currentPage,
+        prevPage: currentPage > 1 ? currentPage - 1 : undefined,
+        totalPages: totalPages,
+        onChange: (page)=>getMedia(page)
+    }))));
+};

package/dist/components/search-drawer/media/heart.d.ts

@@ -0,0 +1,3 @@
+import React, { type SVGProps } from 'react';
+export declare function HeartIcon(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+//# sourceMappingURL=heart.d.ts.map