@squiz/resource-browser 1.39.1-alpha.10 → 1.39.1-alpha.13

package/lib/index.css

@@ -526,6 +526,9 @@
 .squiz-rb-scope .block {
   display: block;
 }
+.squiz-rb-scope .inline-block {
+  display: inline-block;
+}
 .squiz-rb-scope .flex {
   display: flex;
 }
@@ -652,6 +655,14 @@
 .squiz-rb-scope .grow-\[3\] {
   flex-grow: 3;
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.squiz-rb-scope .animate-spin {
+  animation: spin 1s linear infinite;
+}
 .squiz-rb-scope .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -742,6 +753,9 @@
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
+.squiz-rb-scope .border-current {
+  border-color: currentColor;
+}
 .squiz-rb-scope .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(224 224 224 / var(--tw-border-opacity));
@@ -850,6 +864,9 @@
 .squiz-rb-scope .text-right {
   text-align: right;
 }
+.squiz-rb-scope .align-\[-0\.125em\] {
+  vertical-align: -0.125em;
+}
 .squiz-rb-scope .text-base {
   font-size: 1rem;
 }
@@ -913,6 +930,10 @@
   --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;
 }
@@ -990,6 +1011,57 @@
   gap: 0.5rem;
   justify-items: center;
 }
+.squiz-rb-scope .spinner {
+  display: inline-block;
+  border-radius: 9999px;
+  border-width: 2px;
+  border-style: solid;
+  border-color: currentColor;
+  border-right-color: transparent;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.squiz-rb-scope .spinner {
+  animation: spin 1s linear infinite;
+  vertical-align: -0.125em;
+}
+@media (prefers-reduced-motion: reduce) {
+  @keyframes spin {
+  }
+  .squiz-rb-scope .spinner {
+    animation: spin 1.5s linear infinite;
+  }
+}
+.squiz-rb-scope .spinner {
+  height: 20px;
+  width: 20px;
+}
+.squiz-rb-scope .spinner__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.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 *,
 .squiz-rb-scope button {
   -webkit-font-smoothing: antialiased;
@@ -1153,6 +1225,16 @@
   --tw-text-opacity: 1;
   color: rgb(148 148 148 / var(--tw-text-opacity));
 }
+@media (prefers-reduced-motion: reduce) {
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .squiz-rb-scope .motion-reduce\:animate-\[spin_1\.5s_linear_infinite\] {
+    animation: spin 1.5s linear infinite;
+  }
+}
 @media not all and (min-width: 768px) {
   .squiz-rb-scope .max-md\:hidden {
     display: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/resource-browser",
-  "version": "1.39.1-alpha.10",
+  "version": "1.39.1-alpha.13",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@mui/icons-material": "5.11.16",
-    "@squiz/dx-json-schema-lib": "1.39.1-alpha.10",
-    "@squiz/generic-browser-lib": "1.39.1-alpha.10",
+    "@squiz/dx-json-schema-lib": "1.39.1-alpha.13",
+    "@squiz/generic-browser-lib": "1.39.1-alpha.13",
     "pretty-bytes": "5.6.0",
     "react-aria": "3.23.1",
     "react-responsive": "9.0.2",
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "0087495957856a1d1b15227f3a450c6261ad5c5a"
+  "gitHead": "21dc639b799f7c61c0f2b827b03bfd65dbf52997"
 }

package/postcss.config.js

@@ -5,6 +5,12 @@ module.exports = {
     require('postcss-nested'),
     require('postcss-prefix-selector')({
       prefix: '.squiz-rb-scope',
+      transform(prefix, selector, prefixedSelector, filePath, rule) {
+        if (selector.match(/(squiz-gb-scope)/)) {
+          return selector;
+        }
+        return prefixedSelector;
+      },
       includeFiles: ['./src/index.scss'],
     }),
   ],

package/src/index.scss

@@ -6,6 +6,8 @@
 // Components
 @import './ResourceBreadcrumb/resource-breadcrumb';
 @import './ResourcePicker/resource-picker';
+@import '@squiz/generic-browser-lib/src/Spinner/spinner';
+@import '@squiz/generic-browser-lib/src/Skeleton/skeleton';
 
 *,
 button {

package/tailwind.config.cjs

@@ -1,11 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    '../generic-browser-lib/src/**/*.{js,ts,jsx,tsx}',
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/flowbite/**/*.js',
-  ],
+  content: {
+    relative: true,
+    files: [
+      '../generic-browser-lib/src/**/*.{js,ts,jsx,tsx,scss}',
+      './index.html',
+      './src/**/*.{js,ts,jsx,tsx}',
+      './node_modules/flowbite/**/*.js',
+    ],
+  },
   theme: {
     extend: {
       borderWidth: {