@squiz/resource-browser 1.32.1-alpha.29 → 1.32.1-alpha.31

package/lib/ResourceItem/ResourceItem.js

@@ -11,16 +11,17 @@ const ResourceItem = ({ item, selected, label, type, childCount, previewModalSta
     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 border-grey-200 ${className}` },
+    return (react_1.default.createElement("li", { className: `flex items-stretch p-1 bg-white border border-grey-200 min-h-[64px] ${className}` },
         react_1.default.createElement(ModalOpeningButton_1.default, { type: "button", ...triggerProps, isDisabled: isDisabled, onPress: () => onSelect(item, overlayProps), className: `
-          relative grow flex items-center p-4 rounded ${selected ? 'bg-blue-100 text-blue-400' : ''} ${childCount > 0 ? 'mr-2' : ''} ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-100 focus:bg-gray-100'}
+          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${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.default, { icon: type, resourceSource: "matrix", "aria-label": type, className: `mr-4 shrink-0 ${isDisabled && 'opacity-40'}` }),
-            react_1.default.createElement("span", { className: "text-left break-all" }, label),
-            childCount <= 0 && react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "absolute right-5" })),
-        childCount > 0 && (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 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-100 focus:bg-gray-100` },
+            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.default, { icon: 'selected', "aria-label": "selected", className: "absolute -right-8" }))),
+        childCount > 0 && (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-10 text-right", title: String(childCount) }, childCount),
+                react_1.default.createElement("span", { className: "truncate w-14 text-right", title: String(childCount) }, childCount),
                 react_1.default.createElement(Icon_1.default, { icon: 'arrow-right', className: "ml-1" }))))));
 };
 exports.default = ResourceItem;

package/lib/ResourcePickerContainer/ResourcePickerContainer.js

@@ -67,15 +67,15 @@ function ResourcePickerContainer({ title, titleAriaProps, allowedTypes, onReques
     (0, react_1.useEffect)(() => {
         setSelectedResource(null);
     }, [hierarchy]);
-    return (react_1.default.createElement("div", { className: "relative flex flex-col h-full" },
-        react_1.default.createElement("div", { className: "flex items-center p-6" },
+    return (react_1.default.createElement("div", { className: "relative flex flex-col h-full text-gray-800 antialiased" },
+        react_1.default.createElement("div", { className: "flex items-center p-4.5" },
             react_1.default.createElement("h2", { ...titleAriaProps, className: "text-xl leading-6 text-gray-800 font-semibold mr-6" }, title),
-            react_1.default.createElement("div", { className: "px-3 border-l border-grey-300 w-300px" },
+            react_1.default.createElement("div", { className: "px-3 border-l border-gray-300 w-300px" },
                 react_1.default.createElement(SourceDropdown_1.default, { sources: sources, selectedSource: source, isLoading: isSourceLoading, onSourceSelect: handleSourceDrilldown, onRootSelect: handleReturnToRoot })),
             react_1.default.createElement("button", { type: "button", "aria-label": `Close ${title} dialog`, onClick: onClose, className: "absolute top-2 right-2 p-2.5 rounded hover:bg-blue-100 focus:bg-blue-100" },
                 react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
                     react_1.default.createElement("path", { d: "M13.3 0.710017C13.1131 0.522765 12.8595 0.417532 12.595 0.417532C12.3305 0.417532 12.0768 0.522765 11.89 0.710017L6.99997 5.59002L2.10997 0.700017C1.92314 0.512765 1.66949 0.407532 1.40497 0.407532C1.14045 0.407532 0.886802 0.512765 0.699971 0.700017C0.309971 1.09002 0.309971 1.72002 0.699971 2.11002L5.58997 7.00002L0.699971 11.89C0.309971 12.28 0.309971 12.91 0.699971 13.3C1.08997 13.69 1.71997 13.69 2.10997 13.3L6.99997 8.41002L11.89 13.3C12.28 13.69 12.91 13.69 13.3 13.3C13.69 12.91 13.69 12.28 13.3 11.89L8.40997 7.00002L13.3 2.11002C13.68 1.73002 13.68 1.09002 13.3 0.710017Z", fill: "currentColor" })))),
-        react_1.default.createElement("div", { className: "flex border-t border-grey-300 h-[calc(100%-92px)]" },
+        react_1.default.createElement("div", { className: "flex border-t border-gray-300 h-[calc(100%-72px)]" },
             react_1.default.createElement("div", { className: "overflow-y-scroll flex-1 grow-[3] border-r border-gray-300" },
                 react_1.default.createElement("h3", { className: "sr-only" }, "Resource List"),
                 hierarchy.length > 0 && (react_1.default.createElement(ResourceBreadcrumb_1.default, { hierarchy: hierarchy, onBreadcrumbSelect: popUntil, onReturnToRoot: handleReturnToRoot })),

package/lib/Skeleton/ListItem/SkeletonListItem.js

@@ -6,7 +6,7 @@ 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 border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b" },
-    react_1.default.createElement("div", { className: "grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded" },
+    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" }),

package/lib/SourceDropdown/SourceDropdown.js

@@ -63,14 +63,14 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
         onRootSelect();
     };
     return (react_1.default.createElement("div", { ...focusWithinProps, ...keyboardProps, className: "relative w-72 border 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-2 w-full" },
+        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" },
             selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "sr-only" }, "current source "),
-                react_1.default.createElement(Icon_1.default, { icon: selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5" }),
+                react_1.default.createElement(Icon_1.default, { icon: selectedSource.resource?.type.code, resourceSource: "matrix", "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
                 react_1.default.createElement("div", { className: "truncate max-w-[200px]" }, selectedSource.resource?.name || selectedSource.source.name))),
             !selectedSource && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", { className: "sr-only" }, "view "),
-                react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
+                react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5 h-[20px] w-[20px]" }),
                 "All available sources")),
             react_1.default.createElement(Icon_1.default, { 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 border-2 rounded border-gray-300 p-2 ${!isOpen ? 'hidden' : ''}` },
@@ -79,7 +79,7 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                     react_1.default.createElement(Icon_1.default, { icon: 'root', "aria-hidden": true, className: "mr-2.5" }),
                     "All available sources")),
             isLoading && (react_1.default.createElement("li", { className: "mt-6" },
-                react_1.default.createElement(Spinner_1.default, { size: "lg", label: "Loading sources", className: "m-3" }))),
+                react_1.default.createElement(Spinner_1.default, { size: "sm", label: "Loading sources", className: "m-3" }))),
             !isLoading &&
                 categorisedSources.map(({ key, label, sources }, index) => {
                     return (react_1.default.createElement("li", { key: key, className: `flex flex-col text-sm font-semibold text-grey-800 ${index > 0 ? 'mt-3' : ''}` },
@@ -88,7 +88,7 @@ function SourceDropdown({ sources, selectedSource, isLoading, onRootSelect, onSo
                         sources?.length > 0 && (react_1.default.createElement("ul", { "aria-label": `${label} nodes`, className: "flex flex-col mt-2" }, sources.map(({ source, resource }) => {
                             const isSelectedSource = source.id === selectedSource?.source.id && resource?.id === selectedSource?.resource?.id;
                             return (react_1.default.createElement("li", { key: `${source.id}-${resource?.id}`, className: "flex items-center bg-white border border-b-0 last:border-b border-grey-200 first:rounded-t last:rounded-b" },
-                                react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick({ source, resource }), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${isSelectedSource ? 'bg-blue-100 text-blue-400' : ''}` },
+                                react_1.default.createElement("button", { type: "button", onClick: () => handleSourceClick({ source, resource }), className: `relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100` },
                                     react_1.default.createElement(Icon_1.default, { icon: resource?.type.code, resourceSource: "matrix", "aria-label": resource?.type.name, className: "shrink-0 mr-2.5" }),
                                     react_1.default.createElement("span", { className: "text-left mr-7" }, resource?.name || source.name),
                                     isSelectedSource && (react_1.default.createElement(Icon_1.default, { icon: 'selected', "aria-label": "selected", className: "absolute right-4" })))));

package/lib/Spinner/Spinner.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 export type SpinnerProps = {
-    size?: 'md' | 'lg';
+    size?: 'sm' | 'md';
     className?: string;
     label?: string;
 };

package/lib/Spinner/Spinner.js

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

package/lib/index.css

@@ -378,6 +378,9 @@
 .squiz-rb-scope .-left-0\.5 {
   left: -0.125rem;
 }
+.squiz-rb-scope .-right-8 {
+  right: -2rem;
+}
 .squiz-rb-scope .bottom-0 {
   bottom: 0px;
 }
@@ -390,9 +393,6 @@
 .squiz-rb-scope .right-4 {
   right: 1rem;
 }
-.squiz-rb-scope .right-5 {
-  right: 1.25rem;
-}
 .squiz-rb-scope .top-2 {
   top: 0.5rem;
 }
@@ -490,6 +490,9 @@
 .squiz-rb-scope .mr-7 {
   margin-right: 1.75rem;
 }
+.squiz-rb-scope .mr-8 {
+  margin-right: 2rem;
+}
 .squiz-rb-scope .mr-auto {
   margin-right: auto;
 }
@@ -511,6 +514,12 @@
 .squiz-rb-scope .mt-7 {
   margin-top: 1.75rem;
 }
+.squiz-rb-scope .line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
 .squiz-rb-scope .block {
   display: block;
 }
@@ -550,11 +559,14 @@
 .squiz-rb-scope .h-9 {
   height: 2.25rem;
 }
+.squiz-rb-scope .h-\[20px\] {
+  height: 20px;
+}
 .squiz-rb-scope .h-\[50vh\] {
   height: 50vh;
 }
-.squiz-rb-scope .h-\[calc\(100\%-92px\)\] {
-  height: calc(100% - 92px);
+.squiz-rb-scope .h-\[calc\(100\%-72px\)\] {
+  height: calc(100% - 72px);
 }
 .squiz-rb-scope .h-full {
   height: 100%;
@@ -562,6 +574,9 @@
 .squiz-rb-scope .h-screen {
   height: 100vh;
 }
+.squiz-rb-scope .min-h-\[64px\] {
+  min-height: 64px;
+}
 .squiz-rb-scope .min-h-full {
   min-height: 100%;
 }
@@ -571,9 +586,6 @@
 .squiz-rb-scope .w-1\/2 {
   width: 50%;
 }
-.squiz-rb-scope .w-10 {
-  width: 2.5rem;
-}
 .squiz-rb-scope .w-12 {
   width: 3rem;
 }
@@ -601,6 +613,9 @@
 .squiz-rb-scope .w-\[119px\] {
   width: 119px;
 }
+.squiz-rb-scope .w-\[20px\] {
+  width: 20px;
+}
 .squiz-rb-scope .w-\[400px\] {
   width: 400px;
 }
@@ -684,9 +699,6 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.squiz-rb-scope .break-all {
-  word-break: break-all;
-}
 .squiz-rb-scope .rounded {
   border-radius: 4px;
 }
@@ -768,6 +780,9 @@
 .squiz-rb-scope .p-1 {
   padding: 0.25rem;
 }
+.squiz-rb-scope .p-1\.5 {
+  padding: 0.375rem;
+}
 .squiz-rb-scope .p-2 {
   padding: 0.5rem;
 }
@@ -777,9 +792,6 @@
 .squiz-rb-scope .p-4 {
   padding: 1rem;
 }
-.squiz-rb-scope .p-6 {
-  padding: 1.5rem;
-}
 .squiz-rb-scope .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -800,6 +812,10 @@
   padding-left: 0.75rem;
   padding-right: 0.75rem;
 }
+.squiz-rb-scope .px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
 .squiz-rb-scope .px-7 {
   padding-left: 1.75rem;
   padding-right: 1.75rem;
@@ -891,19 +907,24 @@
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
+.squiz-rb-scope .antialiased {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 .squiz-rb-scope .opacity-40 {
   opacity: 0.4;
 }
+.squiz-rb-scope .outline-0 {
+  outline-width: 0px;
+}
 .squiz-rb-scope .blur {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 .squiz-rb-scope .spinner {
   display: inline-block;
-  height: 2rem;
-  width: 2rem;
   border-radius: 9999px;
-  border-width: 4px;
+  border-width: 2px;
   border-style: solid;
   border-color: currentColor;
   border-right-color: transparent;
@@ -924,6 +945,10 @@
     animation: spin 1.5s linear infinite;
   }
 }
+.squiz-rb-scope .spinner {
+  height: 20px;
+  width: 20px;
+}
 .squiz-rb-scope .spinner__wrapper {
   display: flex;
   align-items: center;
@@ -931,9 +956,23 @@
   --tw-text-opacity: 1;
   color: rgb(224 224 224 / var(--tw-text-opacity));
 }
-.squiz-rb-scope .spinner--lg {
-  height: 3rem;
-  width: 3rem;
+.squiz-rb-scope .spinner--md {
+  height: 32px;
+  width: 32px;
+}
+.squiz-rb-scope .animate-skeleton-pulse {
+  animation: pulse 2s linear infinite;
+}
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.45;
+  }
+  100% {
+    opacity: 1;
+  }
 }
 .squiz-rb-scope .resource-breadcrumb--collapsed .resource-breadcrumb__label {
   max-width: 250px;
@@ -1002,6 +1041,17 @@
   gap: 0.5rem;
   justify-items: center;
 }
+.squiz-rb-scope *,
+.squiz-rb-scope button {
+  letter-spacing: -0.02em;
+}
+.squiz-rb-scope svg {
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
+}
+.squiz-rb-scope .p-4\.5 {
+  padding: 18px;
+}
 .squiz-rb-scope .before\:fixed::before {
   content: var(--tw-content);
   position: fixed;
@@ -1111,6 +1161,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
 .squiz-rb-scope .hover\:bg-transparent:hover {
   background-color: transparent;
 }
@@ -1126,6 +1180,10 @@
   --tw-bg-opacity: 1;
   background-color: rgb(245 245 245 / var(--tw-bg-opacity));
 }
+.squiz-rb-scope .focus\:bg-gray-50:focus {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 247 247 / var(--tw-bg-opacity));
+}
 .squiz-rb-scope .focus\:text-gray-800:focus {
   --tw-text-opacity: 1;
   color: rgb(61 61 61 / var(--tw-text-opacity));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.32.1-alpha.29",
+  "version": "1.32.1-alpha.31",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "1.32.1-alpha.29",
+    "@squiz/dx-json-schema-lib": "1.32.1-alpha.31",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -73,5 +73,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "dd5931dd752cb79620662dc260e8c1df96fc63b1"
+  "gitHead": "53b94e99c31f98b9b007eecff5d4a0ac0b384fb7"
 }

package/src/ResourceItem/ResourceItem.tsx

@@ -36,16 +36,16 @@ const ResourceItem = <T,>({
   const title = isDisabled ? "You can't select this item" : label;
 
   return (
-    <li className={`flex items-stretch p-1 bg-white border border-grey-200 ${className}`}>
+    <li className={`flex items-stretch p-1 bg-white border border-grey-200 min-h-[64px] ${className}`}>
       <ModalOpeningButton
         type="button"
         {...triggerProps}
         isDisabled={isDisabled}
         onPress={() => onSelect(item, overlayProps)}
         className={`
-          relative grow flex items-center p-4 rounded ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
+          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
           childCount > 0 ? 'mr-2' : ''
-        } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-100 focus:bg-gray-100'}
+        } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
         `}
         title={title}
       >
@@ -55,18 +55,20 @@ const ResourceItem = <T,>({
           aria-label={type}
           className={`mr-4 shrink-0 ${isDisabled && 'opacity-40'}`}
         />
-        <span className="text-left break-all">{label}</span>
-        {childCount <= 0 && <Icon icon={'arrow-right' as IconOptions} className="absolute right-5" />}
+        <span className={`relative  flex items-center ${selected ? 'mr-8' : ''}`}>
+          <span className="line-clamp-2 text-left break-word">{label}</span>
+          {selected && <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute -right-8" />}
+        </span>
       </ModalOpeningButton>
       {childCount > 0 && (
         <button
           type="button"
           aria-label={`Drill down to ${label} children`}
           onClick={() => onDrillDown(item)}
-          className={`relative shrink-0 flex items-center p-4 rounded 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-100 focus:bg-gray-100`}
+          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`}
         >
           <span className="ml-auto flex items-center">
-            <span className="truncate w-10 text-right" title={String(childCount)}>
+            <span className="truncate w-14 text-right" title={String(childCount)}>
               {childCount}
             </span>
             <Icon icon={'arrow-right' as IconOptions} className="ml-1" />

package/src/ResourcePickerContainer/ResourcePickerContainer.tsx

@@ -92,12 +92,12 @@ function ResourcePickerContainer({
   }, [hierarchy]);
 
   return (
-    <div className="relative flex flex-col h-full">
-      <div className="flex items-center p-6">
+    <div className="relative flex flex-col h-full text-gray-800 antialiased">
+      <div className="flex items-center p-4.5">
         <h2 {...titleAriaProps} className="text-xl leading-6 text-gray-800 font-semibold mr-6">
           {title}
         </h2>
-        <div className="px-3 border-l border-grey-300 w-300px">
+        <div className="px-3 border-l border-gray-300 w-300px">
           <SourceDropdown
             sources={sources}
             selectedSource={source}
@@ -120,7 +120,7 @@ function ResourcePickerContainer({
           </svg>
         </button>
       </div>
-      <div className="flex border-t border-grey-300 h-[calc(100%-92px)]">
+      <div className="flex border-t border-gray-300 h-[calc(100%-72px)]">
         <div className="overflow-y-scroll flex-1 grow-[3] border-r border-gray-300">
           <h3 className="sr-only">Resource List</h3>
           {hierarchy.length > 0 && (

package/src/Skeleton/ListItem/SkeletonListItem.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export const SkeletonListItem = () => (
   <li className="flex items-center p-1 first:mt-0 bg-white border border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b">
-    <div className="grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
+    <div className="animate-skeleton-pulse grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
       <span className="w-6 h-6 bg-gray-200 rounded-full" />
       <div className="w-full d-flex flex-col mx-4">
         <div className="mb-1 w-3/4 h-2 bg-gray-200 rounded" />

package/src/Skeleton/_skeleton.scss

@@ -0,0 +1,15 @@
+.animate-skeleton-pulse {
+  animation: pulse 2s linear infinite;
+
+  @keyframes pulse {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.45;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}

package/src/SourceDropdown/SourceDropdown.tsx

@@ -64,7 +64,7 @@ export default function SourceDropdown({
         aria-expanded={isOpen}
         aria-controls={`${uniqueId}-button-menu`}
         onClick={() => setIsOpen(!isOpen)}
-        className="relative flex items-center text-sm font-semibold p-2 w-full"
+        className="relative flex items-center text-sm font-semibold p-1.5 w-full"
       >
         {selectedSource && (
           <>
@@ -73,7 +73,7 @@ export default function SourceDropdown({
               icon={selectedSource.resource?.type.code as IconOptions}
               resourceSource="matrix"
               aria-hidden
-              className="mr-2.5"
+              className="mr-2.5 h-[20px] w-[20px]"
             />
             <div className="truncate max-w-[200px]">{selectedSource.resource?.name || selectedSource.source.name}</div>
           </>
@@ -82,7 +82,7 @@ export default function SourceDropdown({
         {!selectedSource && (
           <>
             <span className="sr-only">view </span>
-            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5" />
+            <Icon icon={'root' as IconOptions} aria-hidden className="mr-2.5 h-[20px] w-[20px]" />
             All available sources
           </>
         )}
@@ -111,7 +111,7 @@ export default function SourceDropdown({
         </li>
         {isLoading && (
           <li className="mt-6">
-            <Spinner size="lg" label="Loading sources" className="m-3" />
+            <Spinner size="sm" label="Loading sources" className="m-3" />
           </li>
         )}
         {!isLoading &&
@@ -135,9 +135,7 @@ export default function SourceDropdown({
                           <button
                             type="button"
                             onClick={() => handleSourceClick({ source, resource })}
-                            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100 ${
-                              isSelectedSource ? 'bg-blue-100 text-blue-400' : ''
-                            }`}
+                            className={`relative grow flex items-center p-2.5 hover:bg-gray-100 focus:bg-gray-100`}
                           >
                             <Icon
                               icon={resource?.type.code as IconOptions}

package/src/Spinner/Spinner.stories.tsx

@@ -16,7 +16,7 @@ Default.args = {};
 export const Large = Template.bind({});
 Large.args = {
   ...Default.args,
-  size: 'lg',
+  size: 'md',
 };
 
 export const Custom = Template.bind({});

package/src/Spinner/Spinner.tsx

@@ -2,12 +2,12 @@ import React, { ReactElement } from 'react';
 import clsx from 'clsx';
 
 export type SpinnerProps = {
-  size?: 'md' | 'lg';
+  size?: 'sm' | 'md';
   className?: string;
   label?: string;
 };
 
-const Spinner = ({ size = 'md', className, label = 'Loading' }: SpinnerProps): ReactElement => {
+const Spinner = ({ size = 'sm', className, label = 'Loading' }: SpinnerProps): ReactElement => {
   return (
     <div className="spinner__wrapper" aria-label={label}>
       <div className={clsx(`spinner`, size && `spinner--${size}`, className)} role="status" />

package/src/Spinner/_spinner.scss

@@ -1,11 +1,14 @@
 .spinner {
-  @apply inline-block rounded-full h-8 w-8;
-  @apply border-4 border-solid border-current border-r-transparent;
+  @apply inline-block rounded-full;
+  @apply border-2 border-solid border-current border-r-transparent;
   @apply animate-spin align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
+  height: 20px;
+  width: 20px;
   &__wrapper {
     @apply flex items-center justify-center text-gray-300;
   }
-  &--lg {
-    @apply h-12 w-12;
+  &--md {
+    height: 32px;
+    width: 32px;
   }
 }

package/src/index.scss

@@ -5,5 +5,19 @@
 
 // Components
 @import './Spinner/spinner';
+@import './Skeleton/skeleton';
 @import './ResourceBreadcrumb/ResourceBreadcrumb';
 @import './ResourcePicker/resource-picker';
+
+*,
+button {
+  letter-spacing: -0.02em;
+}
+
+svg {
+  @apply text-gray-600;
+}
+
+.p-4\.5 {
+  padding: 18px;
+}