@cgi-learning-hub/ui 1.11.0-dev.1764841886 → 1.11.0-dev.1765193488

package/dist/index.cjs.js

@@ -57564,14 +57564,72 @@ const ImagePicker = ({
     }
   );
 };
+const StyledLoader = styled(Box)({
+  padding: "0 auto",
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  overflow: "hidden"
+});
+const StyledLoaderInner = styled(Box)({
+  "& label": {
+    fontSize: 16,
+    opacity: 0,
+    display: "inline-block",
+    verticalAlign: "middle",
+    "&:nth-of-type(4)": {
+      animation: "dotSlide 3s 200ms infinite ease-in-out"
+    },
+    "&:nth-of-type(3)": {
+      animation: "dotSlide 3s 300ms infinite ease-in-out"
+    },
+    "&:nth-of-type(2)": {
+      animation: "dotSlide 3s 400ms infinite ease-in-out"
+    },
+    "&:nth-of-type(1)": {
+      animation: "dotSlide 3s 500ms infinite ease-in-out"
+    }
+  },
+  "@keyframes dotSlide": {
+    "0%": { opacity: 0, transform: "translateX(-100px)" },
+    "33%": { opacity: 1, transform: "translateX(0px)" },
+    "66%": { opacity: 1, transform: "translateX(0px)" },
+    "100%": { opacity: 0, transform: "translateX(100px)" }
+  }
+});
 const Loader = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "cs-loader", color: "primary.main", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "cs-loader-inner", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledLoader, { color: "primary.main", ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(StyledLoaderInner, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
     /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
     /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
     /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" })
   ] }) });
 };
+const StyledLoaderBackdropInner = styled(Box)({
+  textAlign: "center",
+  "& label": {
+    fontSize: 20,
+    opacity: 0,
+    display: "inline-block",
+    "&:nth-of-type(4)": {
+      animation: "dotSlide 3s 200ms infinite ease-in-out"
+    },
+    "&:nth-of-type(3)": {
+      animation: "dotSlide 3s 300ms infinite ease-in-out"
+    },
+    "&:nth-of-type(2)": {
+      animation: "dotSlide 3s 400ms infinite ease-in-out"
+    },
+    "&:nth-of-type(1)": {
+      animation: "dotSlide 3s 500ms infinite ease-in-out"
+    }
+  },
+  "@keyframes dotSlide": {
+    "0%": { opacity: 0, transform: "translateX(-300px)" },
+    "33%": { opacity: 1, transform: "translateX(0px)" },
+    "66%": { opacity: 1, transform: "translateX(0px)" },
+    "100%": { opacity: 0, transform: "translateX(300px)" }
+  }
+});
 const LoaderBackdrop = ({
   slotProps = {}
 }) => {
@@ -57581,20 +57639,12 @@ const LoaderBackdrop = ({
       open: true,
       sx: { bgcolor: "background.default" },
       ...slotProps.backdrop,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Box,
-        {
-          className: "cs-loader-backdrop-inner",
-          color: "primary.main",
-          ...slotProps.loader,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
-            /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
-            /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
-            /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxRuntime.jsxs(StyledLoaderBackdropInner, { color: "primary.main", ...slotProps.loader, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" }),
+        /* @__PURE__ */ jsxRuntime.jsx("label", { children: "●" })
+      ] })
     }
   );
 };

package/dist/index.es.js

@@ -57547,14 +57547,72 @@ const ImagePicker = ({
     }
   );
 };
+const StyledLoader = styled(Box)({
+  padding: "0 auto",
+  textAlign: "center",
+  whiteSpace: "nowrap",
+  overflow: "hidden"
+});
+const StyledLoaderInner = styled(Box)({
+  "& label": {
+    fontSize: 16,
+    opacity: 0,
+    display: "inline-block",
+    verticalAlign: "middle",
+    "&:nth-of-type(4)": {
+      animation: "dotSlide 3s 200ms infinite ease-in-out"
+    },
+    "&:nth-of-type(3)": {
+      animation: "dotSlide 3s 300ms infinite ease-in-out"
+    },
+    "&:nth-of-type(2)": {
+      animation: "dotSlide 3s 400ms infinite ease-in-out"
+    },
+    "&:nth-of-type(1)": {
+      animation: "dotSlide 3s 500ms infinite ease-in-out"
+    }
+  },
+  "@keyframes dotSlide": {
+    "0%": { opacity: 0, transform: "translateX(-100px)" },
+    "33%": { opacity: 1, transform: "translateX(0px)" },
+    "66%": { opacity: 1, transform: "translateX(0px)" },
+    "100%": { opacity: 0, transform: "translateX(100px)" }
+  }
+});
 const Loader = (props) => {
-  return /* @__PURE__ */ jsx(Box, { className: "cs-loader", color: "primary.main", ...props, children: /* @__PURE__ */ jsxs(Box, { className: "cs-loader-inner", children: [
+  return /* @__PURE__ */ jsx(StyledLoader, { color: "primary.main", ...props, children: /* @__PURE__ */ jsxs(StyledLoaderInner, { children: [
     /* @__PURE__ */ jsx("label", { children: "●" }),
     /* @__PURE__ */ jsx("label", { children: "●" }),
     /* @__PURE__ */ jsx("label", { children: "●" }),
     /* @__PURE__ */ jsx("label", { children: "●" })
   ] }) });
 };
+const StyledLoaderBackdropInner = styled(Box)({
+  textAlign: "center",
+  "& label": {
+    fontSize: 20,
+    opacity: 0,
+    display: "inline-block",
+    "&:nth-of-type(4)": {
+      animation: "dotSlide 3s 200ms infinite ease-in-out"
+    },
+    "&:nth-of-type(3)": {
+      animation: "dotSlide 3s 300ms infinite ease-in-out"
+    },
+    "&:nth-of-type(2)": {
+      animation: "dotSlide 3s 400ms infinite ease-in-out"
+    },
+    "&:nth-of-type(1)": {
+      animation: "dotSlide 3s 500ms infinite ease-in-out"
+    }
+  },
+  "@keyframes dotSlide": {
+    "0%": { opacity: 0, transform: "translateX(-300px)" },
+    "33%": { opacity: 1, transform: "translateX(0px)" },
+    "66%": { opacity: 1, transform: "translateX(0px)" },
+    "100%": { opacity: 0, transform: "translateX(300px)" }
+  }
+});
 const LoaderBackdrop = ({
   slotProps = {}
 }) => {
@@ -57564,20 +57622,12 @@ const LoaderBackdrop = ({
       open: true,
       sx: { bgcolor: "background.default" },
       ...slotProps.backdrop,
-      children: /* @__PURE__ */ jsxs(
-        Box,
-        {
-          className: "cs-loader-backdrop-inner",
-          color: "primary.main",
-          ...slotProps.loader,
-          children: [
-            /* @__PURE__ */ jsx("label", { children: "●" }),
-            /* @__PURE__ */ jsx("label", { children: "●" }),
-            /* @__PURE__ */ jsx("label", { children: "●" }),
-            /* @__PURE__ */ jsx("label", { children: "●" })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxs(StyledLoaderBackdropInner, { color: "primary.main", ...slotProps.loader, children: [
+        /* @__PURE__ */ jsx("label", { children: "●" }),
+        /* @__PURE__ */ jsx("label", { children: "●" }),
+        /* @__PURE__ */ jsx("label", { children: "●" }),
+        /* @__PURE__ */ jsx("label", { children: "●" })
+      ] })
     }
   );
 };

package/dist/ui.css

@@ -11,141 +11,3 @@
   --toastify-text-color-light: var(--theme-palette-text-primary);
   --toastify-text-color-dark: var(--theme-palette-common-white);
 }
-.cs-loader {
-  padding: 0 auto;
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.cs-loader-inner label {
-  font-size: 16px;
-  opacity: 0;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-@keyframes lol {
-  0% {
-    opacity: 0;
-    transform: translateX(-100px);
-  }
-  33% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(100px);
-  }
-}
-
-@-webkit-keyframes lol {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-100px);
-  }
-  33% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translateX(100px);
-  }
-}
-
-.cs-loader-inner label:nth-child(4) {
-  -webkit-animation: lol 3s 200ms infinite ease-in-out;
-  animation: lol 3s 200ms infinite ease-in-out;
-}
-
-.cs-loader-inner label:nth-child(3) {
-  -webkit-animation: lol 3s 300ms infinite ease-in-out;
-  animation: lol 3s 300ms infinite ease-in-out;
-}
-
-.cs-loader-inner label:nth-child(2) {
-  -webkit-animation: lol 3s 400ms infinite ease-in-out;
-  animation: lol 3s 400ms infinite ease-in-out;
-}
-
-.cs-loader-inner label:nth-child(1) {
-  -webkit-animation: lol 3s 500ms infinite ease-in-out;
-  animation: lol 3s 500ms infinite ease-in-out;
-}
-.cs-loader-backdrop-inner {
-  text-align: center;
-}
-
-.cs-loader-backdrop-inner label {
-  font-size: 20px;
-  opacity: 0;
-  display: inline-block;
-}
-
-@keyframes lol-backdrop {
-  0% {
-    opacity: 0;
-    transform: translateX(-300px);
-  }
-  33% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    transform: translateX(300px);
-  }
-}
-
-@-webkit-keyframes lol-backdrop {
-  0% {
-    opacity: 0;
-    -webkit-transform: translateX(-300px);
-  }
-  33% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  66% {
-    opacity: 1;
-    -webkit-transform: translateX(0px);
-  }
-  100% {
-    opacity: 0;
-    -webkit-transform: translateX(300px);
-  }
-}
-
-.cs-loader-backdrop-inner label:nth-child(4) {
-  -webkit-animation: lol-backdrop 3s 200ms infinite ease-in-out;
-  animation: lol-backdrop 3s 200ms infinite ease-in-out;
-}
-
-.cs-loader-backdrop-inner label:nth-child(3) {
-  -webkit-animation: lol-backdrop 3s 300ms infinite ease-in-out;
-  animation: lol-backdrop 3s 300ms infinite ease-in-out;
-}
-
-.cs-loader-backdrop-inner label:nth-child(2) {
-  -webkit-animation: lol-backdrop 3s 400ms infinite ease-in-out;
-  animation: lol-backdrop 3s 400ms infinite ease-in-out;
-}
-
-.cs-loader-backdrop-inner label:nth-child(1) {
-  -webkit-animation: lol-backdrop 3s 500ms infinite ease-in-out;
-  animation: lol-backdrop 3s 500ms infinite ease-in-out;
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.11.0-dev.1764841886",
+  "version": "1.11.0-dev.1765193488",
   "description": "React component library for Hub's design system, built on Material UI with custom and extended components.",
   "keywords": [
     "cgi-learning-hub",