@squiz/generic-browser-lib 1.35.1-alpha.34

package/lib/Icons/MatrixResources/index.d.ts

@@ -0,0 +1,11 @@
+export { default as Audio } from './Audio';
+export { default as Excel } from './Excel';
+export { default as Folder } from './Folder';
+export { default as GenericFile } from './GenericFile';
+export { default as Image } from './Image';
+export { default as Page } from './Page';
+export { default as Pdf } from './Pdf';
+export { default as Powerpoint } from './Powerpoint';
+export { default as Site } from './Site';
+export { default as Video } from './Video';
+export { default as Word } from './Word';

package/lib/Icons/MatrixResources/index.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Word = exports.Video = exports.Site = exports.Powerpoint = exports.Pdf = exports.Page = exports.Image = exports.GenericFile = exports.Folder = exports.Excel = exports.Audio = void 0;
+// Export all the icons from the MatrixResources folder
+var Audio_1 = require("./Audio");
+Object.defineProperty(exports, "Audio", { enumerable: true, get: function () { return __importDefault(Audio_1).default; } });
+var Excel_1 = require("./Excel");
+Object.defineProperty(exports, "Excel", { enumerable: true, get: function () { return __importDefault(Excel_1).default; } });
+var Folder_1 = require("./Folder");
+Object.defineProperty(exports, "Folder", { enumerable: true, get: function () { return __importDefault(Folder_1).default; } });
+var GenericFile_1 = require("./GenericFile");
+Object.defineProperty(exports, "GenericFile", { enumerable: true, get: function () { return __importDefault(GenericFile_1).default; } });
+var Image_1 = require("./Image");
+Object.defineProperty(exports, "Image", { enumerable: true, get: function () { return __importDefault(Image_1).default; } });
+var Page_1 = require("./Page");
+Object.defineProperty(exports, "Page", { enumerable: true, get: function () { return __importDefault(Page_1).default; } });
+var Pdf_1 = require("./Pdf");
+Object.defineProperty(exports, "Pdf", { enumerable: true, get: function () { return __importDefault(Pdf_1).default; } });
+var Powerpoint_1 = require("./Powerpoint");
+Object.defineProperty(exports, "Powerpoint", { enumerable: true, get: function () { return __importDefault(Powerpoint_1).default; } });
+var Site_1 = require("./Site");
+Object.defineProperty(exports, "Site", { enumerable: true, get: function () { return __importDefault(Site_1).default; } });
+var Video_1 = require("./Video");
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });
+var Word_1 = require("./Word");
+Object.defineProperty(exports, "Word", { enumerable: true, get: function () { return __importDefault(Word_1).default; } });

package/lib/Modal/Modal.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+export type ModalProps = {
+    isDismissable?: boolean;
+    state: OverlayTriggerState;
+    overlayProps: DOMAttributes<FocusableElement>;
+    children: (titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
+};
+export declare function Modal({ isDismissable, state, overlayProps, children, ...props }: ModalProps): JSX.Element;

package/lib/Modal/Modal.js

@@ -0,0 +1,47 @@
+"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 });
+exports.Modal = void 0;
+const react_1 = __importStar(require("react"));
+const react_aria_1 = require("react-aria");
+/*
+  This has to be a separate element otherwise the focus trap fails. Assuming this is because it needs
+  to fit inside the 'Overlay' as a form of context.
+*/
+function ModalContent({ children, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const { dialogProps, titleProps } = (0, react_aria_1.useDialog)(props, ref);
+    return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "z-50 relative bg-white rounded-lg h-screen lg:h-[calc(100vh-3.5rem)] w-screen max-w-screen-lg" }, children(titleProps)));
+}
+function Modal({ isDismissable, state, overlayProps, children, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const { modalProps, underlayProps } = (0, react_aria_1.useModalOverlay)({ isDismissable, ...props }, state, ref);
+    return (react_1.default.createElement(react_aria_1.Overlay, null,
+        react_1.default.createElement("div", { className: "squiz-gb-scope" },
+            react_1.default.createElement("div", { ...underlayProps, className: "h-full z-[9998] fixed inset-0 before:z-40 before:fixed before:inset-0 before:bg-black before:bg-opacity-25" },
+                react_1.default.createElement("div", { ...modalProps, ref: ref, className: "h-full flex items-center justify-center" },
+                    react_1.default.createElement(ModalContent, { ...overlayProps }, (titleProps) => children(titleProps)))))));
+}
+exports.Modal = Modal;

package/lib/Modal/ModalOpeningButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AriaButtonProps } from 'react-aria';
+interface ModalOpeningButtonProps extends AriaButtonProps<'button'> {
+    className?: string;
+    children?: React.ReactNode;
+    isDisabled?: boolean;
+    title?: string;
+}
+export declare function ModalOpeningButton({ className, children, title, ...props }: ModalOpeningButtonProps): JSX.Element;
+export {};

package/lib/Modal/ModalOpeningButton.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalOpeningButton = void 0;
+const react_1 = __importDefault(require("react"));
+const react_aria_1 = require("react-aria");
+function ModalOpeningButton({ className, children, title, ...props }) {
+    const ref = react_1.default.useRef(null);
+    const { buttonProps } = (0, react_aria_1.useButton)(props, ref);
+    return (react_1.default.createElement("button", { ...buttonProps, ref: ref, className: className, title: title }, children));
+}
+exports.ModalOpeningButton = ModalOpeningButton;

package/lib/Modal/ModalTrigger.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+export declare function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }: {
+    label: string;
+    showLabel?: boolean;
+    icon?: React.ReactNode;
+    isDisabled?: boolean;
+    children: (onClose: () => void, titleProps: DOMAttributes<FocusableElement>) => React.ReactElement;
+}): JSX.Element;

package/lib/Modal/ModalTrigger.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalTrigger = void 0;
+const react_1 = __importDefault(require("react"));
+const react_aria_1 = require("react-aria");
+const react_stately_1 = require("react-stately");
+const clsx_1 = __importDefault(require("clsx"));
+const Modal_1 = require("./Modal");
+const ModalOpeningButton_1 = require("./ModalOpeningButton");
+function ModalTrigger({ label, showLabel, icon, isDisabled, children, ...props }) {
+    const state = (0, react_stately_1.useOverlayTriggerState)(props);
+    const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, state);
+    let ariaAttr = {};
+    if (!showLabel) {
+        ariaAttr = { ...ariaAttr, 'aria-label': label };
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, ...ariaAttr, isDisabled: isDisabled, className: (0, clsx_1.default)('flex p-1 px-1.5 rounded mr-auto text-blue-300 hover:bg-blue-100 focus:bg-blue-100 focus:outline-none', isDisabled && 'hover:bg-transparent cursor-not-allowed text-gray-600') },
+            icon,
+            showLabel && react_1.default.createElement("span", { className: "ml-1 text-sm font-semibold leading-4" }, label)),
+        state.isOpen && (react_1.default.createElement(Modal_1.Modal, { isDismissable: true, state: state, overlayProps: overlayProps }, (titleProps) => children(state.close, titleProps)))));
+}
+exports.ModalTrigger = ModalTrigger;

package/lib/PreviewPanel/PreviewModal.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+export type PreviewModalProps = {
+    state: OverlayTriggerState;
+    overlayProps: DOMAttributes<FocusableElement>;
+    children?: ReactNode;
+    onClose: () => void;
+};
+declare function PreviewModal({ state, overlayProps, children, onClose, ...props }: PreviewModalProps): JSX.Element;
+export default PreviewModal;

package/lib/PreviewPanel/PreviewModal.js

@@ -0,0 +1,79 @@
+"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 react_aria_1 = require("react-aria");
+const Icon_1 = require("../Icons/Icon");
+/*
+  This has to be a separate element otherwise the focus trap fails. Assuming this is because it needs
+  to fit inside the 'Overlay' as a form of context.
+*/
+function PreviewModalContent({ children, onClose, ...props }) {
+    const ref = (0, react_1.useRef)(null);
+    const { dialogProps, titleProps } = (0, react_aria_1.useDialog)(props, ref);
+    return (react_1.default.createElement("div", { ...dialogProps, ref: ref, className: "h-full flex flex-col" },
+        react_1.default.createElement("h3", { ...titleProps, className: "sr-only" }, "Resource Details"),
+        react_1.default.createElement("button", { type: "button", "aria-label": "Close details", onClick: onClose, className: "absolute top-3 right-3" },
+            react_1.default.createElement(Icon_1.Icon, { icon: 'close', className: "" })),
+        children));
+}
+// Accept a ref for the top level modal
+function PreviewModal({ state, overlayProps, children, onClose, ...props }) {
+    const modalRef = (0, react_1.useRef)(null);
+    const overlayRef = (0, react_1.useRef)(null);
+    const { modalProps, underlayProps } = (0, react_aria_1.useModalOverlay)({ isKeyboardDismissDisabled: true, ...props }, state, overlayRef);
+    // Need to handle the ESC escape hatch ourselves as we need to run onClose to deselect the current node
+    const { keyboardProps } = (0, react_aria_1.useKeyboard)({
+        onKeyDown: (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+            else {
+                // Need to do this so TAB get handled up higher and cycles though the focus trap
+                e.continuePropagation();
+            }
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        // Check if the click event has happened outside the modal
+        function handleClickOutside(event) {
+            if (modalRef.current && !modalRef.current.contains(event?.target)) {
+                onClose();
+            }
+        }
+        // Bind the event listener
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            // Unbind the event listener on clean up
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [modalRef]);
+    return (react_1.default.createElement(react_aria_1.Overlay, null,
+        react_1.default.createElement("div", { className: "squiz-gb-scope" },
+            react_1.default.createElement("div", { ref: modalRef, ...underlayProps, ...keyboardProps, className: "fixed z-[9999] overflow-y-scroll bottom-0 w-full h-[50vh] bg-white border-t border-gray-300" },
+                react_1.default.createElement("div", { ref: overlayRef, ...modalProps, className: "h-full" },
+                    react_1.default.createElement(PreviewModalContent, { ...overlayProps, onClose: onClose }, children))))));
+}
+exports.default = PreviewModal;

package/lib/PreviewPanel/PreviewPanel.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { OverlayTriggerState } from 'react-stately';
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+export interface PreviewPanelProps {
+    resource: any | null;
+    modalState: OverlayTriggerState;
+    previewModalOverlayProps: DOMAttributes<FocusableElement>;
+    allowedTypes: string[] | undefined;
+    onSelect: (resource: any) => void;
+    onClose: () => void;
+    ResourceComponent?: React.ElementType;
+}
+export declare const PreviewPanel: ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, }: PreviewPanelProps) => JSX.Element;

package/lib/PreviewPanel/PreviewPanel.js

@@ -0,0 +1,58 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewPanel = void 0;
+const react_1 = __importStar(require("react"));
+const react_responsive_1 = require("react-responsive");
+const Icon_1 = require("../Icons/Icon");
+const PreviewModal_1 = __importDefault(require("./PreviewModal"));
+const PreviewPanel = function ({ resource, previewModalOverlayProps, modalState, onSelect, onClose, ResourceComponent, }) {
+    // Watch the media size to see if we are on mobile size
+    const isMobile = (0, react_responsive_1.useMediaQuery)({ query: '(max-width: 640px)' });
+    // If we are on mobile and the selected resource changes show the preview panel modal.
+    (0, react_1.useEffect)(() => {
+        if (!modalState.isOpen) {
+            modalState.setOpen(Boolean(resource && isMobile));
+        }
+    }, [resource, isMobile]);
+    const previewPanel = resource && (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "flex flex-col grow" }, ResourceComponent && react_1.default.createElement(ResourceComponent, { resource: resource })),
+        react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
+            react_1.default.createElement("button", { type: "button", onClick: () => onSelect(resource), className: "rounded text-sm text-white bg-blue-300 py-2 px-2.5 m-5" }, "Select"))));
+    return (react_1.default.createElement("div", { className: "sm:overflow-y-scroll sm:flex-1 sm:grow-[2] bg-white" },
+        !isMobile && react_1.default.createElement("h3", { className: "sr-only" }, "Resource Details"),
+        resource === null && (react_1.default.createElement("div", { className: "max-sm:hidden flex flex-col h-full" },
+            react_1.default.createElement("div", { className: "flex flex-col grow items-center mt-20 mx-20" },
+                react_1.default.createElement(Icon_1.Icon, { icon: 'resource-select', "aria-hidden": true }),
+                react_1.default.createElement("div", { className: "text-sm text-gray-600 text-center mt-4" }, "Make a selection to see more info here.")),
+            react_1.default.createElement("div", { className: "flex justify-end border-t border-gray-300" },
+                react_1.default.createElement("button", { disabled: true, type: "button", className: "rounded text-sm text-white bg-blue-300/[.6] py-2 px-2.5 m-5" }, "Select")))),
+        resource && isMobile && modalState.isOpen && (react_1.default.createElement(PreviewModal_1.default, { state: modalState, overlayProps: previewModalOverlayProps, onClose: onClose }, previewPanel)),
+        resource && !isMobile && react_1.default.createElement("div", { className: "flex flex-col h-full" }, previewPanel)));
+};
+exports.PreviewPanel = PreviewPanel;

package/lib/PreviewPanel/PreviewPanelHOC.d.ts

@@ -0,0 +1,6 @@
+import React, { ComponentType } from 'react';
+import { PreviewPanelProps } from './PreviewPanel';
+export interface PreviewPanelHOCProps {
+    ResourceComponent?: ComponentType<any>;
+}
+export declare const PreviewPanelHOC: (ResourceComponent: ComponentType<any>) => React.FC<PreviewPanelHOCProps & PreviewPanelProps>;

package/lib/PreviewPanel/PreviewPanelHOC.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewPanelHOC = void 0;
+const react_1 = __importDefault(require("react"));
+const PreviewPanel_1 = require("./PreviewPanel");
+const PreviewPanelHOC = (ResourceComponent) => {
+    const NewComponent = (props) => {
+        // Render OriginalComponent and pass on its props.
+        return react_1.default.createElement(PreviewPanel_1.PreviewPanel, { ...props, ResourceComponent: ResourceComponent });
+    };
+    return NewComponent;
+};
+exports.PreviewPanelHOC = PreviewPanelHOC;

package/lib/ResetButton/ResetButton.d.ts

@@ -0,0 +1,5 @@
+export type ResetButtonProps = {
+    onClick: () => void;
+    isDisabled?: boolean;
+};
+export declare const ResetButton: ({ onClick, isDisabled }: ResetButtonProps) => JSX.Element;

package/lib/ResetButton/ResetButton.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetButton = void 0;
+const react_1 = __importDefault(require("react"));
+const CloseRounded_1 = __importDefault(require("@mui/icons-material/CloseRounded"));
+const ResetButton = ({ onClick, isDisabled }) => (react_1.default.createElement("div", { className: "squiz-gb-scope" },
+    react_1.default.createElement("button", { type: "button", "aria-label": `Remove selection`, title: `Remove selection`, className: "text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed", disabled: isDisabled, onClick: onClick },
+        react_1.default.createElement(CloseRounded_1.default, null))));
+exports.ResetButton = ResetButton;

package/lib/ResourceItem/ResourceItem.d.ts

@@ -0,0 +1,19 @@
+import { DOMAttributes, FocusableElement } from '@react-types/shared';
+import { OverlayTriggerState } from 'react-stately';
+import { ResourceSources } from '../Icons/Icon';
+interface ResourceItem<T> {
+    item: T;
+    selected?: boolean;
+    label: string;
+    type: string;
+    childCount?: number;
+    previewModalState: OverlayTriggerState;
+    onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
+    onDrillDown?: (node: T) => void;
+    className: string;
+    allowedTypes?: string[] | undefined;
+    iconSource?: ResourceSources;
+    showChevron?: boolean;
+}
+declare const ResourceItem: <T>({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, iconSource, showChevron, }: ResourceItem<T>) => JSX.Element;
+export { ResourceItem };

package/lib/ResourceItem/ResourceItem.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceItem = void 0;
+const react_1 = __importDefault(require("react"));
+const react_aria_1 = require("react-aria");
+const ModalOpeningButton_1 = require("../Modal/ModalOpeningButton");
+const Icon_1 = require("../Icons/Icon");
+const ResourceItem = ({ item, selected, label, type, childCount, previewModalState, onSelect, onDrillDown, className, allowedTypes, iconSource = 'matrix', showChevron = false, }) => {
+    const { triggerProps, overlayProps } = (0, react_aria_1.useOverlayTrigger)({ type: 'dialog' }, previewModalState);
+    const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
+    const title = isDisabled ? "You can't select this item" : label;
+    return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}` },
+        react_1.default.createElement(ModalOpeningButton_1.ModalOpeningButton, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), "aria-label": childCount === undefined ? `Drill down to ${label} children` : '', className: `
+          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount !== undefined && childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
+        `, title: title },
+            react_1.default.createElement(Icon_1.Icon, { icon: type, resourceSource: iconSource, "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}` }),
+            react_1.default.createElement("span", { className: `relative  flex items-center ${selected ? 'mr-8' : ''}` },
+                react_1.default.createElement("span", { className: "line-clamp-2 text-left break-word" }, label),
+                selected && react_1.default.createElement(Icon_1.Icon, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" })),
+            childCount === undefined && showChevron && (react_1.default.createElement(Icon_1.Icon, { icon: 'arrow-right', className: "absolute right-5" }))),
+        childCount !== undefined && childCount > 0 && onDrillDown && (react_1.default.createElement("button", { type: "button", "aria-label": `Drill down to ${label} children`, onClick: () => onDrillDown(item), className: `relative shrink-0 flex items-center p-4 rounded outline-0 before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-50 focus:bg-gray-50` },
+            react_1.default.createElement("span", { className: "ml-auto flex items-center" },
+                react_1.default.createElement("span", { className: "truncate w-14 text-right", title: String(childCount) }, childCount),
+                react_1.default.createElement(Icon_1.Icon, { icon: 'arrow-right', className: "ml-1" }))))));
+};
+exports.ResourceItem = ResourceItem;

package/lib/ResourceState/ResourceState.d.ts

@@ -0,0 +1,7 @@
+interface ResourceState {
+    state: 'error' | 'empty';
+    message?: string;
+    handleReload: () => void;
+}
+declare const ResourceState: ({ state, message, handleReload }: ResourceState) => JSX.Element;
+export { ResourceState };

package/lib/ResourceState/ResourceState.js

@@ -0,0 +1,17 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceState = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../Icons/Icon");
+const ResourceState = function ({ state, message, handleReload }) {
+    return (react_1.default.createElement("div", { className: "flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3" },
+        react_1.default.createElement(Icon_1.Icon, { icon: state, "aria-hidden": true }),
+        react_1.default.createElement("span", { className: "text-md text-gray-800 font-semibold leading-5" }, state === 'empty' ? 'There are no items to display' : message),
+        react_1.default.createElement("button", { type: "button", onClick: handleReload, className: "flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 h-9 mt-3 rounded text-md font-bold text-gray-700 py-2 px-3" },
+            react_1.default.createElement(Icon_1.Icon, { icon: state === 'empty' ? 'back' : 'retry', "aria-hidden": true }),
+            state === 'empty' ? 'Back to source list' : 'Try again')));
+};
+exports.ResourceState = ResourceState;

package/lib/Skeleton/List/SkeletonList.d.ts

@@ -0,0 +1,6 @@
+export type SkeletonListProps = {
+    itemCount: number;
+    className?: string;
+    ariaLabel?: string;
+};
+export declare const SkeletonList: ({ itemCount, className, ariaLabel }: SkeletonListProps) => JSX.Element;

package/lib/Skeleton/List/SkeletonList.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonList = void 0;
+const react_1 = __importDefault(require("react"));
+const SkeletonListItem_1 = require("../ListItem/SkeletonListItem");
+const clsx_1 = __importDefault(require("clsx"));
+const SkeletonList = ({ itemCount = 8, className, ariaLabel }) => (react_1.default.createElement("ul", { className: (0, clsx_1.default)(`flex flex-col px-7 my-4 focus-visible:outline-0`, className), "aria-label": `${ariaLabel || 'Skeleton loader list'}` }, [...Array(itemCount)].map((_item, index) => {
+    return react_1.default.createElement(SkeletonListItem_1.SkeletonListItem, { key: index });
+})));
+exports.SkeletonList = SkeletonList;

package/lib/Skeleton/ListItem/SkeletonListItem.d.ts

@@ -0,0 +1 @@
+export declare const SkeletonListItem: () => JSX.Element;

package/lib/Skeleton/ListItem/SkeletonListItem.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonListItem = void 0;
+const react_1 = __importDefault(require("react"));
+const SkeletonListItem = () => (react_1.default.createElement("li", { className: "flex items-center p-1 first:mt-0 bg-white border-1 border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b" },
+    react_1.default.createElement("div", { className: "animate-skeleton-pulse grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded" },
+        react_1.default.createElement("span", { className: "w-6 h-6 bg-gray-200 rounded-full" }),
+        react_1.default.createElement("div", { className: "w-full d-flex flex-col mx-4" },
+            react_1.default.createElement("div", { className: "mb-1 w-3/4 h-2 bg-gray-200 rounded" }),
+            react_1.default.createElement("div", { className: "w-1/2 h-2 bg-gray-200 rounded" })),
+        react_1.default.createElement("div", { className: "ml-auto mx-4 w-12 h-2 bg-gray-200 rounded" }))));
+exports.SkeletonListItem = SkeletonListItem;

package/lib/Spinner/Spinner.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from 'react';
+export type SpinnerProps = {
+    size?: 'sm' | 'md';
+    className?: string;
+    label?: string;
+};
+export declare const Spinner: ({ size, className, label }: SpinnerProps) => ReactElement;

package/lib/Spinner/Spinner.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const react_1 = __importDefault(require("react"));
+const clsx_1 = __importDefault(require("clsx"));
+const Spinner = ({ size = 'sm', className, label = 'Loading' }) => {
+    return (react_1.default.createElement("div", { className: "spinner__wrapper text-gray-600", "aria-label": label },
+        react_1.default.createElement("div", { className: (0, clsx_1.default)('spinner', size && `spinner--${size}`, className), role: "status" })));
+};
+exports.Spinner = Spinner;