@squiz/resource-browser 2.4.12 → 3.0.1-pre-alpha.0

package/lib/ResourceLauncher/ResourceLauncher.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { PluginLaunchModeType } from '../types';
+function ResourceLauncher({ sources, onSourceSelect }) {
+    return (React.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] min-h-[290px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-6 pr-6 pb-6 pt-4" },
+        React.createElement("ul", { tabIndex: -1, "aria-label": `sources list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
+            const SourceLauncher = source.plugin.renderResourceLauncher();
+            return (React.createElement("li", { key: index, className: "flex items-stretch relative" },
+                React.createElement("div", { className: `squiz-rb-plugin squiz-rb-plugin--${source.plugin?.type} w-full` },
+                    React.createElement(SourceLauncher, { source: source, onSearch: (query) => onSourceSelect(source, { type: PluginLaunchModeType.Search, args: { query } }), onBrowse: (browseTo) => onSourceSelect(source, { type: PluginLaunchModeType.Browse, args: { browseTo } }) }))));
+        }))));
+}
+export default ResourceLauncher;

package/lib/ResourcePicker/ResourcePicker.js

@@ -1,32 +1,25 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResourcePicker = void 0;
-const react_1 = __importDefault(require("react"));
-const AdsClickRounded_1 = __importDefault(require("@mui/icons-material/AdsClickRounded"));
-const AddCircleOutlineRounded_1 = __importDefault(require("@mui/icons-material/AddCircleOutlineRounded"));
-const PhotoLibraryRounded_1 = __importDefault(require("@mui/icons-material/PhotoLibraryRounded"));
-const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
-const Error_1 = require("./States/Error");
-const Loading_1 = require("./States/Loading");
-const Selected_1 = require("./States/Selected");
-const useSelectedState_1 = require("../Hooks/useSelectedState");
-const clsx_1 = __importDefault(require("clsx"));
-const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
-    const { data: selectedState, error, isLoading } = (0, useSelectedState_1.useSelectedState)({ resource, plugin });
+import React from 'react';
+import AdsClickRoundedIcon from '@mui/icons-material/AdsClickRounded';
+import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
+import PhotoLibraryRoundedIcon from '@mui/icons-material/PhotoLibraryRounded';
+import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
+import { ErrorState } from './States/Error';
+import { LoadingState } from './States/Loading';
+import { SelectedState } from './States/Selected';
+import { useSelectedState } from '../Hooks/useSelectedState';
+import clsx from 'clsx';
+export const ResourcePicker = ({ resource, plugin, allowedTypes, error: externalError, isLoading: isExternalLoading, isDisabled, children, onClear, isModalOpen, onModalStateChange, }) => {
+    const { data: selectedState, error, isLoading } = useSelectedState({ resource, plugin });
     const isImagePicker = allowedTypes && allowedTypes.length === 1 && allowedTypes.includes('image');
     const isEmpty = resource === null && !isExternalLoading && !externalError;
-    return (react_1.default.createElement("div", { className: (0, clsx_1.default)('resource-picker', isDisabled && 'resource-picker--disabled') },
-        isImagePicker ? (react_1.default.createElement(PhotoLibraryRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })) : (react_1.default.createElement(AdsClickRounded_1.default, { "aria-hidden": true, className: "w-6 h-6" })),
-        isEmpty ? (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: {
+    return (React.createElement("div", { className: clsx('resource-picker', isDisabled && 'resource-picker--disabled') },
+        isImagePicker ? (React.createElement(PhotoLibraryRoundedIcon, { "aria-hidden": true, className: "w-6 h-6" })) : (React.createElement(AdsClickRoundedIcon, { "aria-hidden": true, className: "w-6 h-6" })),
+        isEmpty ? (React.createElement(ModalTrigger, { overlayTriggerState: {
                 isOpen: isModalOpen,
                 onOpenChange: onModalStateChange,
-            }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: react_1.default.createElement(AddCircleOutlineRounded_1.default, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (react_1.default.createElement("div", { className: "resource-picker-info" },
-            react_1.default.createElement("div", { className: "resource-picker-info__layout" },
-                (isExternalLoading || isLoading) && react_1.default.createElement(Loading_1.LoadingState, null),
-                (externalError || error) && (react_1.default.createElement(Error_1.ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),
-                !isExternalLoading && resource && selectedState && (react_1.default.createElement(Selected_1.SelectedState, { isModalOpen: isModalOpen, onModalStateChange: onModalStateChange, resource: resource, showThumbnail: selectedState?.showThumbnail || false, icon: selectedState?.icon, label: selectedState?.label, description: selectedState?.description, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
+            }, showLabel: true, label: isImagePicker ? `Choose image` : `Choose asset`, icon: React.createElement(AddCircleOutlineRoundedIcon, { "aria-hidden": true, className: `!w-4 !h-4 text-blue-300 ${isDisabled ? 'text-gray-600' : ''}` }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, children)) : (React.createElement("div", { className: "resource-picker-info" },
+            React.createElement("div", { className: "resource-picker-info__layout" },
+                (isExternalLoading || isLoading) && React.createElement(LoadingState, null),
+                (externalError || error) && (React.createElement(ErrorState, { error: externalError || error, isDisabled: isDisabled, onClear: onClear })),
+                !isExternalLoading && resource && selectedState && (React.createElement(SelectedState, { isModalOpen: isModalOpen, onModalStateChange: onModalStateChange, resource: resource, showThumbnail: selectedState?.showThumbnail || false, icon: selectedState?.icon, label: selectedState?.label, description: selectedState?.description, isDisabled: isDisabled, onClear: onClear, resourcePickerContainer: children })))))));
 };
-exports.ResourcePicker = ResourcePicker;

package/lib/ResourcePicker/States/Error.js

@@ -1,13 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorState = void 0;
-const react_1 = __importDefault(require("react"));
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const ErrorState = ({ error, isDisabled, onClear }) => (react_1.default.createElement(react_1.default.Fragment, null,
-    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
-    react_1.default.createElement("div", { className: "text-red-300 w-full" }, error.message),
-    react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear })));
-exports.ErrorState = ErrorState;
+import React from 'react';
+import { Icon, ResetButton } from '@squiz/generic-browser-lib';
+export const ErrorState = ({ error, isDisabled, onClear }) => (React.createElement(React.Fragment, null,
+    React.createElement(Icon, { icon: 'error', "aria-hidden": true, className: "w-6 h-6 text-red-300" }),
+    React.createElement("div", { className: "text-red-300 w-full" }, error.message),
+    React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear })));

package/lib/ResourcePicker/States/Loading.js

@@ -1,11 +1,4 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoadingState = void 0;
-const react_1 = __importDefault(require("react"));
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const LoadingState = () => (react_1.default.createElement("div", { className: "col-start-2 col-end-2" },
-    react_1.default.createElement(generic_browser_lib_1.Spinner, { label: "Loading selection", className: "m-2" })));
-exports.LoadingState = LoadingState;
+import React from 'react';
+import { Spinner } from '@squiz/generic-browser-lib';
+export const LoadingState = () => (React.createElement("div", { className: "col-start-2 col-end-2" },
+    React.createElement(Spinner, { label: "Loading selection", className: "m-2" })));

package/lib/ResourcePicker/States/Selected.js

@@ -1,27 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectedState = void 0;
-const react_1 = __importDefault(require("react"));
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const resource_browser_ui_lib_1 = require("@squiz/resource-browser-ui-lib");
-const CircledLoopIcon_1 = require("../../Icons/CircledLoopIcon");
-const SelectedState = ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }) => {
+import React from 'react';
+import { ResetButton } from '@squiz/generic-browser-lib';
+import { ModalTrigger } from '@squiz/resource-browser-ui-lib';
+import { CircledLoopIcon } from '../../Icons/CircledLoopIcon';
+export const SelectedState = ({ resource, showThumbnail, icon, label, description, isDisabled, onClear, resourcePickerContainer, isModalOpen, onModalStateChange, }) => {
     const modalController = {
         isOpen: isModalOpen,
         onOpenChange: onModalStateChange,
     };
-    const replaceAsset = (react_1.default.createElement(resource_browser_ui_lib_1.ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: react_1.default.createElement(CircledLoopIcon_1.CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        showThumbnail && resource.squizImage ? (react_1.default.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
-            react_1.default.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (react_1.default.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
-        react_1.default.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
+    const replaceAsset = (React.createElement(ModalTrigger, { overlayTriggerState: isModalOpen && onModalStateChange ? modalController : undefined, showLabel: false, label: "Replace selection", containerClasses: "text-gray-500 hover:text-gray-800 focus:text-gray-800 disabled:text-gray-500 disabled:cursor-not-allowed", icon: React.createElement(CircledLoopIcon, { "aria-hidden": true, className: "m-1" }), isDisabled: isDisabled, scope: "squiz-rb-scope" }, resourcePickerContainer));
+    return (React.createElement(React.Fragment, null,
+        showThumbnail && resource.squizImage ? (React.createElement("div", { className: "checkered-bg w-[56px] h-[56px] overflow-hidden flex justify-center items-center rounded" },
+            React.createElement("img", { src: resource.squizImage.imageVariations.original.url || resource.url, className: "w-full h-full object-cover object-center", alt: resource.squizImage.name || resource.name }))) : (React.createElement("div", { className: "w-4 h-4 mt-1 flex self-start overflow-hidden" }, icon)),
+        React.createElement("div", { className: "justify-self-start self-center w-full overflow-hidden break-words" },
             label,
             description),
-        react_1.default.createElement("div", { className: "flex" },
+        React.createElement("div", { className: "flex" },
             replaceAsset,
-            react_1.default.createElement(generic_browser_lib_1.ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
+            React.createElement(ResetButton, { isDisabled: isDisabled, onClick: onClear }))));
 };
-exports.SelectedState = SelectedState;

package/lib/SourceDropdown/SourceDropdown.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ResourceBrowserSource } from '../types';
+import { ResourceBrowserSource, PluginLaunchMode } from '../types';
 export default function SourceDropdown({ sources, selectedSource, onSourceSelect, }: {
     sources: ResourceBrowserSource[];
     selectedSource: ResourceBrowserSource;
-    onSourceSelect(source: ResourceBrowserSource): void;
+    onSourceSelect(source: ResourceBrowserSource, mode?: PluginLaunchMode): void;
 }): React.JSX.Element;

package/lib/SourceDropdown/SourceDropdown.js

@@ -1,43 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
-const react_aria_1 = require("react-aria");
-function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
-    const [uniqueId] = (0, react_1.useState)((0, generic_browser_lib_1.uuid)());
-    const buttonRef = (0, react_1.useRef)(null);
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+import React, { useRef, useState } from 'react';
+import { Icon, uuid } from '@squiz/generic-browser-lib';
+import { useFocusWithin, useKeyboard } from 'react-aria';
+import { ArrowDownIcon } from '../Icons/ArrowDownIcon';
+export default function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
+    const [uniqueId] = useState(uuid());
+    const buttonRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
     // Watch the focus and blur on the menu and close if focus leaves the control
-    const { focusWithinProps } = (0, react_aria_1.useFocusWithin)({
+    const { focusWithinProps } = useFocusWithin({
         onBlurWithin: () => {
             setIsOpen(false);
         },
     });
     // Listen for Esc key within this element
-    const { keyboardProps } = (0, react_aria_1.useKeyboard)({
+    const { keyboardProps } = useKeyboard({
         onKeyDown: (e) => {
             if (isOpen && e.key === 'Escape') {
                 setIsOpen(false);
@@ -51,22 +27,20 @@ function SourceDropdown({ sources, selectedSource, onSourceSelect, }) {
         onSourceSelect(source);
     };
     if (!sources.length) {
-        return react_1.default.createElement(react_1.default.Fragment, null);
+        return React.createElement(React.Fragment, null);
     }
-    return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 border-2 rounded border-gray-300" },
-        react_1.default.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: "relative flex items-center text-sm font-semibold p-1.5 w-full" },
-            react_1.default.createElement("span", { className: "sr-only" }, "current source "),
-            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: selectedSource.type, "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
-            react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, selectedSource.name),
-            react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'arrow-down', "aria-hidden": true, className: "absolute right-3" })),
-        react_1.default.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+5px)] -left-0.5 w-[calc(100%+4px)] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll max-h-80 ${!isOpen ? 'hidden' : ''}` }, sources.map((source) => {
+    return (React.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-full " },
+        React.createElement("button", { ref: buttonRef, type: "button", "aria-label": "Source quick select", "aria-expanded": isOpen, "aria-controls": `${uniqueId}-button-menu`, onClick: () => setIsOpen(!isOpen), className: "relative flex items-center p-2 w-full rounded bg-blue-100 hover:bg-blue-150" },
+            React.createElement("span", { className: "sr-only" }, "current source "),
+            React.createElement("div", { className: "truncate max-w-[200px] text-md font-semibold text-blue-400" }, selectedSource.name),
+            React.createElement(ArrowDownIcon, { "aria-hidden": true, className: "absolute right-2 fill-blue-300" })),
+        React.createElement("ul", { id: `${uniqueId}-button-menu`, "aria-hidden": !isOpen, className: `absolute z-50 top-[calc(100%+8px)] w-[100%] bg-gray-100 border-1 shadow-md rounded border-gray-300 p-2 pb-0 overflow-y-scroll max-h-80 ${!isOpen ? 'hidden' : ''}` }, sources.map((source) => {
             const { id, name, type } = source;
             const isSelectedSource = id === selectedSource.id;
-            return (react_1.default.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
-                react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick(source), className: `relative grow flex items-center p-2 border-1 border-white rounded hover:bg-gray-50 hover:border-gray-300 focus:bg-gray-100` },
-                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
-                    react_1.default.createElement("span", { className: "text-left mr-7" }, name),
-                    isSelectedSource && (react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
+            return (React.createElement("li", { key: id, className: "flex items-center text-sm font-semibold mb-2 bg-white rounded" },
+                React.createElement("button", { type: "button", onClick: () => handleSourceClick(source), className: `relative grow flex items-center p-2 border-1 border-white rounded hover:bg-gray-50 hover:border-gray-300 focus:bg-gray-100` },
+                    React.createElement(Icon, { icon: type, "aria-label": type, className: "shrink-0 mr-2.5" }),
+                    React.createElement("span", { className: "text-left mr-7" }, name),
+                    isSelectedSource && (React.createElement(Icon, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));
         }))));
 }
-exports.default = SourceDropdown;

package/lib/SourceDropdownContainer/SourceDropdownContainer.d.ts

@@ -0,0 +1,5 @@
+import React, { PropsWithChildren } from 'react';
+export default function SourceDropdownContainer({ children, isCollapsed, onExpand, }: PropsWithChildren<{
+    isCollapsed: boolean;
+    onExpand: () => void;
+}>): React.JSX.Element;

package/lib/SourceDropdownContainer/SourceDropdownContainer.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AdsClickIcon } from '../Icons/AdsClickIcon';
+export default function SourceDropdownContainer({ children, isCollapsed, onExpand, }) {
+    return (React.createElement("div", { className: "inline-flex rounded-lg p-1 bg-blue-100 min-h-[44px]" },
+        isCollapsed && (React.createElement("button", { "aria-label": "Expand browse options", onClick: onExpand, className: "flex items-center" },
+            React.createElement(AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }))),
+        !isCollapsed && (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "flex items-center pr-1" },
+                React.createElement(AdsClickIcon, { "aria-hidden": true, className: "mx-2 fill-blue-300" }),
+                React.createElement("span", { className: "sr-only" }, "Browse")),
+            children))));
+}

package/lib/SourceList/SourceList.js

@@ -1,21 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const generic_browser_lib_1 = require("@squiz/generic-browser-lib");
+import React from 'react';
+import { Icon } from '@squiz/generic-browser-lib';
 function SourceList({ sources, onSourceSelect }) {
-    return (react_1.default.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-4.5 pr-4.5 pb-4.5 pt-3" },
-        react_1.default.createElement("div", { className: "text-md font-semibold" }, "Select an environment to use"),
-        react_1.default.createElement("ul", { tabIndex: -1, "aria-label": `environment list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
-            return (react_1.default.createElement("li", { key: index, className: "flex items-stretch relative" },
-                react_1.default.createElement("button", { onClick: () => {
+    return (React.createElement("div", { className: "overflow-y-scroll w-screen max-w-[400px] flex-1 grow-[3] border-r border-gray-300 bg-gray-100 pl-4.5 pr-4.5 pb-4.5 pt-3" },
+        React.createElement("div", { className: "text-md font-semibold" }, "Select an environment to use"),
+        React.createElement("ul", { tabIndex: -1, "aria-label": `environment list`, className: "flex flex-col bg-gray-100 min-h-full focus-visible:outline-0" }, sources.map((source, index) => {
+            return (React.createElement("li", { key: index, className: "flex items-stretch relative" },
+                React.createElement("button", { onClick: () => {
                         onSourceSelect(source);
                     }, className: "w-full p-1 mt-3 bg-white border-1 border-grey-200 min-h-[64px] rounded-lg flex items-center text-md font-semibold" },
-                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: source.type, className: "ml-4" }),
-                    react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word ml-4" }, source.name || source.id),
-                    react_1.default.createElement(generic_browser_lib_1.Icon, { icon: 'arrow-right', className: "absolute ml-1 right-4" }))));
+                    React.createElement(Icon, { icon: source.type, className: "ml-4" }),
+                    React.createElement("span", { className: "line-clamp-2 text-left break-word ml-4" }, source.name || source.id),
+                    React.createElement(Icon, { icon: 'arrow-right', className: "absolute ml-1 right-4" }))));
         }))));
 }
-exports.default = SourceList;
+export default SourceList;

package/lib/index.css

@@ -366,18 +366,15 @@
 .squiz-rb-scope .inset-0:not(.squiz-rb-plugin *) {
   inset: 0px;
 }
-.squiz-rb-scope .-left-0:not(.squiz-rb-plugin *) {
-  left: -0px;
-}
-.squiz-rb-scope .-left-0\.5:not(.squiz-rb-plugin *) {
-  left: -0.125rem;
-}
 .squiz-rb-scope .-right-8:not(.squiz-rb-plugin *) {
   right: -2rem;
 }
 .squiz-rb-scope .bottom-0:not(.squiz-rb-plugin *) {
   bottom: 0px;
 }
+.squiz-rb-scope .left-1:not(.squiz-rb-plugin *) {
+  left: 0.25rem;
+}
 .squiz-rb-scope .right-2:not(.squiz-rb-plugin *) {
   right: 0.5rem;
 }
@@ -396,8 +393,8 @@
 .squiz-rb-scope .top-3:not(.squiz-rb-plugin *) {
   top: 0.75rem;
 }
-.squiz-rb-scope .top-\[calc\(100\%\+5px\)\]:not(.squiz-rb-plugin *) {
-  top: calc(100% + 5px);
+.squiz-rb-scope .top-\[calc\(100\%\+8px\)\]:not(.squiz-rb-plugin *) {
+  top: calc(100% + 8px);
 }
 .squiz-rb-scope .z-50:not(.squiz-rb-plugin *) {
   z-index: 50;
@@ -426,6 +423,10 @@
 .squiz-rb-scope .m-5:not(.squiz-rb-plugin *) {
   margin: 1.25rem;
 }
+.squiz-rb-scope .mx-2:not(.squiz-rb-plugin *) {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .squiz-rb-scope .mx-20:not(.squiz-rb-plugin *) {
   margin-left: 5rem;
   margin-right: 5rem;
@@ -454,6 +455,9 @@
 .squiz-rb-scope .ml-4:not(.squiz-rb-plugin *) {
   margin-left: 1rem;
 }
+.squiz-rb-scope .ml-\[6px\]:not(.squiz-rb-plugin *) {
+  margin-left: 6px;
+}
 .squiz-rb-scope .ml-auto:not(.squiz-rb-plugin *) {
   margin-left: auto;
 }
@@ -463,6 +467,9 @@
 .squiz-rb-scope .mr-2\.5:not(.squiz-rb-plugin *) {
   margin-right: 0.625rem;
 }
+.squiz-rb-scope .mr-3:not(.squiz-rb-plugin *) {
+  margin-right: 0.75rem;
+}
 .squiz-rb-scope .mr-4:not(.squiz-rb-plugin *) {
   margin-right: 1rem;
 }
@@ -475,6 +482,9 @@
 .squiz-rb-scope .mr-8:not(.squiz-rb-plugin *) {
   margin-right: 2rem;
 }
+.squiz-rb-scope .mr-\[6px\]:not(.squiz-rb-plugin *) {
+  margin-right: 6px;
+}
 .squiz-rb-scope .mr-auto:not(.squiz-rb-plugin *) {
   margin-right: auto;
 }
@@ -505,6 +515,9 @@
 .squiz-rb-scope .flex:not(.squiz-rb-plugin *) {
   display: flex;
 }
+.squiz-rb-scope .inline-flex:not(.squiz-rb-plugin *) {
+  display: inline-flex;
+}
 .squiz-rb-scope .grid:not(.squiz-rb-plugin *) {
   display: grid;
 }
@@ -532,8 +545,8 @@
 .squiz-rb-scope .h-9:not(.squiz-rb-plugin *) {
   height: 2.25rem;
 }
-.squiz-rb-scope .h-\[20px\]:not(.squiz-rb-plugin *) {
-  height: 20px;
+.squiz-rb-scope .h-\[36px\]:not(.squiz-rb-plugin *) {
+  height: 36px;
 }
 .squiz-rb-scope .h-\[50vh\]:not(.squiz-rb-plugin *) {
   height: 50vh;
@@ -550,9 +563,18 @@
 .squiz-rb-scope .max-h-80:not(.squiz-rb-plugin *) {
   max-height: 20rem;
 }
+.squiz-rb-scope .min-h-\[290px\]:not(.squiz-rb-plugin *) {
+  min-height: 290px;
+}
+.squiz-rb-scope .min-h-\[44px\]:not(.squiz-rb-plugin *) {
+  min-height: 44px;
+}
 .squiz-rb-scope .min-h-\[64px\]:not(.squiz-rb-plugin *) {
   min-height: 64px;
 }
+.squiz-rb-scope .min-h-\[68px\]:not(.squiz-rb-plugin *) {
+  min-height: 68px;
+}
 .squiz-rb-scope .min-h-full:not(.squiz-rb-plugin *) {
   min-height: 100%;
 }
@@ -580,11 +602,17 @@
 .squiz-rb-scope .w-6:not(.squiz-rb-plugin *) {
   width: 1.5rem;
 }
-.squiz-rb-scope .w-72:not(.squiz-rb-plugin *) {
-  width: 18rem;
+.squiz-rb-scope .w-\[100\%\]:not(.squiz-rb-plugin *) {
+  width: 100%;
 }
-.squiz-rb-scope .w-\[20px\]:not(.squiz-rb-plugin *) {
-  width: 20px;
+.squiz-rb-scope .w-\[200px\]:not(.squiz-rb-plugin *) {
+  width: 200px;
+}
+.squiz-rb-scope .w-\[204px\]:not(.squiz-rb-plugin *) {
+  width: 204px;
+}
+.squiz-rb-scope .w-\[350px\]:not(.squiz-rb-plugin *) {
+  width: 350px;
 }
 .squiz-rb-scope .w-\[400px\]:not(.squiz-rb-plugin *) {
   width: 400px;
@@ -592,8 +620,8 @@
 .squiz-rb-scope .w-\[56px\]:not(.squiz-rb-plugin *) {
   width: 56px;
 }
-.squiz-rb-scope .w-\[calc\(100\%\+4px\)\]:not(.squiz-rb-plugin *) {
-  width: calc(100% + 4px);
+.squiz-rb-scope .w-\[calc\(100\%-2px\)\]:not(.squiz-rb-plugin *) {
+  width: calc(100% - 2px);
 }
 .squiz-rb-scope .w-full:not(.squiz-rb-plugin *) {
   width: 100%;
@@ -675,6 +703,9 @@
 .squiz-rb-scope .overflow-hidden:not(.squiz-rb-plugin *) {
   overflow: hidden;
 }
+.squiz-rb-scope .overflow-y-auto:not(.squiz-rb-plugin *) {
+  overflow-y: auto;
+}
 .squiz-rb-scope .overflow-y-hidden:not(.squiz-rb-plugin *) {
   overflow-y: hidden;
 }
@@ -722,13 +753,25 @@
 .squiz-rb-scope .border-solid:not(.squiz-rb-plugin *) {
   border-style: solid;
 }
+.squiz-rb-scope .border-blue-200:not(.squiz-rb-plugin *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(143 192 235 / var(--tw-border-opacity));
+}
 .squiz-rb-scope .border-current:not(.squiz-rb-plugin *) {
   border-color: currentColor;
 }
+.squiz-rb-scope .border-gray-200:not(.squiz-rb-plugin *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(237 237 237 / var(--tw-border-opacity));
+}
 .squiz-rb-scope .border-gray-300:not(.squiz-rb-plugin *) {
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
 }
+.squiz-rb-scope .border-gray-400:not(.squiz-rb-plugin *) {
+  --tw-border-opacity: 1;
+  border-color: rgb(186 186 186 / var(--tw-border-opacity));
+}
 .squiz-rb-scope .border-white:not(.squiz-rb-plugin *) {
   --tw-border-opacity: 1;
   border-color: rgb(255 255 255 / var(--tw-border-opacity));
@@ -763,6 +806,9 @@
 .squiz-rb-scope .bg-opacity-10:not(.squiz-rb-plugin *) {
   --tw-bg-opacity: 0.1;
 }
+.squiz-rb-scope .fill-blue-300:not(.squiz-rb-plugin *) {
+  fill: #0774d2;
+}
 .squiz-rb-scope .object-cover:not(.squiz-rb-plugin *) {
   -o-object-fit: cover;
   object-fit: cover;
@@ -771,12 +817,12 @@
   -o-object-position: center;
   object-position: center;
 }
+.squiz-rb-scope .p-0:not(.squiz-rb-plugin *) {
+  padding: 0px;
+}
 .squiz-rb-scope .p-1:not(.squiz-rb-plugin *) {
   padding: 0.25rem;
 }
-.squiz-rb-scope .p-1\.5:not(.squiz-rb-plugin *) {
-  padding: 0.375rem;
-}
 .squiz-rb-scope .p-2:not(.squiz-rb-plugin *) {
   padding: 0.5rem;
 }
@@ -814,17 +860,21 @@
   padding-left: 1.75rem;
   padding-right: 1.75rem;
 }
+.squiz-rb-scope .py-0:not(.squiz-rb-plugin *) {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+.squiz-rb-scope .py-0\.5:not(.squiz-rb-plugin *) {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .squiz-rb-scope .py-2:not(.squiz-rb-plugin *) {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
-.squiz-rb-scope .py-4:not(.squiz-rb-plugin *) {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-.squiz-rb-scope .py-4\.5:not(.squiz-rb-plugin *) {
-  padding-top: 1.125rem;
-  padding-bottom: 1.125rem;
+.squiz-rb-scope .py-3:not(.squiz-rb-plugin *) {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 .squiz-rb-scope .py-8:not(.squiz-rb-plugin *) {
   padding-top: 2rem;
@@ -839,12 +889,24 @@
 .squiz-rb-scope .pb-4\.5:not(.squiz-rb-plugin *) {
   padding-bottom: 1.125rem;
 }
+.squiz-rb-scope .pb-6:not(.squiz-rb-plugin *) {
+  padding-bottom: 1.5rem;
+}
+.squiz-rb-scope .pl-1:not(.squiz-rb-plugin *) {
+  padding-left: 0.25rem;
+}
 .squiz-rb-scope .pl-4:not(.squiz-rb-plugin *) {
   padding-left: 1rem;
 }
 .squiz-rb-scope .pl-4\.5:not(.squiz-rb-plugin *) {
   padding-left: 1.125rem;
 }
+.squiz-rb-scope .pl-6:not(.squiz-rb-plugin *) {
+  padding-left: 1.5rem;
+}
+.squiz-rb-scope .pr-1:not(.squiz-rb-plugin *) {
+  padding-right: 0.25rem;
+}
 .squiz-rb-scope .pr-10:not(.squiz-rb-plugin *) {
   padding-right: 2.5rem;
 }
@@ -854,9 +916,15 @@
 .squiz-rb-scope .pr-4\.5:not(.squiz-rb-plugin *) {
   padding-right: 1.125rem;
 }
+.squiz-rb-scope .pr-6:not(.squiz-rb-plugin *) {
+  padding-right: 1.5rem;
+}
 .squiz-rb-scope .pt-3:not(.squiz-rb-plugin *) {
   padding-top: 0.75rem;
 }
+.squiz-rb-scope .pt-4:not(.squiz-rb-plugin *) {
+  padding-top: 1rem;
+}
 .squiz-rb-scope .text-left:not(.squiz-rb-plugin *) {
   text-align: left;
 }
@@ -1131,6 +1199,14 @@
   --tw-bg-opacity: 1;
   background-color: rgb(230 241 250 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .hover\:bg-blue-150:hover:not(.squiz-rb-plugin *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(199 223 245 / var(--tw-bg-opacity));
+}
+.squiz-rb-scope .hover\:bg-gray-100:hover:not(.squiz-rb-plugin *) {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+}
 .squiz-rb-scope .hover\:bg-gray-50:hover:not(.squiz-rb-plugin *) {
   --tw-bg-opacity: 1;
   background-color: rgb(247 247 247 / var(--tw-bg-opacity));

package/lib/index.d.ts

@@ -2,7 +2,10 @@ import React from 'react';
 import { ResourceBrowserContext, ResourceBrowserContextProvider } from './ResourceBrowserContext/ResourceBrowserContext';
 import { ResourceBrowserUnresolvedResource, ResourceBrowserResource } from './types';
 import { AuthProvider, useAuthContext, AuthContext } from './ResourceBrowserContext/AuthProvider';
-export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext };
+import BrowseToSource from './BrowseToSource/BrowseToSource';
+import SourceDropdown from './SourceDropdown/SourceDropdown';
+import SourceDropdownContainer from './SourceDropdownContainer/SourceDropdownContainer';
+export { ResourceBrowserContext, ResourceBrowserContextProvider, useAuthContext, AuthProvider, AuthContext, BrowseToSource, SourceDropdown, SourceDropdownContainer, };
 export * from './types';
 export type ResourceBrowserProps = {
     modalTitle: string;