@dgshahr/ui-kit 1.8.1 → 1.9.0

package/dist/Form/FileUploader/index.mjs

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as e, jsxs as n, Fragment as R } from "react/jsx-runtime";
-import { c as d } from "../../clsx-OuTLNxxd.js";
-import { useState as A, Fragment as D } from "react";
-import v from "../../Button/index.mjs";
-import { F as x } from "../../FieldBottomInfo-C_QkvgNP.js";
-import E from "../../Progress/Doughnut/index.mjs";
-import { I as H } from "../../IconEye-DATABBb3.js";
+import { jsx as i, jsxs as u, Fragment as z } from "react/jsx-runtime";
+import { c as n } from "../../clsx-OuTLNxxd.js";
+import { useState as H, Fragment as U } from "react";
+import w from "../../Button/index.mjs";
+import { F as N } from "../../FieldBottomInfo-Bb3s_zkd.js";
+import O from "../../Progress/Doughnut/index.mjs";
+import { I as T } from "../../IconEye-DATABBb3.js";
 import '../../assets/styles.css';/* empty css                    */
-const j = (t) => /* @__PURE__ */ e(
+const V = (e) => /* @__PURE__ */ i(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -15,8 +15,8 @@ const j = (t) => /* @__PURE__ */ e(
     height: "1em",
     fill: "none",
     viewBox: "0 0 24 24",
-    ...t,
-    children: /* @__PURE__ */ e(
+    ...e,
+    children: /* @__PURE__ */ i(
       "path",
       {
         fill: "currentColor",
@@ -24,7 +24,27 @@ const j = (t) => /* @__PURE__ */ e(
       }
     )
   }
-), z = () => /* @__PURE__ */ n(
+), W = (e) => /* @__PURE__ */ i(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 16 16",
+    ...e,
+    children: /* @__PURE__ */ i(
+      "path",
+      {
+        stroke: "#2852E4",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        d: "M8 3.333v9.334M3.333 8h9.334"
+      }
+    )
+  }
+), Z = () => /* @__PURE__ */ u(
   "svg",
   {
     className: "dgsuikit:!mb-0 dgsuikit:absolute dgsuikit:bottom-0 dgsuikit:left-1/2 dgsuikit:-translate-x-1/2",
@@ -34,7 +54,7 @@ const j = (t) => /* @__PURE__ */ e(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "rect",
         {
           width: "33.7825",
@@ -47,7 +67,7 @@ const j = (t) => /* @__PURE__ */ e(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "ellipse",
         {
           cx: "3.75361",
@@ -61,7 +81,7 @@ const j = (t) => /* @__PURE__ */ e(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M61.1192 26.3159L64.8095 27.0022",
@@ -71,7 +91,7 @@ const j = (t) => /* @__PURE__ */ e(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "rect",
         {
           width: "33.7586",
@@ -85,7 +105,7 @@ const j = (t) => /* @__PURE__ */ e(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "ellipse",
         {
           cx: "3.75096",
@@ -99,7 +119,7 @@ const j = (t) => /* @__PURE__ */ e(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M31.0227 18.3353L34.7034 17.6127",
@@ -109,7 +129,7 @@ const j = (t) => /* @__PURE__ */ e(
           strokeLinejoin: "round"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           d: "M32.4822 25.627L36.1629 24.9045",
@@ -121,86 +141,116 @@ const j = (t) => /* @__PURE__ */ e(
       )
     ]
   }
-), b = "dgsuikit:h-[190px] dgsuikit:w-[330px]", M = "dgsuikit:size-[120px]", F = "dgsuikit:!absolute dgsuikit:top-1/2 dgsuikit:left-1/2 dgsuikit:-translate-y-1/2 dgsuikit:-translate-x-1/2", T = "dgsuikit:ring-offset-1 dgsuikit:ring-offset-transparent dgsuikit:has-[:focus]:ring-offset-white dgsuikit:ring-[3px] dgsuikit:ring-transparent dgsuikit:has-[:focus]:ring-primary-300", P = "dgsuikit:!border-error-500 dgsuikit:ring-4 dgsuikit:!ring-error-50", _ = "dgsuikit:!border-primary-500 dgsuikit:ring-4 dgsuikit:!ring-gray-100 dgsuikit:!bg-gray-50", U = "dgsuikit:has-[:disabled]:opacity-50", w = {
+), E = "dgsuikit:h-[190px] dgsuikit:w-[330px]", R = "dgsuikit:size-[120px]", F = "dgsuikit:size-[96px]", A = "dgsuikit:!absolute dgsuikit:top-1/2 dgsuikit:left-1/2 dgsuikit:-translate-y-1/2 dgsuikit:-translate-x-1/2", G = "dgsuikit:ring-offset-1 dgsuikit:ring-offset-transparent dgsuikit:has-[:focus]:ring-offset-white dgsuikit:ring-[3px] dgsuikit:ring-transparent dgsuikit:has-[:focus]:ring-primary-300", Y = "dgsuikit:!border-error-500 dgsuikit:ring-4 dgsuikit:!ring-error-50", K = "dgsuikit:!border-primary-500 dgsuikit:ring-4 dgsuikit:!ring-gray-100 dgsuikit:!bg-gray-50", $ = "dgsuikit:has-[:disabled]:opacity-50", q = {
   default: "dgsuikit:bg-primary-50 dgsuikit:text-primary-500",
   loading: "dgsuikit:bg-gray-500 dgsuikit:text-white",
   error: "dgsuikit:bg-error-50 dgsuikit:text-error-500",
   warning: "dgsuikit:bg-warning-50 dgsuikit:text-warning-700"
-};
-function V(t) {
-  const i = "dgsuikit:relative dgsuikit:z-10";
-  return typeof t == "boolean" ? /* @__PURE__ */ e(
-    v,
+}, J = {
+  default: "dgsuikit:bg-gray-800/60",
+  loading: "dgsuikit:bg-gray-800/60",
+  error: "dgsuikit:bg-red-500/60",
+  warning: "dgsuikit:bg-warning-500/60"
+}, Q = "dgsuikit:space-y-4 dgsuikit:p-4 dgsuikit:flex dgsuikit:flex-col dgsuikit:justify-center dgsuikit:items-center", X = "dgsuikit:p-2 dgsuikit:pb-6 dgsuikit:pt-4 dgsuikit:flex dgsuikit:flex-col dgsuikit:gap-1 dgsuikit:justify-between dgsuikit:items-center";
+function i0(e, t) {
+  const r = "dgsuikit:relative dgsuikit:z-10";
+  return typeof e == "boolean" ? t ? /* @__PURE__ */ i(
+    w,
     {
-      className: i,
-      rightIcon: /* @__PURE__ */ e(j, {}),
+      size: "small",
+      variant: "secondary",
+      rightIcon: /* @__PURE__ */ i(W, {}),
+      className: n(
+        r,
+        "dgsuikit:!w-7 dgsuikit:!h-7 dgsuikit:mb-0 dgsuikit:text-primary-500 dgsuikit:bg-primary-50",
+        "dgsuikit:flex dgsuikit:justify-center dgsuikit:items-center dgsuikit:rounded-md dgsuikit:!p-0"
+      )
+    }
+  ) : /* @__PURE__ */ i(
+    w,
+    {
+      className: r,
+      rightIcon: /* @__PURE__ */ i(V, {}),
       size: "small"
     }
-  ) : /* @__PURE__ */ e(
-    v,
+  ) : /* @__PURE__ */ i(
+    w,
     {
-      ...t,
-      className: d(i, t?.className),
-      children: t?.children
+      ...e,
+      className: n(r, e?.className),
+      children: e?.children
     }
   );
 }
-const O = (t) => {
+const t0 = (e) => {
   const {
-    title: i,
+    title: t,
     description: r,
-    button: a = !0,
+    button: o = !0,
     hideIcon: s,
-    isError: o,
-    className: u,
-    onChange: l,
-    helperProps: c,
-    previewtype: m,
-    ...f
-  } = t, [k, g] = A(!1), h = m === "grid";
-  function S(p) {
-    p.preventDefault(), g(!1), l(p.dataTransfer.files?.[0], p.dataTransfer.files);
+    isError: d,
+    className: g,
+    onChange: a,
+    helperProps: l,
+    disabled: m,
+    previewType: k = "default",
+    ...c
+  } = e, [p, h] = H(!1), f = k === "grid", C = k === "compact";
+  function y(v) {
+    v.preventDefault(), h(!1), a(v.dataTransfer.files?.[0], v.dataTransfer.files);
   }
-  return /* @__PURE__ */ n("div", { className: "dgsuikit:space-y-2", children: [
-    /* @__PURE__ */ n(
-      "div",
+  const b = C ? X : Q;
+  let L = E;
+  f ? L = R : C && (L = F);
+  const j = n(
+    "dgsuikit:relative dgsuikit:text-center dgsuikit:bg-white dgsuikit:transition-all",
+    "dgsuikit:border dgsuikit:border-gray-300 dgsuikit:border-dashed dgsuikit:rounded-xl",
+    "dgsuikit:hover:ring-4 dgsuikit:hover:ring-gray-100",
+    G,
+    $,
+    (d || l?.errorMessage) && Y,
+    p && K,
+    b,
+    L,
+    g
+  );
+  return /* @__PURE__ */ u("div", { className: "dgsuikit:space-y-2", children: [
+    /* @__PURE__ */ u("div", { className: j, children: [
+      t && /* @__PURE__ */ i(
+        "p",
+        {
+          className: n(
+            C ? "dgsuikit:font-caption-demibold dgsuikit:line-clamp-1 dgsuikit:text-primary-500 [font-feature-settings:inherit]" : "dgsuikit:font-p1-medium dgsuikit:text-primary-500 [font-feature-settings:inherit]"
+          ),
+          children: t
+        }
+      ),
+      !C && r && /* @__PURE__ */ i("pre", { className: "dgsuikit:font-caption-demibold dgsuikit:text-primary-200 [font-feature-settings:inherit]", children: r }),
+      o ? i0(o, C) : null,
+      !s && /* @__PURE__ */ i(Z, {}),
+      /* @__PURE__ */ i(
+        "input",
+        {
+          className: "dgsuikit:!mb-0 dgsuikit:absolute dgsuikit:inset-0 dgsuikit:size-full dgsuikit:opacity-0 dgsuikit:cursor-pointer dgsuikit:disabled:cursor-not-allowed dgsuikit:z-10",
+          type: "file",
+          onDragEnter: () => h(!0),
+          onDragLeave: () => h(!1),
+          onDrop: y,
+          onChange: (v) => a(v.currentTarget.files?.[0], v.currentTarget.files),
+          disabled: m,
+          ...c
+        }
+      )
+    ] }),
+    !f && Object.keys(l ?? {}).length > 0 && /* @__PURE__ */ i(
+      N,
       {
-        className: d(
-          "dgsuikit:relative dgsuikit:text-center dgsuikit:bg-white dgsuikit:transition-all",
-          "dgsuikit:space-y-4 dgsuikit:p-4",
-          "dgsuikit:flex dgsuikit:flex-col dgsuikit:justify-center dgsuikit:items-center",
-          "dgsuikit:border dgsuikit:border-gray-300 dgsuikit:border-dashed dgsuikit:rounded-lg",
-          "dgsuikit:hover:ring-4 dgsuikit:hover:ring-gray-100",
-          T,
-          U,
-          (o || c?.errorMessage) && P,
-          k && _,
-          h ? M : b,
-          u
-        ),
-        children: [
-          i ? /* @__PURE__ */ e("p", { className: "dgsuikit:font-p1-medium dgsuikit:text-primary-500 [font-feature-settings:inherit]", children: i }) : null,
-          r ? /* @__PURE__ */ e("pre", { className: "dgsuikit:font-caption-demibold dgsuikit:text-primary-200 [font-feature-settings:inherit]", children: r }) : null,
-          a ? V(a) : null,
-          !s && /* @__PURE__ */ e(z, {}),
-          /* @__PURE__ */ e(
-            "input",
-            {
-              className: "dgsuikit:!mb-0 dgsuikit:absolute dgsuikit:inset-0 dgsuikit:size-full dgsuikit:opacity-0 dgsuikit:cursor-pointer dgsuikit:disabled:cursor-not-allowed dgsuikit:z-10",
-              type: "file",
-              onDragEnter: () => g(!0),
-              onDragLeave: () => g(!1),
-              onDrop: S,
-              onChange: (p) => l(p.currentTarget.files?.[0], p.currentTarget.files),
-              ...f
-            }
-          )
-        ]
+        ...l,
+        disabled: m
       }
-    ),
-    !h && Object.keys(c ?? {}).length > 0 && /* @__PURE__ */ e(x, { ...c })
+    )
   ] });
-}, B = (t) => /* @__PURE__ */ n(
+}, _ = (e) => /* @__PURE__ */ u(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -208,9 +258,9 @@ const O = (t) => {
     height: "1em",
     fill: "none",
     viewBox: "0 0 24 24",
-    ...t,
+    ...e,
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           fill: "currentColor",
@@ -219,7 +269,7 @@ const O = (t) => {
           clipRule: "evenodd"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           fill: "currentColor",
@@ -230,7 +280,7 @@ const O = (t) => {
       )
     ]
   }
-), I = (t) => /* @__PURE__ */ e(
+), D = (e) => /* @__PURE__ */ i(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -238,8 +288,8 @@ const O = (t) => {
     height: "1em",
     fill: "none",
     viewBox: "0 0 24 24",
-    ...t,
-    children: /* @__PURE__ */ e(
+    ...e,
+    children: /* @__PURE__ */ i(
       "path",
       {
         fill: "currentColor",
@@ -249,65 +299,65 @@ const O = (t) => {
       }
     )
   }
-), W = "data:image/svg+xml,%3csvg%20viewBox='0%200%2096%2096'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20rx='8'%20fill='%23F1F5F9'/%3e%3cpath%20d='M45.9176%2066.4015C45.2%2066.4011%2044.4904%2066.2499%2043.8352%2065.9575C43.18%2065.6655%2042.5932%2065.2387%2042.1136%2064.7055L38.7415%2060.9495L34.5496%2065.3495C33.9972%2065.9051%2033.2495%2066.2227%2032.4661%2066.2343C31.6827%2066.2455%2030.9259%2065.9503%2030.3574%2065.4111C29.789%2064.8719%2029.4539%2064.1319%2029.4241%2063.3487C29.3942%2062.5659%2029.6718%2061.8023%2030.1975%2061.2215L35.0457%2056.1095C36.066%2055.1195%2037.4205%2054.5487%2038.8415%2054.5095C39.5477%2054.5215%2040.2436%2054.6795%2040.886%2054.9735C41.5284%2055.2675%2042.1028%2055.6907%2042.5736%2056.2175L45.9056%2059.9215L53.5576%2050.8895C54.0196%2050.3439%2054.5908%2049.9011%2055.234%2049.5899C55.8776%2049.2783%2056.5788%2049.1051%2057.2936%2049.0815C58.0104%2049.0551%2058.7244%2049.1819%2059.3888%2049.4527C60.0528%2049.7239%2060.6516%2050.1331%2061.1456%2050.6535L67.7736%2057.5135C68.326%2058.0863%2068.6288%2058.8551%2068.6144%2059.6511C68.6004%2060.4471%2068.2704%2061.2047%2067.6976%2061.7575C67.1248%2062.3103%2066.3556%2062.6127%2065.5596%2062.5983C64.764%2062.5843%2064.0064%2062.2543%2063.4536%2061.6815L57.5016%2055.5135L49.8296%2064.5695C49.3552%2065.1291%2048.766%2065.5807%2048.1024%2065.8931C47.4384%2066.2059%2046.7152%2066.3723%2045.9816%2066.3815L45.9176%2066.4015Z'%20fill='%23748297'/%3e%3cpath%20d='M65.0008%2087H33.1767C30.8059%2086.9584%2028.4666%2086.4488%2026.2933%2085.5004C24.1201%2084.5524%2022.1557%2083.184%2020.5128%2081.4744C18.87%2079.7644%2017.5809%2077.7468%2016.7201%2075.5376C15.8593%2073.3284%2015.4437%2070.9704%2015.4967%2068.6V26.628C15.6171%2021.9306%2017.5604%2017.4643%2020.9154%2014.1742C24.2704%2010.8842%2028.7737%209.0286%2033.4725%209H56.1448C57.6536%209.00228%2059.1468%209.3084%2060.5352%209.90008C61.9232%2010.4918%2063.178%2011.357%2064.2248%2012.444L79.3848%2028.24C81.3932%2030.3232%2082.512%2033.1063%2082.5044%2036V68.652C82.5536%2073.3884%2080.7516%2077.9568%2077.482%2081.384C74.2124%2084.8108%2069.734%2086.826%2065.0008%2087ZM33.4845%2015C30.3566%2015.0102%2027.3555%2016.2368%2025.1159%2018.4204C22.8763%2020.6041%2021.5738%2023.5733%2021.4845%2026.7V68.652C21.4387%2070.2356%2021.7073%2071.8124%2022.2741%2073.292C22.8409%2074.7712%2023.6948%2076.124%2024.787%2077.2712C25.8792%2078.4188%2027.1878%2079.3388%2028.6373%2079.9784C30.0869%2080.6176%2031.6487%2080.9632%2033.2325%2080.996H64.8684C68.0276%2080.8528%2071.0072%2079.4864%2073.1768%2077.1856C75.346%2074.8848%2076.5352%2071.83%2076.4924%2068.668V36C76.4924%2034.6581%2075.9736%2033.3682%2075.0444%2032.4L59.8804%2016.6C59.3956%2016.0947%2058.814%2015.6925%2058.1696%2015.4176C57.5256%2015.1426%2056.8328%2015.0006%2056.1328%2015H33.4725H33.4845Z'%20fill='%23748297'/%3e%3cpath%20d='M79.2498%2037.062H68.2938C64.7902%2037.0461%2061.4354%2035.6443%2058.9622%2033.1628C56.4886%2030.6812%2055.0981%2027.3216%2055.0938%2023.818V12.25C55.0938%2011.4544%2055.4101%2010.6913%2055.9725%2010.1287C56.5353%209.56604%2057.2982%209.25%2058.0938%209.25C58.8893%209.25%2059.6525%209.56604%2060.2153%2010.1287C60.7777%2010.6913%2061.0938%2011.4544%2061.0938%2012.25V23.818C61.0938%2025.7316%2061.8509%2027.5675%2063.2001%2028.9248C64.5489%2030.282%2066.3802%2031.0504%2068.2938%2031.062H79.2417C80.0373%2031.062%2080.8005%2031.3781%2081.3633%2031.9407C81.9257%2032.5033%2082.2417%2033.2663%2082.2417%2034.062C82.2417%2034.8576%2081.9257%2035.6207%2081.3633%2036.1833C80.8005%2036.7459%2080.0373%2037.062%2079.2417%2037.062H79.2498Z'%20fill='%23748297'/%3e%3cpath%20d='M37.9659%2048.8068C40.1992%2048.8068%2042.01%2046.9959%2042.01%2044.7627C42.01%2042.5291%2040.1992%2040.7188%2037.9659%2040.7188C35.7324%2040.7188%2033.9219%2042.5291%2033.9219%2044.7627C33.9219%2046.9959%2035.7324%2048.8068%2037.9659%2048.8068Z'%20fill='%23748297'/%3e%3c/svg%3e", y = (t) => {
-  const { file: i, children: r, className: a } = t, s = i.file ? URL.createObjectURL(i.file) : i.src ?? "";
-  function o(u) {
-    const l = u.currentTarget;
-    l.src = W, l.classList.add("dgsuikit:bg-gray-100");
+), e0 = "data:image/svg+xml,%3csvg%20viewBox='0%200%2096%2096'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20rx='8'%20fill='%23F1F5F9'/%3e%3cpath%20d='M45.9176%2066.4015C45.2%2066.4011%2044.4904%2066.2499%2043.8352%2065.9575C43.18%2065.6655%2042.5932%2065.2387%2042.1136%2064.7055L38.7415%2060.9495L34.5496%2065.3495C33.9972%2065.9051%2033.2495%2066.2227%2032.4661%2066.2343C31.6827%2066.2455%2030.9259%2065.9503%2030.3574%2065.4111C29.789%2064.8719%2029.4539%2064.1319%2029.4241%2063.3487C29.3942%2062.5659%2029.6718%2061.8023%2030.1975%2061.2215L35.0457%2056.1095C36.066%2055.1195%2037.4205%2054.5487%2038.8415%2054.5095C39.5477%2054.5215%2040.2436%2054.6795%2040.886%2054.9735C41.5284%2055.2675%2042.1028%2055.6907%2042.5736%2056.2175L45.9056%2059.9215L53.5576%2050.8895C54.0196%2050.3439%2054.5908%2049.9011%2055.234%2049.5899C55.8776%2049.2783%2056.5788%2049.1051%2057.2936%2049.0815C58.0104%2049.0551%2058.7244%2049.1819%2059.3888%2049.4527C60.0528%2049.7239%2060.6516%2050.1331%2061.1456%2050.6535L67.7736%2057.5135C68.326%2058.0863%2068.6288%2058.8551%2068.6144%2059.6511C68.6004%2060.4471%2068.2704%2061.2047%2067.6976%2061.7575C67.1248%2062.3103%2066.3556%2062.6127%2065.5596%2062.5983C64.764%2062.5843%2064.0064%2062.2543%2063.4536%2061.6815L57.5016%2055.5135L49.8296%2064.5695C49.3552%2065.1291%2048.766%2065.5807%2048.1024%2065.8931C47.4384%2066.2059%2046.7152%2066.3723%2045.9816%2066.3815L45.9176%2066.4015Z'%20fill='%23748297'/%3e%3cpath%20d='M65.0008%2087H33.1767C30.8059%2086.9584%2028.4666%2086.4488%2026.2933%2085.5004C24.1201%2084.5524%2022.1557%2083.184%2020.5128%2081.4744C18.87%2079.7644%2017.5809%2077.7468%2016.7201%2075.5376C15.8593%2073.3284%2015.4437%2070.9704%2015.4967%2068.6V26.628C15.6171%2021.9306%2017.5604%2017.4643%2020.9154%2014.1742C24.2704%2010.8842%2028.7737%209.0286%2033.4725%209H56.1448C57.6536%209.00228%2059.1468%209.3084%2060.5352%209.90008C61.9232%2010.4918%2063.178%2011.357%2064.2248%2012.444L79.3848%2028.24C81.3932%2030.3232%2082.512%2033.1063%2082.5044%2036V68.652C82.5536%2073.3884%2080.7516%2077.9568%2077.482%2081.384C74.2124%2084.8108%2069.734%2086.826%2065.0008%2087ZM33.4845%2015C30.3566%2015.0102%2027.3555%2016.2368%2025.1159%2018.4204C22.8763%2020.6041%2021.5738%2023.5733%2021.4845%2026.7V68.652C21.4387%2070.2356%2021.7073%2071.8124%2022.2741%2073.292C22.8409%2074.7712%2023.6948%2076.124%2024.787%2077.2712C25.8792%2078.4188%2027.1878%2079.3388%2028.6373%2079.9784C30.0869%2080.6176%2031.6487%2080.9632%2033.2325%2080.996H64.8684C68.0276%2080.8528%2071.0072%2079.4864%2073.1768%2077.1856C75.346%2074.8848%2076.5352%2071.83%2076.4924%2068.668V36C76.4924%2034.6581%2075.9736%2033.3682%2075.0444%2032.4L59.8804%2016.6C59.3956%2016.0947%2058.814%2015.6925%2058.1696%2015.4176C57.5256%2015.1426%2056.8328%2015.0006%2056.1328%2015H33.4725H33.4845Z'%20fill='%23748297'/%3e%3cpath%20d='M79.2498%2037.062H68.2938C64.7902%2037.0461%2061.4354%2035.6443%2058.9622%2033.1628C56.4886%2030.6812%2055.0981%2027.3216%2055.0938%2023.818V12.25C55.0938%2011.4544%2055.4101%2010.6913%2055.9725%2010.1287C56.5353%209.56604%2057.2982%209.25%2058.0938%209.25C58.8893%209.25%2059.6525%209.56604%2060.2153%2010.1287C60.7777%2010.6913%2061.0938%2011.4544%2061.0938%2012.25V23.818C61.0938%2025.7316%2061.8509%2027.5675%2063.2001%2028.9248C64.5489%2030.282%2066.3802%2031.0504%2068.2938%2031.062H79.2417C80.0373%2031.062%2080.8005%2031.3781%2081.3633%2031.9407C81.9257%2032.5033%2082.2417%2033.2663%2082.2417%2034.062C82.2417%2034.8576%2081.9257%2035.6207%2081.3633%2036.1833C80.8005%2036.7459%2080.0373%2037.062%2079.2417%2037.062H79.2498Z'%20fill='%23748297'/%3e%3cpath%20d='M37.9659%2048.8068C40.1992%2048.8068%2042.01%2046.9959%2042.01%2044.7627C42.01%2042.5291%2040.1992%2040.7188%2037.9659%2040.7188C35.7324%2040.7188%2033.9219%2042.5291%2033.9219%2044.7627C33.9219%2046.9959%2035.7324%2048.8068%2037.9659%2048.8068Z'%20fill='%23748297'/%3e%3c/svg%3e", M = (e) => {
+  const { file: t, children: r, className: o, isCompact: s } = e, d = t.file ? URL.createObjectURL(t.file) : t.src ?? "";
+  function g(a) {
+    const l = a.currentTarget;
+    l.src = e0, l.classList.add("dgsuikit:bg-gray-100");
   }
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: d(
+      className: n(
         "dgsuikit:relative dgsuikit:rounded-lg dgsuikit:overflow-hidden",
-        b,
-        a
+        s ? F : E,
+        o
       ),
       children: [
-        /* @__PURE__ */ e(
+        /* @__PURE__ */ i(
           "img",
           {
             className: "dgsuikit:w-full dgsuikit:h-full",
-            src: s,
+            src: d,
             alt: "image-preview",
-            onError: o
+            onError: g
           }
         ),
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ u(
           "div",
           {
-            className: d(
+            className: n(
               "dgsuikit:transition-colors dgsuikit:absolute dgsuikit:w-full dgsuikit:h-full dgsuikit:top-0 dgsuikit:left-0",
-              i.loading ? "dgsuikit:bg-black/70" : "dgsuikit:bg-black/50"
+              t.loading ? "dgsuikit:bg-black/70" : "dgsuikit:bg-black/50"
             ),
             children: [
-              typeof i.loading == "boolean" && i.loading && /* @__PURE__ */ e("div", { className: d("dot-flashing", F) }),
-              typeof i.loading == "number" && /* @__PURE__ */ n(
+              typeof t.loading == "boolean" && t.loading && /* @__PURE__ */ i("div", { className: n("dot-flashing", A) }),
+              typeof t.loading == "number" && /* @__PURE__ */ u(
                 "div",
                 {
-                  className: d(
+                  className: n(
                     "dgsuikit:flex dgsuikit:flex-col dgsuikit:items-center dgsuikit:justify-center",
-                    F
+                    A
                   ),
                   children: [
-                    /* @__PURE__ */ e(
-                      E,
+                    /* @__PURE__ */ i(
+                      O,
                       {
-                        current: i.loading,
+                        current: t.loading,
                         total: 100,
                         color: "gray",
                         size: 30,
                         strokeSize: 4
                       }
                     ),
-                    /* @__PURE__ */ n("div", { className: "dgsuikit:font-oveline-regular dgsuikit:text-gray-50 dgsuikit:ss02 dgsuikit:mt-1", children: [
-                      i.loading,
+                    /* @__PURE__ */ u("div", { className: "dgsuikit:font-oveline-regular dgsuikit:text-gray-50 dgsuikit:ss02 dgsuikit:mt-1", children: [
+                      t.loading,
                       " %"
                     ] })
                   ]
                 }
               ),
-              !i.loading && r
+              !t.loading && r
             ]
           }
         )
@@ -315,67 +365,67 @@ const O = (t) => {
     }
   );
 };
-function C(t, i, r) {
-  return t ? /* @__PURE__ */ e(
-    v,
+function x(e, t, r) {
+  return e ? /* @__PURE__ */ i(
+    w,
     {
-      className: d(
+      className: n(
         "dgsuikit:opacity-50 dgsuikit:z-10",
         r?.className,
-        t?.className
+        e?.className
       ),
       type: "button",
       rightIcon: r?.icon,
       size: "small",
       ...r,
-      ...typeof t == "boolean" ? {} : t,
-      onClick: (a) => {
-        typeof t != "boolean" && typeof t.onClick == "function" && t.onClick(i, a);
+      ...typeof e == "boolean" ? {} : e,
+      onClick: (o) => {
+        typeof e != "boolean" && typeof e.onClick == "function" && e.onClick(t, o);
       },
-      children: t?.children
+      children: e?.children
     }
   ) : null;
 }
-function N(t, i) {
-  return d(
+function S(e, t) {
+  return n(
     "dgsuikit:border dgsuikit:border-transparent dgsuikit:rounded-lg",
-    i && i !== "default" && "dgsuikit:p-1",
+    t && t !== "default" && "dgsuikit:p-1",
     {
-      "dgsuikit:!border-error-500": !t && i === "error",
-      "dgsuikit:!border-warning-600": !t && i === "warning"
+      "dgsuikit:!border-error-500": !e && t === "error",
+      "dgsuikit:!border-warning-600": !e && t === "warning"
     }
   );
 }
-const Z = (t) => {
+const s0 = (e) => {
   const {
-    files: i,
+    files: t,
     previewClassName: r,
-    leftButton: a = !0,
+    leftButton: o = !0,
     rightButton: s = !0,
-    wrapperClassName: o
-  } = t;
-  return /* @__PURE__ */ e(
+    wrapperClassName: d
+  } = e;
+  return /* @__PURE__ */ i(
     "div",
     {
-      className: d(
-        N(i.loading, i.errorMessage ? "error" : i.status),
-        M,
-        o
+      className: n(
+        S(t.loading, t.errorMessage ? "error" : t.status),
+        R,
+        d
       ),
-      children: /* @__PURE__ */ n(
-        y,
+      children: /* @__PURE__ */ u(
+        M,
         {
-          file: i,
-          className: d("dgsuikit:!size-full", r),
+          file: t,
+          className: n("dgsuikit:!size-full", r),
           children: [
-            C(a, i, {
+            x(o, t, {
               color: "error",
-              icon: /* @__PURE__ */ e(B, {}),
+              icon: /* @__PURE__ */ i(_, {}),
               className: "dgsuikit:!absolute dgsuikit:left-2 dgsuikit:top-2"
             }),
-            C(s, i, {
+            x(s, t, {
               color: "gray",
-              icon: /* @__PURE__ */ e(I, {}),
+              icon: /* @__PURE__ */ i(D, {}),
               className: "dgsuikit:!absolute dgsuikit:right-2 dgsuikit:bottom-2"
             })
           ]
@@ -383,7 +433,7 @@ const Z = (t) => {
       )
     }
   );
-}, G = (t) => /* @__PURE__ */ n(
+}, P = (e) => /* @__PURE__ */ u(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -391,9 +441,9 @@ const Z = (t) => {
     height: "1em",
     fill: "none",
     viewBox: "0 0 24 24",
-    ...t,
+    ...e,
     children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           fill: "currentColor",
@@ -402,7 +452,7 @@ const Z = (t) => {
           clipRule: "evenodd"
         }
       ),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ i(
         "path",
         {
           fill: "currentColor",
@@ -413,61 +463,61 @@ const Z = (t) => {
       )
     ]
   }
-), K = (t) => {
+), r0 = (e) => {
   const {
-    files: i,
+    files: t,
     previewClassName: r,
-    leftButton: a = !0,
+    leftButton: o = !0,
     rightButton: s = !0,
-    exteraButton: o
-  } = t, { status: u, errorMessage: l, hintMessage: c, loading: m, title: f } = i, k = f ?? i.file?.name, g = !!(l ?? c);
-  return /* @__PURE__ */ n(
+    exteraButton: d
+  } = e, { status: g, errorMessage: a, hintMessage: l, loading: m, title: k } = t, c = k ?? t.file?.name, p = !!(a ?? l);
+  return /* @__PURE__ */ u(
     "div",
     {
-      className: d(
+      className: n(
         "dgsuikit:flex dgsuikit:items-center dgsuikit:space-x-2 dgsuikit:w-0 dgsuikit:min-w-full",
-        N(m, l ? "error" : u),
-        (!u || u === "default") && !l && "dgsuikit:p-1 dgsuikit:!border-gray-200",
+        S(m, a ? "error" : g),
+        (!g || g === "default") && !a && "dgsuikit:p-1 dgsuikit:!border-gray-200",
         r
       ),
       children: [
-        /* @__PURE__ */ e(
-          y,
+        /* @__PURE__ */ i(
+          M,
           {
-            file: i,
+            file: t,
             className: "dgsuikit:!size-[72px] dgsuikit:shrink-0"
           }
         ),
-        !!(k ?? g) && /* @__PURE__ */ n("div", { className: "dgsuikit:space-y-1 dgsuikit:overflow-hidden dgsuikit:w-full", children: [
-          !!k && /* @__PURE__ */ e("span", { className: "dgsuikit:font-p2-medium dgsuikit:text-gray-700 dgsuikit:break-words dgsuikit:line-clamp-1", children: k }),
-          g && /* @__PURE__ */ e(
-            x,
+        !!(c ?? p) && /* @__PURE__ */ u("div", { className: "dgsuikit:space-y-1 dgsuikit:overflow-hidden dgsuikit:w-full", children: [
+          !!c && /* @__PURE__ */ i("span", { className: "dgsuikit:font-p2-medium dgsuikit:text-gray-700 dgsuikit:break-words dgsuikit:line-clamp-1", children: c }),
+          p && /* @__PURE__ */ i(
+            N,
             {
-              hintMessage: c,
-              errorMessage: l
+              hintMessage: l,
+              errorMessage: a
             }
           )
         ] }),
-        (a || s || o) && /* @__PURE__ */ n("div", { className: "dgsuikit:flex dgsuikit:space-x-1 dgsuikit:shrink-0", children: [
-          o && /* @__PURE__ */ e(
-            v,
+        (o || s || d) && /* @__PURE__ */ u("div", { className: "dgsuikit:flex dgsuikit:space-x-1 dgsuikit:shrink-0", children: [
+          d && /* @__PURE__ */ i(
+            w,
             {
-              ...o,
+              ...d,
               onClick: (h) => {
-                typeof o.onClick == "function" && o.onClick(i, h);
+                typeof d.onClick == "function" && d.onClick(t, h);
               },
-              children: o.children
+              children: d.children
             }
           ),
-          C(s, i, {
+          x(s, t, {
             color: "gray",
-            icon: /* @__PURE__ */ e(H, {}),
+            icon: /* @__PURE__ */ i(T, {}),
             variant: "text",
             className: "dgsuikit:!opacity-100"
           }),
-          C(a, i, {
+          x(o, t, {
             color: "error",
-            icon: /* @__PURE__ */ e(G, {}),
+            icon: /* @__PURE__ */ i(P, {}),
             variant: "text",
             className: "dgsuikit:!opacity-100"
           })
@@ -476,133 +526,162 @@ const Z = (t) => {
     }
   );
 };
-function L(t) {
-  return t.file ? URL.createObjectURL(t.file) : t.src ?? "";
+function B(e) {
+  return e.file ? URL.createObjectURL(e.file) : e.src ?? "";
 }
-const $ = (t) => {
-  const { files: i, type: r = "list", wrapperClassName: a } = t;
-  return r === "grid" ? i.map((s) => /* @__PURE__ */ e(
-    Z,
+const a0 = (e) => {
+  const { files: t, type: r = "list", wrapperClassName: o } = e;
+  return r === "grid" ? t.map((s) => /* @__PURE__ */ i(
+    s0,
     {
-      ...t,
+      ...e,
       files: s
     },
-    L(s)
-  )) : /* @__PURE__ */ e("div", { className: d("dgsuikit:mt-4 dgsuikit:space-y-2", a), children: i.map((s) => /* @__PURE__ */ e(
-    K,
+    B(s)
+  )) : /* @__PURE__ */ i("div", { className: n("dgsuikit:mt-4 dgsuikit:space-y-2", o), children: t.map((s) => /* @__PURE__ */ i(
+    r0,
     {
-      ...t,
+      ...e,
       files: s
     },
-    L(s)
+    B(s)
   )) });
-};
-function q(t, i, r = "default") {
-  return t ? w.loading : i ? w.error : w[r];
-}
-const J = (t) => {
+}, I = ({
+  type: e,
+  title: t,
+  fileName: r,
+  loading: o,
+  errorMessage: s,
+  status: d = "default"
+}) => {
+  const g = t ?? r;
+  if (!g) return null;
+  const a = e === "compact" ? J : q, l = o ? a.loading : s ? a.error : a[d];
+  return /* @__PURE__ */ i("div", { className: n(l, "dgsuikit:font-p2-medium dgsuikit:text-center dgsuikit:line-clamp-1 dgsuikit:w-0 dgsuikit:min-w-full", e === "compact" ? "dgsuikit:absolute dgsuikit:-bottom-[0.5px] dgsuikit:px-3 dgsuikit:backdrop-blur-[1px] dgsuikit:text-white dgsuikit:py-1.5 dgsuikit:rounded-b-lg dgsuikit:mt-1" : "dgsuikit:px-3 dgsuikit:py-1.5 dgsuikit:rounded-lg dgsuikit:mt-1"), children: g });
+}, o0 = (e) => {
   const {
-    files: i,
+    files: t,
     leftButton: r = !0,
-    rightButton: a = !0,
+    rightButton: o = !0,
     exteraButton: s,
-    wrapperClassName: o,
-    previewClassName: u
-  } = t, { errorMessage: l, file: c, hintMessage: m, loading: f, status: k, title: g } = i;
-  return /* @__PURE__ */ n("div", { className: "dgsuikit:space-y-2", children: [
-    /* @__PURE__ */ n(
+    wrapperClassName: d,
+    previewClassName: g,
+    type: a = "default"
+  } = e, { errorMessage: l, file: m, hintMessage: k, loading: c, status: p, title: h } = t, f = a === "compact", C = f ? {
+    icon: /* @__PURE__ */ i(P, {}),
+    className: "dgsuikit:!absolute dgsuikit:left-2 dgsuikit:top-2 dgsuikit:!p-1.5 dgsuikit:bg-red-500/60 dgsuikit:hover:bg-red-400/50 dgsuikit:backdrop-blur-[1px]"
+  } : {
+    color: "error",
+    icon: /* @__PURE__ */ i(_, {}),
+    className: "dgsuikit:!absolute dgsuikit:left-2 dgsuikit:top-2"
+  }, y = f ? {
+    icon: /* @__PURE__ */ i(T, { className: "dgsuikit:text-white" }),
+    variant: "text",
+    className: "dgsuikit:!absolute dgsuikit:right-2 dgsuikit:top-2 dgsuikit:!p-1.5 dgsuikit:bg-gray-800/60 dgsuikit:hover:bg-gray-700/50 dgsuikit:backdrop-blur-[1px]"
+  } : {
+    color: "gray",
+    icon: /* @__PURE__ */ i(D, {}),
+    className: "dgsuikit:!absolute dgsuikit:right-2 dgsuikit:bottom-2"
+  };
+  return /* @__PURE__ */ u("div", { className: "dgsuikit:space-y-2", children: [
+    /* @__PURE__ */ u(
       "div",
       {
-        className: d(
-          N(f, l ? "error" : k),
-          o
+        className: n(
+          S(c, l ? "error" : p),
+          d
         ),
         children: [
-          /* @__PURE__ */ n(
-            y,
+          /* @__PURE__ */ u(
+            M,
             {
-              file: i,
-              className: u,
+              file: t,
+              className: n(f && F, g),
+              isCompact: f,
               children: [
-                C(r, i, {
-                  color: "error",
-                  icon: /* @__PURE__ */ e(B, {}),
-                  className: "dgsuikit:!absolute dgsuikit:left-2 dgsuikit:top-2"
-                }),
-                C(a, i, {
-                  color: "gray",
-                  icon: /* @__PURE__ */ e(I, {}),
-                  className: "dgsuikit:!absolute dgsuikit:right-2 dgsuikit:bottom-2"
-                }),
-                s ? /* @__PURE__ */ e(
-                  v,
+                x(r, t, C),
+                x(o, t, y),
+                !f && s ? /* @__PURE__ */ i(
+                  w,
                   {
-                    className: d(
+                    className: n(
                       s.className,
                       "dgsuikit:!absolute dgsuikit:top-1/2 dgsuikit:left-1/2 dgsuikit:-translate-y-1/2 dgsuikit:-translate-x-1/2"
                     ),
                     ...s,
-                    onClick: (h) => {
-                      typeof s.onClick == "function" && s.onClick(i, h);
+                    onClick: (b) => {
+                      typeof s.onClick == "function" && s.onClick(t, b);
                     },
                     children: s.children
                   }
-                ) : null
+                ) : null,
+                f && /* @__PURE__ */ i(
+                  I,
+                  {
+                    type: "compact",
+                    title: h,
+                    fileName: m?.name,
+                    loading: c,
+                    errorMessage: l,
+                    status: p
+                  }
+                )
               ]
             }
           ),
-          !!(g ?? c?.name) && /* @__PURE__ */ e(
-            "div",
+          !f && /* @__PURE__ */ i(
+            I,
             {
-              className: d(
-                q(f, l, k),
-                "dgsuikit:px-3 dgsuikit:py-1.5 dgsuikit:rounded-lg dgsuikit:font-p2-medium dgsuikit:text-center dgsuikit:line-clamp-1 dgsuikit:mt-1 dgsuikit:w-0 dgsuikit:min-w-full"
-              ),
-              children: g ?? c?.name
+              type: "default",
+              title: h,
+              fileName: m?.name,
+              loading: c,
+              errorMessage: l,
+              status: p
             }
           )
         ]
       }
     ),
-    m ?? l ? /* @__PURE__ */ e(
-      x,
+    k ?? l ? /* @__PURE__ */ i(
+      N,
       {
         errorMessage: l,
-        hintMessage: m
+        hintMessage: k
       }
     ) : null
   ] });
-}, l0 = (t) => {
-  const { mode: i, fileInputProps: r, isError: a, disabled: s, onChange: o, files: u, previewProps: l, className: c } = t, m = t.hideFileInput, f = Array.isArray(u) ? u.length > 0 : !!u, k = d(
-    i === "multiple" && l?.type === "grid" && "dgsuikit:flex dgsuikit:space-x-2",
-    c
-  ), g = k ? "div" : D;
-  return /* @__PURE__ */ n(g, { ...g === "div" ? { className: k } : {}, children: [
-    (!f && i === "single" || i === "multiple" && !m) && /* @__PURE__ */ e(
-      O,
+}, m0 = (e) => {
+  const { mode: t, fileInputProps: r, isError: o, disabled: s, onChange: d, files: g, previewProps: a, className: l } = e, m = e.hideFileInput, k = Array.isArray(g) ? g.length > 0 : !!g, c = n(
+    t === "multiple" && a?.type === "grid" && "dgsuikit:flex dgsuikit:space-x-2",
+    l
+  ), p = c ? "div" : U;
+  return /* @__PURE__ */ u(p, { ...p === "div" ? { className: c } : {}, children: [
+    (!k && t === "single" || t === "multiple" && !m) && /* @__PURE__ */ i(
+      t0,
       {
         ...r,
-        previewtype: l?.type,
+        previewType: a?.type,
         disabled: s,
-        isError: a,
-        onChange: o
+        isError: o,
+        onChange: d
       }
     ),
-    f && /* @__PURE__ */ e(R, { children: i === "single" ? /* @__PURE__ */ e(
-      J,
+    k && /* @__PURE__ */ i(z, { children: t === "single" ? /* @__PURE__ */ i(
+      o0,
       {
-        ...l,
-        files: u
+        ...a,
+        files: g
       }
-    ) : /* @__PURE__ */ e(
-      $,
+    ) : /* @__PURE__ */ i(
+      a0,
       {
-        ...l,
-        files: u
+        ...a,
+        files: g
       }
     ) })
   ] });
 };
 export {
-  l0 as default
+  m0 as default
 };