nfx-ui 0.6.2 → 0.7.1

package/dist/{chunk-BounceLoading-B54QEw0n.mjs → chunk-BounceLoading-C5XE8DKc.mjs}

@@ -1,14 +1,13 @@
-import { memo as i } from "react";
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-const n = "styles-module__loading___bgEAk", h = "styles-module__back___XLPvD", g = "styles-module__front___hSxig", m = "styles-module__dash_682___AQzo6", v = "styles-module__dash_682___AQzo6";
-var c = {
-  loading: n,
-  back: h,
+import { memo as d } from "react";
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+var h = "styles-module__loading___bgEAk", v = "styles-module__back___XLPvD", g = "styles-module__front___hSxig", m = "styles-module__dash_682___AQzo6", n = "styles-module__dash_682___AQzo6", t = {
+  loading: h,
+  back: v,
   front: g,
   dash_682: m,
-  dash682: v
-}, u = i(({ size: r = "medium", className: t }) => {
-  const { width: a, height: o } = {
+  dash682: n
+}, u = d(({ size: o = "medium", className: s }) => {
+  const { width: i, height: l } = {
     small: {
       width: "48px",
       height: "36px"
@@ -21,28 +20,27 @@ var c = {
       width: "96px",
       height: "72px"
     }
-  }[r];
-  return e("div", {
-    className: `${c.loading} ${t || ""}`,
-    children: s("svg", {
-      width: a,
-      height: o,
+  }[o];
+  return /* @__PURE__ */ e("div", {
+    className: `${t.loading} ${s || ""}`,
+    children: /* @__PURE__ */ a("svg", {
+      width: i,
+      height: l,
       viewBox: "0 0 64 48",
-      children: [e("polyline", {
+      children: [/* @__PURE__ */ e("polyline", {
         points: "0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24",
         id: "back",
-        className: c.back
-      }), e("polyline", {
+        className: t.back
+      }), /* @__PURE__ */ e("polyline", {
         points: "0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24",
         id: "front",
-        className: c.front
+        className: t.front
       })]
     })
   });
 });
 u.displayName = "ECGLoading";
-const p = "styles-module__loader___E7OIM", y = "styles-module__truckWrapper___Sk4zX", x = "styles-module__truckBody___j7w2C", f = "styles-module__motion___IiNlW", w = "styles-module__truckTires___4ncTl", k = "styles-module__tiresvg___IBQcN", C = "styles-module__road___sxx-E", N = "styles-module__roadAnimation___yvrHP", W = "styles-module__lampPost___okcN5";
-var l = {
+var p = "styles-module__loader___E7OIM", y = "styles-module__truckWrapper___Sk4zX", x = "styles-module__truckBody___j7w2C", f = "styles-module__motion___IiNlW", w = "styles-module__truckTires___4ncTl", k = "styles-module__tiresvg___IBQcN", C = "styles-module__road___sxx-E", N = "styles-module__roadAnimation___yvrHP", W = "styles-module__lampPost___okcN5", r = {
   loader: p,
   truckWrapper: y,
   truckBody: x,
@@ -52,8 +50,8 @@ var l = {
   road: C,
   roadAnimation: N,
   lampPost: W
-}, b = i(({ size: r = "medium", className: t }) => {
-  const { width: a, height: o, svgScale: _ } = {
+}, b = d(({ size: o = "medium", className: s }) => {
+  const { width: i, height: l, svgScale: _ } = {
     small: {
       width: "150px",
       height: "75px",
@@ -69,44 +67,44 @@ var l = {
       height: "150px",
       svgScale: 1.5
     }
-  }[r];
-  return e("div", {
-    className: `${l.loader} ${t || ""}`,
+  }[o];
+  return /* @__PURE__ */ e("div", {
+    className: `${r.loader} ${s || ""}`,
     style: {
-      width: a,
-      height: o
+      width: i,
+      height: l
     },
-    children: s("div", {
-      className: l.truckWrapper,
+    children: /* @__PURE__ */ a("div", {
+      className: r.truckWrapper,
       style: { transform: `scale(${_})` },
       children: [
-        e("div", {
-          className: l.truckBody,
-          children: s("svg", {
+        /* @__PURE__ */ e("div", {
+          className: r.truckBody,
+          children: /* @__PURE__ */ a("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             fill: "none",
             viewBox: "0 0 198 93",
-            className: l.trucksvg,
+            className: r.trucksvg,
             children: [
-              e("path", {
+              /* @__PURE__ */ e("path", {
                 strokeWidth: "3",
                 stroke: "var(--color-fg-heading)",
                 fill: "var(--color-primary)",
                 d: "M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z"
               }),
-              e("path", {
+              /* @__PURE__ */ e("path", {
                 strokeWidth: "3",
                 stroke: "var(--color-fg-heading)",
                 fill: "var(--color-bg-3)",
                 d: "M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z"
               }),
-              e("path", {
+              /* @__PURE__ */ e("path", {
                 strokeWidth: "2",
                 stroke: "var(--color-fg-heading)",
                 fill: "var(--color-fg-heading)",
                 d: "M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z"
               }),
-              e("rect", {
+              /* @__PURE__ */ e("rect", {
                 strokeWidth: "2",
                 stroke: "var(--color-fg-heading)",
                 fill: "var(--color-warning)",
@@ -116,7 +114,7 @@ var l = {
                 y: "63",
                 x: "187"
               }),
-              e("rect", {
+              /* @__PURE__ */ e("rect", {
                 strokeWidth: "2",
                 stroke: "var(--color-fg-heading)",
                 fill: "var(--color-fg-heading)",
@@ -126,7 +124,7 @@ var l = {
                 y: "81",
                 x: "193"
               }),
-              e("rect", {
+              /* @__PURE__ */ e("rect", {
                 strokeWidth: "3",
                 stroke: "var(--color-fg-heading)",
                 fill: "var(--color-bg-2)",
@@ -136,7 +134,7 @@ var l = {
                 y: "1.5",
                 x: "6.5"
               }),
-              e("rect", {
+              /* @__PURE__ */ e("rect", {
                 strokeWidth: "2",
                 stroke: "var(--color-fg-heading)",
                 fill: "var(--color-bg-2)",
@@ -149,39 +147,39 @@ var l = {
             ]
           })
         }),
-        s("div", {
-          className: l.truckTires,
-          children: [s("svg", {
+        /* @__PURE__ */ a("div", {
+          className: r.truckTires,
+          children: [/* @__PURE__ */ a("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             fill: "none",
             viewBox: "0 0 30 30",
-            className: l.tiresvg,
-            children: [e("circle", {
+            className: r.tiresvg,
+            children: [/* @__PURE__ */ e("circle", {
               strokeWidth: "3",
               stroke: "var(--color-fg-heading)",
               fill: "var(--color-fg-heading)",
               r: "13.5",
               cy: "15",
               cx: "15"
-            }), e("circle", {
+            }), /* @__PURE__ */ e("circle", {
               fill: "var(--color-bg-2)",
               r: "7",
               cy: "15",
               cx: "15"
             })]
-          }), s("svg", {
+          }), /* @__PURE__ */ a("svg", {
             xmlns: "http://www.w3.org/2000/svg",
             fill: "none",
             viewBox: "0 0 30 30",
-            className: l.tiresvg,
-            children: [e("circle", {
+            className: r.tiresvg,
+            children: [/* @__PURE__ */ e("circle", {
               strokeWidth: "3",
               stroke: "var(--color-fg-heading)",
               fill: "var(--color-fg-heading)",
               r: "13.5",
               cy: "15",
               cx: "15"
-            }), e("circle", {
+            }), /* @__PURE__ */ e("circle", {
               fill: "var(--color-bg-2)",
               r: "7",
               cy: "15",
@@ -189,15 +187,15 @@ var l = {
             })]
           })]
         }),
-        e("div", { className: l.road }),
-        e("svg", {
+        /* @__PURE__ */ e("div", { className: r.road }),
+        /* @__PURE__ */ e("svg", {
           xmlSpace: "preserve",
           viewBox: "0 0 453.459 453.459",
           xmlns: "http://www.w3.org/2000/svg",
           version: "1.1",
           fill: "var(--color-fg-heading)",
-          className: l.lampPost,
-          children: e("path", { d: `M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993
+          className: r.lampPost,
+          children: /* @__PURE__ */ e("path", { d: `M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993
 c-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514
 c0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16
 c29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914
@@ -212,25 +210,24 @@ h78.747C231.693,100.736,232.77,106.162,232.77,111.694z` })
   });
 });
 b.displayName = "TruckLoading";
-const B = "styles-module__loader___pFUzL", S = "styles-module__shadow324___sutUe", $ = "styles-module__square___GKjhm", L = "styles-module__jump7456Square___Z-D9b", j = "styles-module__circle___bUpSN", z = "styles-module__jump7456Circle___2AfF7";
-var d = {
+var B = "styles-module__loader___pFUzL", S = "styles-module__shadow324___sutUe", $ = "styles-module__square___GKjhm", L = "styles-module__jump7456Square___Z-D9b", j = "styles-module__circle___bUpSN", z = "styles-module__jump7456Circle___2AfF7", c = {
   loader: B,
   shadow324: S,
   square: $,
   jump7456Square: L,
   circle: j,
   jump7456Circle: z
-}, A = i(({ size: r = "medium", shape: t = "square", className: a }) => {
-  const o = {
+}, A = d(({ size: o = "medium", shape: s = "square", className: i }) => {
+  const l = {
     small: "32px",
     medium: "48px",
     large: "64px"
-  }[r];
-  return e("div", {
-    className: `${d.loader} ${d[t]} ${a || ""}`,
+  }[o];
+  return /* @__PURE__ */ e("div", {
+    className: `${c.loader} ${c[s]} ${i || ""}`,
     style: {
-      width: o,
-      height: o
+      width: l,
+      height: l
     }
   });
 });
@@ -241,4 +238,4 @@ export {
   A as t
 };
 
-//# sourceMappingURL=chunk-BounceLoading-B54QEw0n.mjs.map
+//# sourceMappingURL=chunk-BounceLoading-C5XE8DKc.mjs.map

package/dist/{chunk-BounceLoading-B54QEw0n.mjs.map → chunk-BounceLoading-C5XE8DKc.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chunk-BounceLoading-B54QEw0n.mjs","names":[],"sources":["../src/designs/animations/ECGLoading/styles.module.css","../src/designs/animations/ECGLoading/index.tsx","../src/designs/animations/TruckLoading/styles.module.css","../src/designs/animations/TruckLoading/index.tsx","../src/designs/animations/BounceLoading/styles.module.css","../src/designs/animations/BounceLoading/index.tsx"],"sourcesContent":[".loading {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.loading svg polyline {\r\n    fill: none;\r\n    stroke-width: 3;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.loading svg polyline.back {\r\n    fill: none;\r\n    stroke: var(--color-primary-alpha, rgba(255, 77, 80, 0.2));\r\n}\r\n\r\n.loading svg polyline.front {\r\n    fill: none;\r\n    stroke: var(--color-primary, #ff4d4f);\r\n    stroke-dasharray: 48, 144;\r\n    stroke-dashoffset: 192;\r\n    animation: dash_682 1.4s linear infinite;\r\n}\r\n\r\n@keyframes dash_682 {\r\n    72.5% {\r\n        opacity: 0;\r\n    }\r\n\r\n    to {\r\n        stroke-dashoffset: 0;\r\n    }\r\n}","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface ECGLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst ECGLoading = memo(({ size = \"medium\", className }: ECGLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"48px\", height: \"36px\" },\n    medium: { width: \"64px\", height: \"48px\" },\n    large: { width: \"96px\", height: \"72px\" },\n  };\n\n  const { width, height } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loading} ${className || \"\"}`}>\n      <svg width={width} height={height} viewBox=\"0 0 64 48\">\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"back\" className={styles.back} />\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"front\" className={styles.front} />\n      </svg>\n    </div>\n  );\n});\n\nECGLoading.displayName = \"ECGLoading\";\n\nexport default ECGLoading;\n",".loader {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.truckWrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  overflow-x: hidden;\r\n}\r\n\r\n/* truck upper body */\r\n.truckBody {\r\n  width: 65%;\r\n  height: fit-content;\r\n  margin-bottom: 6px;\r\n  animation: motion 1s linear infinite;\r\n}\r\n\r\n/* truck suspension animation*/\r\n@keyframes motion {\r\n  0% {\r\n    transform: translateY(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(3px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px);\r\n  }\r\n}\r\n\r\n/* truck's tires */\r\n.truckTires {\r\n  width: 65%;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0px 10px 0px 15px;\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n\r\n.tiresvg {\r\n  width: 24px;\r\n}\r\n\r\n.road {\r\n  width: 100%;\r\n  height: 1.5px;\r\n  background-color: var(--color-fg-heading);\r\n  position: relative;\r\n  bottom: 0;\r\n  align-self: flex-end;\r\n  border-radius: 3px;\r\n}\r\n\r\n.road::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 20px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -50%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 10px solid var(--color-bg);\r\n}\r\n\r\n.road::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -65%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 4px solid var(--color-bg);\r\n}\r\n\r\n.lampPost {\r\n  position: absolute;\r\n  bottom: 0;\r\n  right: -90%;\r\n  height: 45%;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n}\r\n\r\n@keyframes roadAnimation {\r\n  0% {\r\n    transform: translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateX(-350px);\r\n  }\r\n}\r\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface TruckLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst TruckLoading = memo(({ size = \"medium\", className }: TruckLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"150px\", height: \"75px\", svgScale: 0.75 },\n    medium: { width: \"200px\", height: \"100px\", svgScale: 1 },\n    large: { width: \"300px\", height: \"150px\", svgScale: 1.5 },\n  };\n\n  const { width, height, svgScale } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loader} ${className || \"\"}`} style={{ width, height }}>\n      <div className={styles.truckWrapper} style={{ transform: `scale(${svgScale})` }}>\n        <div className={styles.truckBody}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 198 93\" className={styles.trucksvg}>\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-primary)\"\n              d=\"M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z\"\n            />\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-bg-3)\"\n              d=\"M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z\"\n            />\n            <path\n              strokeWidth=\"2\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-fg-heading)\"\n              d=\"M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z\"\n            />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-warning)\" rx=\"1\" height=\"7\" width=\"5\" y=\"63\" x=\"187\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" rx=\"1\" height=\"11\" width=\"4\" y=\"81\" x=\"193\" />\n            <rect strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2.5\" height=\"90\" width=\"121\" y=\"1.5\" x=\"6.5\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2\" height=\"4\" width=\"6\" y=\"84\" x=\"1\" />\n          </svg>\n        </div>\n        <div className={styles.truckTires}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n        </div>\n        <div className={styles.road} />\n\n        <svg\n          xmlSpace=\"preserve\"\n          viewBox=\"0 0 453.459 453.459\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          version=\"1.1\"\n          fill=\"var(--color-fg-heading)\"\n          className={styles.lampPost}\n        >\n          <path\n            d=\"M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993\nc-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514\nc0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16\nc29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914\nh-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75\nv-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795\nV196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z\nM232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017\nh78.747C231.693,100.736,232.77,106.162,232.77,111.694z\"\n          />\n        </svg>\n      </div>\n    </div>\n  );\n});\n\nTruckLoading.displayName = \"TruckLoading\";\n\nexport default TruckLoading;\n",".loader {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.loader::before {\n  content: \"\";\n  width: 100%;\n  height: 5px;\n  background: var(--color-primary);\n  opacity: 0.3;\n  position: absolute;\n  top: calc(100% + 12px);\n  left: 0;\n  border-radius: 50%;\n  animation: shadow324 0.5s linear infinite;\n}\n\n.loader::after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  background: var(--color-primary);\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n/* 正方形样式 */\n.square::after {\n  border-radius: 4px;\n  animation: jump7456Square 0.5s linear infinite;\n}\n\n/* 圆形样式 */\n.circle::after {\n  border-radius: 50%;\n  animation: jump7456Circle 0.5s linear infinite;\n}\n\n@keyframes jump7456Square {\n  15% {\n    border-bottom-right-radius: 3px;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes jump7456Circle {\n  15% {\n    border-bottom-right-radius: 50%;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes shadow324 {\n  0%,\n  100% {\n    transform: scale(1, 1);\n  }\n\n  50% {\n    transform: scale(1.2, 1);\n  }\n}\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface BounceLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  shape?: \"square\" | \"circle\";\n  className?: string;\n}\n\nconst BounceLoading = memo(({ size = \"medium\", shape = \"square\", className }: BounceLoadingProps) => {\n  const sizeMap = {\n    small: \"32px\",\n    medium: \"48px\",\n    large: \"64px\",\n  };\n\n  const loaderSize = sizeMap[size];\n\n  return <div className={`${styles.loader} ${styles[shape]} ${className || \"\"}`} style={{ width: loaderSize, height: loaderSize }} />;\n});\n\nBounceLoading.displayName = \"BounceLoading\";\n\nexport default BounceLoading;\n"],"mappings":"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"}
+{"version":3,"file":"chunk-BounceLoading-C5XE8DKc.mjs","names":[],"sources":["../src/designs/animations/ECGLoading/styles.module.css","../src/designs/animations/ECGLoading/index.tsx","../src/designs/animations/TruckLoading/styles.module.css","../src/designs/animations/TruckLoading/index.tsx","../src/designs/animations/BounceLoading/styles.module.css","../src/designs/animations/BounceLoading/index.tsx"],"sourcesContent":[".loading {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.loading svg polyline {\r\n    fill: none;\r\n    stroke-width: 3;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.loading svg polyline.back {\r\n    fill: none;\r\n    stroke: var(--color-primary-alpha, rgba(255, 77, 80, 0.2));\r\n}\r\n\r\n.loading svg polyline.front {\r\n    fill: none;\r\n    stroke: var(--color-primary, #ff4d4f);\r\n    stroke-dasharray: 48, 144;\r\n    stroke-dashoffset: 192;\r\n    animation: dash_682 1.4s linear infinite;\r\n}\r\n\r\n@keyframes dash_682 {\r\n    72.5% {\r\n        opacity: 0;\r\n    }\r\n\r\n    to {\r\n        stroke-dashoffset: 0;\r\n    }\r\n}","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface ECGLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst ECGLoading = memo(({ size = \"medium\", className }: ECGLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"48px\", height: \"36px\" },\n    medium: { width: \"64px\", height: \"48px\" },\n    large: { width: \"96px\", height: \"72px\" },\n  };\n\n  const { width, height } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loading} ${className || \"\"}`}>\n      <svg width={width} height={height} viewBox=\"0 0 64 48\">\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"back\" className={styles.back} />\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"front\" className={styles.front} />\n      </svg>\n    </div>\n  );\n});\n\nECGLoading.displayName = \"ECGLoading\";\n\nexport default ECGLoading;\n",".loader {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.truckWrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  overflow-x: hidden;\r\n}\r\n\r\n/* truck upper body */\r\n.truckBody {\r\n  width: 65%;\r\n  height: fit-content;\r\n  margin-bottom: 6px;\r\n  animation: motion 1s linear infinite;\r\n}\r\n\r\n/* truck suspension animation*/\r\n@keyframes motion {\r\n  0% {\r\n    transform: translateY(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(3px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px);\r\n  }\r\n}\r\n\r\n/* truck's tires */\r\n.truckTires {\r\n  width: 65%;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0px 10px 0px 15px;\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n\r\n.tiresvg {\r\n  width: 24px;\r\n}\r\n\r\n.road {\r\n  width: 100%;\r\n  height: 1.5px;\r\n  background-color: var(--color-fg-heading);\r\n  position: relative;\r\n  bottom: 0;\r\n  align-self: flex-end;\r\n  border-radius: 3px;\r\n}\r\n\r\n.road::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 20px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -50%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 10px solid var(--color-bg);\r\n}\r\n\r\n.road::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -65%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 4px solid var(--color-bg);\r\n}\r\n\r\n.lampPost {\r\n  position: absolute;\r\n  bottom: 0;\r\n  right: -90%;\r\n  height: 45%;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n}\r\n\r\n@keyframes roadAnimation {\r\n  0% {\r\n    transform: translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateX(-350px);\r\n  }\r\n}\r\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface TruckLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst TruckLoading = memo(({ size = \"medium\", className }: TruckLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"150px\", height: \"75px\", svgScale: 0.75 },\n    medium: { width: \"200px\", height: \"100px\", svgScale: 1 },\n    large: { width: \"300px\", height: \"150px\", svgScale: 1.5 },\n  };\n\n  const { width, height, svgScale } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loader} ${className || \"\"}`} style={{ width, height }}>\n      <div className={styles.truckWrapper} style={{ transform: `scale(${svgScale})` }}>\n        <div className={styles.truckBody}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 198 93\" className={styles.trucksvg}>\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-primary)\"\n              d=\"M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z\"\n            />\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-bg-3)\"\n              d=\"M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z\"\n            />\n            <path\n              strokeWidth=\"2\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-fg-heading)\"\n              d=\"M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z\"\n            />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-warning)\" rx=\"1\" height=\"7\" width=\"5\" y=\"63\" x=\"187\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" rx=\"1\" height=\"11\" width=\"4\" y=\"81\" x=\"193\" />\n            <rect strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2.5\" height=\"90\" width=\"121\" y=\"1.5\" x=\"6.5\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2\" height=\"4\" width=\"6\" y=\"84\" x=\"1\" />\n          </svg>\n        </div>\n        <div className={styles.truckTires}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n        </div>\n        <div className={styles.road} />\n\n        <svg\n          xmlSpace=\"preserve\"\n          viewBox=\"0 0 453.459 453.459\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          version=\"1.1\"\n          fill=\"var(--color-fg-heading)\"\n          className={styles.lampPost}\n        >\n          <path\n            d=\"M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993\nc-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514\nc0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16\nc29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914\nh-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75\nv-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795\nV196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z\nM232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017\nh78.747C231.693,100.736,232.77,106.162,232.77,111.694z\"\n          />\n        </svg>\n      </div>\n    </div>\n  );\n});\n\nTruckLoading.displayName = \"TruckLoading\";\n\nexport default TruckLoading;\n",".loader {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.loader::before {\n  content: \"\";\n  width: 100%;\n  height: 5px;\n  background: var(--color-primary);\n  opacity: 0.3;\n  position: absolute;\n  top: calc(100% + 12px);\n  left: 0;\n  border-radius: 50%;\n  animation: shadow324 0.5s linear infinite;\n}\n\n.loader::after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  background: var(--color-primary);\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n/* 正方形样式 */\n.square::after {\n  border-radius: 4px;\n  animation: jump7456Square 0.5s linear infinite;\n}\n\n/* 圆形样式 */\n.circle::after {\n  border-radius: 50%;\n  animation: jump7456Circle 0.5s linear infinite;\n}\n\n@keyframes jump7456Square {\n  15% {\n    border-bottom-right-radius: 3px;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes jump7456Circle {\n  15% {\n    border-bottom-right-radius: 50%;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes shadow324 {\n  0%,\n  100% {\n    transform: scale(1, 1);\n  }\n\n  50% {\n    transform: scale(1.2, 1);\n  }\n}\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface BounceLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  shape?: \"square\" | \"circle\";\n  className?: string;\n}\n\nconst BounceLoading = memo(({ size = \"medium\", shape = \"square\", className }: BounceLoadingProps) => {\n  const sizeMap = {\n    small: \"32px\",\n    medium: \"48px\",\n    large: \"64px\",\n  };\n\n  const loaderSize = sizeMap[size];\n\n  return <div className={`${styles.loader} ${styles[shape]} ${className || \"\"}`} style={{ width: loaderSize, height: loaderSize }} />;\n});\n\nBounceLoading.displayName = \"BounceLoading\";\n\nexport default BounceLoading;\n"],"mappings":";;;;;;;;GCSM,IAAa,EAAA,CAAM,EAAE,MAAA,IAAO,UAAU,WAAA,EAAA,MAAiC;AAO3E,QAAM,EAAE,OAAA,GAAO,QAAA,EAAA,IANC;AAAA,IACd,OAAO;AAAA,MAAE,OAAO;AAAA,MAAQ,QAAQ;AAAA;IAChC,QAAQ;AAAA,MAAE,OAAO;AAAA,MAAQ,QAAQ;AAAA;IACjC,OAAO;AAAA,MAAE,OAAO;AAAA,MAAQ,QAAQ;AAAA;IAGA,CAAA;AAElC,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,GAAG,EAAO,OAAA,IAAW,KAAa,EAAA;AAAA,cAChD,gBAAA,EAAC,OAAD;AAAA,MAAY,OAAA;AAAA,MAAe,QAAA;AAAA,MAAQ,SAAQ;AAAA,gBAA3C,CACE,gBAAA,EAAC,YAAD;AAAA,QAAU,QAAO;AAAA,QAAyD,IAAG;AAAA,QAAO,WAAW,EAAO;AAAA,OAAQ,GAC9G,gBAAA,EAAC,YAAD;AAAA,QAAU,QAAO;AAAA,QAAyD,IAAG;AAAA,QAAQ,WAAW,EAAO;AAAA,OAAS,CAAA;AAAA;GAE9G;;AAIV,EAAW,cAAc;;;;;;;;;;;GEnBnB,IAAe,EAAA,CAAM,EAAE,MAAA,IAAO,UAAU,WAAA,EAAA,MAAmC;AAO/E,QAAM,EAAE,OAAA,GAAO,QAAA,GAAQ,UAAA,EAAA,IANP;AAAA,IACd,OAAO;AAAA,MAAE,OAAO;AAAA,MAAS,QAAQ;AAAA,MAAQ,UAAU;AAAA;IACnD,QAAQ;AAAA,MAAE,OAAO;AAAA,MAAS,QAAQ;AAAA,MAAS,UAAU;AAAA;IACrD,OAAO;AAAA,MAAE,OAAO;AAAA,MAAS,QAAQ;AAAA,MAAS,UAAU;AAAA;IAGV,CAAA;AAE5C,SACE,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,GAAG,EAAO,MAAA,IAAU,KAAa,EAAA;AAAA,IAAM,OAAO;AAAA,MAAE,OAAA;AAAA,MAAO,QAAA;AAAA;cACrE,gBAAA,EAAC,OAAD;AAAA,MAAK,WAAW,EAAO;AAAA,MAAc,OAAO,EAAE,WAAW,SAAS,CAAA,IAAS;AAAA,gBAA3E;AAAA,QACE,gBAAA,EAAC,OAAD;AAAA,UAAK,WAAW,EAAO;AAAA,oBACrB,gBAAA,EAAC,OAAD;AAAA,YAAK,OAAM;AAAA,YAA6B,MAAK;AAAA,YAAO,SAAQ;AAAA,YAAa,WAAW,EAAO;AAAA,sBAA3F;AAAA,cACE,gBAAA,EAAC,QAAD;AAAA,gBACE,aAAY;AAAA,gBACZ,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,GAAE;AAAA,eACF;AAAA,cACF,gBAAA,EAAC,QAAD;AAAA,gBACE,aAAY;AAAA,gBACZ,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,GAAE;AAAA,eACF;AAAA,cACF,gBAAA,EAAC,QAAD;AAAA,gBACE,aAAY;AAAA,gBACZ,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,GAAE;AAAA,eACF;AAAA,cACF,gBAAA,EAAC,QAAD;AAAA,gBAAM,aAAY;AAAA,gBAAI,QAAO;AAAA,gBAA0B,MAAK;AAAA,gBAAuB,IAAG;AAAA,gBAAI,QAAO;AAAA,gBAAI,OAAM;AAAA,gBAAI,GAAE;AAAA,gBAAK,GAAE;AAAA,eAAQ;AAAA,cAChI,gBAAA,EAAC,QAAD;AAAA,gBAAM,aAAY;AAAA,gBAAI,QAAO;AAAA,gBAA0B,MAAK;AAAA,gBAA0B,IAAG;AAAA,gBAAI,QAAO;AAAA,gBAAK,OAAM;AAAA,gBAAI,GAAE;AAAA,gBAAK,GAAE;AAAA,eAAQ;AAAA,cACpI,gBAAA,EAAC,QAAD;AAAA,gBAAM,aAAY;AAAA,gBAAI,QAAO;AAAA,gBAA0B,MAAK;AAAA,gBAAoB,IAAG;AAAA,gBAAM,QAAO;AAAA,gBAAK,OAAM;AAAA,gBAAM,GAAE;AAAA,gBAAM,GAAE;AAAA,eAAQ;AAAA,cACnI,gBAAA,EAAC,QAAD;AAAA,gBAAM,aAAY;AAAA,gBAAI,QAAO;AAAA,gBAA0B,MAAK;AAAA,gBAAoB,IAAG;AAAA,gBAAI,QAAO;AAAA,gBAAI,OAAM;AAAA,gBAAI,GAAE;AAAA,gBAAK,GAAE;AAAA,eAAM;AAAA;;SAEzH;AAAA,QACN,gBAAA,EAAC,OAAD;AAAA,UAAK,WAAW,EAAO;AAAA,oBAAvB,CACE,gBAAA,EAAC,OAAD;AAAA,YAAK,OAAM;AAAA,YAA6B,MAAK;AAAA,YAAO,SAAQ;AAAA,YAAY,WAAW,EAAO;AAAA,sBAA1F,CACE,gBAAA,EAAC,UAAD;AAAA,cAAQ,aAAY;AAAA,cAAI,QAAO;AAAA,cAA0B,MAAK;AAAA,cAA0B,GAAE;AAAA,cAAO,IAAG;AAAA,cAAK,IAAG;AAAA,aAAO,GACnH,gBAAA,EAAC,UAAD;AAAA,cAAQ,MAAK;AAAA,cAAoB,GAAE;AAAA,cAAI,IAAG;AAAA,cAAK,IAAG;AAAA,aAAO,CAAA;AAAA,cAE3D,gBAAA,EAAC,OAAD;AAAA,YAAK,OAAM;AAAA,YAA6B,MAAK;AAAA,YAAO,SAAQ;AAAA,YAAY,WAAW,EAAO;AAAA,sBAA1F,CACE,gBAAA,EAAC,UAAD;AAAA,cAAQ,aAAY;AAAA,cAAI,QAAO;AAAA,cAA0B,MAAK;AAAA,cAA0B,GAAE;AAAA,cAAO,IAAG;AAAA,cAAK,IAAG;AAAA,aAAO,GACnH,gBAAA,EAAC,UAAD;AAAA,cAAQ,MAAK;AAAA,cAAoB,GAAE;AAAA,cAAI,IAAG;AAAA,cAAK,IAAG;AAAA,aAAO,CAAA;AAAA;;QAG7D,gBAAA,EAAC,OAAD,EAAK,WAAW,EAAO,KAAA,CAAQ;AAAA,QAE/B,gBAAA,EAAC,OAAD;AAAA,UACE,UAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,WAAW,EAAO;AAAA,oBAElB,gBAAA,EAAC,QAAD,EACE,GAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wDAAA,CASF;AAAA,SACE;AAAA;;GAEJ;;AAIV,EAAa,cAAc;;;;;;;;GE1ErB,IAAgB,EAAA,CAAM,EAAE,MAAA,IAAO,UAAU,OAAA,IAAQ,UAAU,WAAA,EAAA,MAAoC;AAOnG,QAAM,IANU;AAAA,IACd,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,OAAO;AAAA,IAGkB,CAAA;AAE3B,SAAO,gBAAA,EAAC,OAAD;AAAA,IAAK,WAAW,GAAG,EAAO,MAAA,IAAU,EAAO,CAAA,CAAA,IAAU,KAAa,EAAA;AAAA,IAAM,OAAO;AAAA,MAAE,OAAO;AAAA,MAAY,QAAQ;AAAA;GAAgB;;AAGrI,EAAc,cAAc"}

package/dist/chunk-BounceLoading-CwvDT5HF.cjs

@@ -0,0 +1,11 @@
+const P=require("./chunk-chunk-BFrxaqQT.cjs");let i=require("react"),e=require("react/jsx-runtime");var g="styles-module__loading___bgEAk",v="styles-module__back___XLPvD",m="styles-module__front___hSxig",u="styles-module__dash_682___AQzo6",x="styles-module__dash_682___AQzo6",t={loading:g,back:v,front:m,dash_682:u,dash682:x},d=(0,i.memo)(({size:s="medium",className:a})=>{const{width:o,height:l}={small:{width:"48px",height:"36px"},medium:{width:"64px",height:"48px"},large:{width:"96px",height:"72px"}}[s];return(0,e.jsx)("div",{className:`${t.loading} ${a||""}`,children:(0,e.jsxs)("svg",{width:o,height:l,viewBox:"0 0 64 48",children:[(0,e.jsx)("polyline",{points:"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24",id:"back",className:t.back}),(0,e.jsx)("polyline",{points:"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24",id:"front",className:t.front})]})})});d.displayName="ECGLoading";var p="styles-module__loader___E7OIM",y="styles-module__truckWrapper___Sk4zX",f="styles-module__truckBody___j7w2C",k="styles-module__motion___IiNlW",w="styles-module__truckTires___4ncTl",j="styles-module__tiresvg___IBQcN",C="styles-module__road___sxx-E",N="styles-module__roadAnimation___yvrHP",b="styles-module__lampPost___okcN5",r={loader:p,truckWrapper:y,truckBody:f,motion:k,truckTires:w,tiresvg:j,road:C,roadAnimation:N,lampPost:b},_=(0,i.memo)(({size:s="medium",className:a})=>{const{width:o,height:l,svgScale:h}={small:{width:"150px",height:"75px",svgScale:.75},medium:{width:"200px",height:"100px",svgScale:1},large:{width:"300px",height:"150px",svgScale:1.5}}[s];return(0,e.jsx)("div",{className:`${r.loader} ${a||""}`,style:{width:o,height:l},children:(0,e.jsxs)("div",{className:r.truckWrapper,style:{transform:`scale(${h})`},children:[(0,e.jsx)("div",{className:r.truckBody,children:(0,e.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 198 93",className:r.trucksvg,children:[(0,e.jsx)("path",{strokeWidth:"3",stroke:"var(--color-fg-heading)",fill:"var(--color-primary)",d:"M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z"}),(0,e.jsx)("path",{strokeWidth:"3",stroke:"var(--color-fg-heading)",fill:"var(--color-bg-3)",d:"M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z"}),(0,e.jsx)("path",{strokeWidth:"2",stroke:"var(--color-fg-heading)",fill:"var(--color-fg-heading)",d:"M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z"}),(0,e.jsx)("rect",{strokeWidth:"2",stroke:"var(--color-fg-heading)",fill:"var(--color-warning)",rx:"1",height:"7",width:"5",y:"63",x:"187"}),(0,e.jsx)("rect",{strokeWidth:"2",stroke:"var(--color-fg-heading)",fill:"var(--color-fg-heading)",rx:"1",height:"11",width:"4",y:"81",x:"193"}),(0,e.jsx)("rect",{strokeWidth:"3",stroke:"var(--color-fg-heading)",fill:"var(--color-bg-2)",rx:"2.5",height:"90",width:"121",y:"1.5",x:"6.5"}),(0,e.jsx)("rect",{strokeWidth:"2",stroke:"var(--color-fg-heading)",fill:"var(--color-bg-2)",rx:"2",height:"4",width:"6",y:"84",x:"1"})]})}),(0,e.jsxs)("div",{className:r.truckTires,children:[(0,e.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 30 30",className:r.tiresvg,children:[(0,e.jsx)("circle",{strokeWidth:"3",stroke:"var(--color-fg-heading)",fill:"var(--color-fg-heading)",r:"13.5",cy:"15",cx:"15"}),(0,e.jsx)("circle",{fill:"var(--color-bg-2)",r:"7",cy:"15",cx:"15"})]}),(0,e.jsxs)("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 30 30",className:r.tiresvg,children:[(0,e.jsx)("circle",{strokeWidth:"3",stroke:"var(--color-fg-heading)",fill:"var(--color-fg-heading)",r:"13.5",cy:"15",cx:"15"}),(0,e.jsx)("circle",{fill:"var(--color-bg-2)",r:"7",cy:"15",cx:"15"})]})]}),(0,e.jsx)("div",{className:r.road}),(0,e.jsx)("svg",{xmlSpace:"preserve",viewBox:"0 0 453.459 453.459",xmlns:"http://www.w3.org/2000/svg",version:"1.1",fill:"var(--color-fg-heading)",className:r.lampPost,children:(0,e.jsx)("path",{d:`M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993
+c-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514
+c0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16
+c29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914
+h-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75
+v-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795
+V196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z
+M232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017
+h78.747C231.693,100.736,232.77,106.162,232.77,111.694z`})})]})})});_.displayName="TruckLoading";var L="styles-module__loader___pFUzL",W="styles-module__shadow324___sutUe",B="styles-module__square___GKjhm",S="styles-module__jump7456Square___Z-D9b",$="styles-module__circle___bUpSN",q="styles-module__jump7456Circle___2AfF7",c={loader:L,shadow324:W,square:B,jump7456Square:S,circle:$,jump7456Circle:q},n=(0,i.memo)(({size:s="medium",shape:a="square",className:o})=>{const l={small:"32px",medium:"48px",large:"64px"}[s];return(0,e.jsx)("div",{className:`${c.loader} ${c[a]} ${o||""}`,style:{width:l,height:l}})});n.displayName="BounceLoading";Object.defineProperty(exports,"BounceLoading",{enumerable:!0,get:function(){return n}});Object.defineProperty(exports,"ECGLoading",{enumerable:!0,get:function(){return d}});Object.defineProperty(exports,"TruckLoading",{enumerable:!0,get:function(){return _}});
+
+//# sourceMappingURL=chunk-BounceLoading-CwvDT5HF.cjs.map

package/dist/{chunk-BounceLoading-C6n4BZVJ.cjs.map → chunk-BounceLoading-CwvDT5HF.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"chunk-BounceLoading-C6n4BZVJ.cjs","names":[],"sources":["../src/designs/animations/ECGLoading/styles.module.css","../src/designs/animations/ECGLoading/index.tsx","../src/designs/animations/TruckLoading/styles.module.css","../src/designs/animations/TruckLoading/index.tsx","../src/designs/animations/BounceLoading/styles.module.css","../src/designs/animations/BounceLoading/index.tsx"],"sourcesContent":[".loading {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.loading svg polyline {\r\n    fill: none;\r\n    stroke-width: 3;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.loading svg polyline.back {\r\n    fill: none;\r\n    stroke: var(--color-primary-alpha, rgba(255, 77, 80, 0.2));\r\n}\r\n\r\n.loading svg polyline.front {\r\n    fill: none;\r\n    stroke: var(--color-primary, #ff4d4f);\r\n    stroke-dasharray: 48, 144;\r\n    stroke-dashoffset: 192;\r\n    animation: dash_682 1.4s linear infinite;\r\n}\r\n\r\n@keyframes dash_682 {\r\n    72.5% {\r\n        opacity: 0;\r\n    }\r\n\r\n    to {\r\n        stroke-dashoffset: 0;\r\n    }\r\n}","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface ECGLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst ECGLoading = memo(({ size = \"medium\", className }: ECGLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"48px\", height: \"36px\" },\n    medium: { width: \"64px\", height: \"48px\" },\n    large: { width: \"96px\", height: \"72px\" },\n  };\n\n  const { width, height } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loading} ${className || \"\"}`}>\n      <svg width={width} height={height} viewBox=\"0 0 64 48\">\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"back\" className={styles.back} />\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"front\" className={styles.front} />\n      </svg>\n    </div>\n  );\n});\n\nECGLoading.displayName = \"ECGLoading\";\n\nexport default ECGLoading;\n",".loader {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.truckWrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  overflow-x: hidden;\r\n}\r\n\r\n/* truck upper body */\r\n.truckBody {\r\n  width: 65%;\r\n  height: fit-content;\r\n  margin-bottom: 6px;\r\n  animation: motion 1s linear infinite;\r\n}\r\n\r\n/* truck suspension animation*/\r\n@keyframes motion {\r\n  0% {\r\n    transform: translateY(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(3px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px);\r\n  }\r\n}\r\n\r\n/* truck's tires */\r\n.truckTires {\r\n  width: 65%;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0px 10px 0px 15px;\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n\r\n.tiresvg {\r\n  width: 24px;\r\n}\r\n\r\n.road {\r\n  width: 100%;\r\n  height: 1.5px;\r\n  background-color: var(--color-fg-heading);\r\n  position: relative;\r\n  bottom: 0;\r\n  align-self: flex-end;\r\n  border-radius: 3px;\r\n}\r\n\r\n.road::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 20px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -50%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 10px solid var(--color-bg);\r\n}\r\n\r\n.road::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -65%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 4px solid var(--color-bg);\r\n}\r\n\r\n.lampPost {\r\n  position: absolute;\r\n  bottom: 0;\r\n  right: -90%;\r\n  height: 45%;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n}\r\n\r\n@keyframes roadAnimation {\r\n  0% {\r\n    transform: translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateX(-350px);\r\n  }\r\n}\r\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface TruckLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst TruckLoading = memo(({ size = \"medium\", className }: TruckLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"150px\", height: \"75px\", svgScale: 0.75 },\n    medium: { width: \"200px\", height: \"100px\", svgScale: 1 },\n    large: { width: \"300px\", height: \"150px\", svgScale: 1.5 },\n  };\n\n  const { width, height, svgScale } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loader} ${className || \"\"}`} style={{ width, height }}>\n      <div className={styles.truckWrapper} style={{ transform: `scale(${svgScale})` }}>\n        <div className={styles.truckBody}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 198 93\" className={styles.trucksvg}>\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-primary)\"\n              d=\"M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z\"\n            />\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-bg-3)\"\n              d=\"M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z\"\n            />\n            <path\n              strokeWidth=\"2\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-fg-heading)\"\n              d=\"M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z\"\n            />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-warning)\" rx=\"1\" height=\"7\" width=\"5\" y=\"63\" x=\"187\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" rx=\"1\" height=\"11\" width=\"4\" y=\"81\" x=\"193\" />\n            <rect strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2.5\" height=\"90\" width=\"121\" y=\"1.5\" x=\"6.5\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2\" height=\"4\" width=\"6\" y=\"84\" x=\"1\" />\n          </svg>\n        </div>\n        <div className={styles.truckTires}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n        </div>\n        <div className={styles.road} />\n\n        <svg\n          xmlSpace=\"preserve\"\n          viewBox=\"0 0 453.459 453.459\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          version=\"1.1\"\n          fill=\"var(--color-fg-heading)\"\n          className={styles.lampPost}\n        >\n          <path\n            d=\"M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993\nc-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514\nc0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16\nc29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914\nh-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75\nv-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795\nV196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z\nM232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017\nh78.747C231.693,100.736,232.77,106.162,232.77,111.694z\"\n          />\n        </svg>\n      </div>\n    </div>\n  );\n});\n\nTruckLoading.displayName = \"TruckLoading\";\n\nexport default TruckLoading;\n",".loader {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.loader::before {\n  content: \"\";\n  width: 100%;\n  height: 5px;\n  background: var(--color-primary);\n  opacity: 0.3;\n  position: absolute;\n  top: calc(100% + 12px);\n  left: 0;\n  border-radius: 50%;\n  animation: shadow324 0.5s linear infinite;\n}\n\n.loader::after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  background: var(--color-primary);\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n/* 正方形样式 */\n.square::after {\n  border-radius: 4px;\n  animation: jump7456Square 0.5s linear infinite;\n}\n\n/* 圆形样式 */\n.circle::after {\n  border-radius: 50%;\n  animation: jump7456Circle 0.5s linear infinite;\n}\n\n@keyframes jump7456Square {\n  15% {\n    border-bottom-right-radius: 3px;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes jump7456Circle {\n  15% {\n    border-bottom-right-radius: 50%;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes shadow324 {\n  0%,\n  100% {\n    transform: scale(1, 1);\n  }\n\n  50% {\n    transform: scale(1.2, 1);\n  }\n}\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface BounceLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  shape?: \"square\" | \"circle\";\n  className?: string;\n}\n\nconst BounceLoading = memo(({ size = \"medium\", shape = \"square\", className }: BounceLoadingProps) => {\n  const sizeMap = {\n    small: \"32px\",\n    medium: \"48px\",\n    large: \"64px\",\n  };\n\n  const loaderSize = sizeMap[size];\n\n  return <div className={`${styles.loader} ${styles[shape]} ${className || \"\"}`} style={{ width: loaderSize, height: loaderSize }} />;\n});\n\nBounceLoading.displayName = \"BounceLoading\";\n\nexport default BounceLoading;\n"],"mappings":"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"}
+{"version":3,"file":"chunk-BounceLoading-CwvDT5HF.cjs","names":[],"sources":["../src/designs/animations/ECGLoading/styles.module.css","../src/designs/animations/ECGLoading/index.tsx","../src/designs/animations/TruckLoading/styles.module.css","../src/designs/animations/TruckLoading/index.tsx","../src/designs/animations/BounceLoading/styles.module.css","../src/designs/animations/BounceLoading/index.tsx"],"sourcesContent":[".loading {\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n}\r\n\r\n.loading svg polyline {\r\n    fill: none;\r\n    stroke-width: 3;\r\n    stroke-linecap: round;\r\n    stroke-linejoin: round;\r\n}\r\n\r\n.loading svg polyline.back {\r\n    fill: none;\r\n    stroke: var(--color-primary-alpha, rgba(255, 77, 80, 0.2));\r\n}\r\n\r\n.loading svg polyline.front {\r\n    fill: none;\r\n    stroke: var(--color-primary, #ff4d4f);\r\n    stroke-dasharray: 48, 144;\r\n    stroke-dashoffset: 192;\r\n    animation: dash_682 1.4s linear infinite;\r\n}\r\n\r\n@keyframes dash_682 {\r\n    72.5% {\r\n        opacity: 0;\r\n    }\r\n\r\n    to {\r\n        stroke-dashoffset: 0;\r\n    }\r\n}","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface ECGLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst ECGLoading = memo(({ size = \"medium\", className }: ECGLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"48px\", height: \"36px\" },\n    medium: { width: \"64px\", height: \"48px\" },\n    large: { width: \"96px\", height: \"72px\" },\n  };\n\n  const { width, height } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loading} ${className || \"\"}`}>\n      <svg width={width} height={height} viewBox=\"0 0 64 48\">\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"back\" className={styles.back} />\n        <polyline points=\"0.157 23.954, 14 23.954, 21.843 48, 43 0, 50 24, 64 24\" id=\"front\" className={styles.front} />\n      </svg>\n    </div>\n  );\n});\n\nECGLoading.displayName = \"ECGLoading\";\n\nexport default ECGLoading;\n",".loader {\r\n  width: fit-content;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.truckWrapper {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: relative;\r\n  align-items: center;\r\n  justify-content: flex-end;\r\n  overflow-x: hidden;\r\n}\r\n\r\n/* truck upper body */\r\n.truckBody {\r\n  width: 65%;\r\n  height: fit-content;\r\n  margin-bottom: 6px;\r\n  animation: motion 1s linear infinite;\r\n}\r\n\r\n/* truck suspension animation*/\r\n@keyframes motion {\r\n  0% {\r\n    transform: translateY(0px);\r\n  }\r\n  50% {\r\n    transform: translateY(3px);\r\n  }\r\n  100% {\r\n    transform: translateY(0px);\r\n  }\r\n}\r\n\r\n/* truck's tires */\r\n.truckTires {\r\n  width: 65%;\r\n  height: fit-content;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  padding: 0px 10px 0px 15px;\r\n  position: absolute;\r\n  bottom: 0;\r\n}\r\n\r\n.tiresvg {\r\n  width: 24px;\r\n}\r\n\r\n.road {\r\n  width: 100%;\r\n  height: 1.5px;\r\n  background-color: var(--color-fg-heading);\r\n  position: relative;\r\n  bottom: 0;\r\n  align-self: flex-end;\r\n  border-radius: 3px;\r\n}\r\n\r\n.road::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 20px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -50%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 10px solid var(--color-bg);\r\n}\r\n\r\n.road::after {\r\n  content: \"\";\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 100%;\r\n  background-color: var(--color-fg-heading);\r\n  right: -65%;\r\n  border-radius: 3px;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n  border-left: 4px solid var(--color-bg);\r\n}\r\n\r\n.lampPost {\r\n  position: absolute;\r\n  bottom: 0;\r\n  right: -90%;\r\n  height: 45%;\r\n  animation: roadAnimation 1.4s linear infinite;\r\n}\r\n\r\n@keyframes roadAnimation {\r\n  0% {\r\n    transform: translateX(0px);\r\n  }\r\n  100% {\r\n    transform: translateX(-350px);\r\n  }\r\n}\r\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface TruckLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  className?: string;\n}\n\nconst TruckLoading = memo(({ size = \"medium\", className }: TruckLoadingProps) => {\n  const sizeMap = {\n    small: { width: \"150px\", height: \"75px\", svgScale: 0.75 },\n    medium: { width: \"200px\", height: \"100px\", svgScale: 1 },\n    large: { width: \"300px\", height: \"150px\", svgScale: 1.5 },\n  };\n\n  const { width, height, svgScale } = sizeMap[size];\n\n  return (\n    <div className={`${styles.loader} ${className || \"\"}`} style={{ width, height }}>\n      <div className={styles.truckWrapper} style={{ transform: `scale(${svgScale})` }}>\n        <div className={styles.truckBody}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 198 93\" className={styles.trucksvg}>\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-primary)\"\n              d=\"M135 22.5H177.264C178.295 22.5 179.22 23.133 179.594 24.0939L192.33 56.8443C192.442 57.1332 192.5 57.4404 192.5 57.7504V89C192.5 90.3807 191.381 91.5 190 91.5H135C133.619 91.5 132.5 90.3807 132.5 89V25C132.5 23.6193 133.619 22.5 135 22.5Z\"\n            />\n            <path\n              strokeWidth=\"3\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-bg-3)\"\n              d=\"M146 33.5H181.741C182.779 33.5 183.709 34.1415 184.078 35.112L190.538 52.112C191.16 53.748 189.951 55.5 188.201 55.5H146C144.619 55.5 143.5 54.3807 143.5 53V36C143.5 34.6193 144.619 33.5 146 33.5Z\"\n            />\n            <path\n              strokeWidth=\"2\"\n              stroke=\"var(--color-fg-heading)\"\n              fill=\"var(--color-fg-heading)\"\n              d=\"M150 65C150 65.39 149.763 65.8656 149.127 66.2893C148.499 66.7083 147.573 67 146.5 67C145.427 67 144.501 66.7083 143.873 66.2893C143.237 65.8656 143 65.39 143 65C143 64.61 143.237 64.1344 143.873 63.7107C144.501 63.2917 145.427 63 146.5 63C147.573 63 148.499 63.2917 149.127 63.7107C149.763 64.1344 150 64.61 150 65Z\"\n            />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-warning)\" rx=\"1\" height=\"7\" width=\"5\" y=\"63\" x=\"187\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" rx=\"1\" height=\"11\" width=\"4\" y=\"81\" x=\"193\" />\n            <rect strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2.5\" height=\"90\" width=\"121\" y=\"1.5\" x=\"6.5\" />\n            <rect strokeWidth=\"2\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-bg-2)\" rx=\"2\" height=\"4\" width=\"6\" y=\"84\" x=\"1\" />\n          </svg>\n        </div>\n        <div className={styles.truckTires}>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n          <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 30 30\" className={styles.tiresvg}>\n            <circle strokeWidth=\"3\" stroke=\"var(--color-fg-heading)\" fill=\"var(--color-fg-heading)\" r=\"13.5\" cy=\"15\" cx=\"15\" />\n            <circle fill=\"var(--color-bg-2)\" r=\"7\" cy=\"15\" cx=\"15\" />\n          </svg>\n        </div>\n        <div className={styles.road} />\n\n        <svg\n          xmlSpace=\"preserve\"\n          viewBox=\"0 0 453.459 453.459\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          version=\"1.1\"\n          fill=\"var(--color-fg-heading)\"\n          className={styles.lampPost}\n        >\n          <path\n            d=\"M252.882,0c-37.781,0-68.686,29.953-70.245,67.358h-6.917v8.954c-26.109,2.163-45.463,10.011-45.463,19.366h9.993\nc-1.65,5.146-2.507,10.54-2.507,16.017c0,28.956,23.558,52.514,52.514,52.514c28.956,0,52.514-23.558,52.514-52.514\nc0-5.478-0.856-10.872-2.506-16.017h9.992c0-9.354-19.352-17.204-45.463-19.366v-8.954h-6.149C200.189,38.779,223.924,16,252.882,16\nc29.952,0,54.32,24.368,54.32,54.32c0,28.774-11.078,37.009-25.105,47.437c-17.444,12.968-37.216,27.667-37.216,78.884v113.914\nh-0.797c-5.068,0-9.174,4.108-9.174,9.177c0,2.844,1.293,5.383,3.321,7.066c-3.432,27.933-26.851,95.744-8.226,115.459v11.202h45.75\nv-11.202c18.625-19.715-4.794-87.527-8.227-115.459c2.029-1.683,3.322-4.223,3.322-7.066c0-5.068-4.107-9.177-9.176-9.177h-0.795\nV196.641c0-43.174,14.942-54.283,30.762-66.043c14.793-10.997,31.559-23.461,31.559-60.277C323.202,31.545,291.656,0,252.882,0z\nM232.77,111.694c0,23.442-19.071,42.514-42.514,42.514c-23.442,0-42.514-19.072-42.514-42.514c0-5.531,1.078-10.957,3.141-16.017\nh78.747C231.693,100.736,232.77,106.162,232.77,111.694z\"\n          />\n        </svg>\n      </div>\n    </div>\n  );\n});\n\nTruckLoading.displayName = \"TruckLoading\";\n\nexport default TruckLoading;\n",".loader {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.loader::before {\n  content: \"\";\n  width: 100%;\n  height: 5px;\n  background: var(--color-primary);\n  opacity: 0.3;\n  position: absolute;\n  top: calc(100% + 12px);\n  left: 0;\n  border-radius: 50%;\n  animation: shadow324 0.5s linear infinite;\n}\n\n.loader::after {\n  content: \"\";\n  width: 100%;\n  height: 100%;\n  background: var(--color-primary);\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n/* 正方形样式 */\n.square::after {\n  border-radius: 4px;\n  animation: jump7456Square 0.5s linear infinite;\n}\n\n/* 圆形样式 */\n.circle::after {\n  border-radius: 50%;\n  animation: jump7456Circle 0.5s linear infinite;\n}\n\n@keyframes jump7456Square {\n  15% {\n    border-bottom-right-radius: 3px;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes jump7456Circle {\n  15% {\n    border-bottom-right-radius: 50%;\n  }\n\n  25% {\n    transform: translateY(9px) rotate(22.5deg);\n  }\n\n  50% {\n    transform: translateY(18px) scale(1, 0.9) rotate(45deg);\n    border-bottom-right-radius: 40px;\n  }\n\n  75% {\n    transform: translateY(9px) rotate(67.5deg);\n  }\n\n  100% {\n    transform: translateY(0) rotate(90deg);\n  }\n}\n\n@keyframes shadow324 {\n  0%,\n  100% {\n    transform: scale(1, 1);\n  }\n\n  50% {\n    transform: scale(1.2, 1);\n  }\n}\n","import { memo } from \"react\";\n\nimport styles from \"./styles.module.css\";\n\ninterface BounceLoadingProps {\n  size?: \"small\" | \"medium\" | \"large\";\n  shape?: \"square\" | \"circle\";\n  className?: string;\n}\n\nconst BounceLoading = memo(({ size = \"medium\", shape = \"square\", className }: BounceLoadingProps) => {\n  const sizeMap = {\n    small: \"32px\",\n    medium: \"48px\",\n    large: \"64px\",\n  };\n\n  const loaderSize = sizeMap[size];\n\n  return <div className={`${styles.loader} ${styles[shape]} ${className || \"\"}`} style={{ width: loaderSize, height: loaderSize }} />;\n});\n\nBounceLoading.displayName = \"BounceLoading\";\n\nexport default BounceLoading;\n"],"mappings":"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"}