@epam/ai-dial-ui-kit 0.15.0-dev.5 → 0.15.0-dev.50

package/dist/components/New/EntityIdentity/EntityIdentity.js

@@ -0,0 +1,135 @@
+import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as E } from "../../../constants/public-class-names.js";
+import { AvatarShape as _ } from "../../../types/avatar.js";
+import { EntityType as e } from "../../../types/entity-type.js";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
+import { Avatar as w } from "../Avatar/Avatar.js";
+import { EllipsisTooltip as d } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { Highlight as L } from "../Highlight/Highlight.js";
+const M = {
+  [e.Model]: "Model",
+  [e.Agent]: "Agent",
+  [e.Toolset]: "Toolset",
+  [e.Skill]: "Skill",
+  [e.Prompt]: "Prompt"
+}, p = {
+  [e.Model]: "text-blue",
+  [e.Agent]: "text-green-1",
+  [e.Toolset]: "text-brown-2",
+  [e.Skill]: "text-violet-1",
+  [e.Prompt]: "text-violet-2"
+}, P = {
+  [e.Model]: "bg-blue",
+  [e.Agent]: "bg-green-2",
+  [e.Toolset]: "bg-brown",
+  [e.Skill]: "bg-violet-2",
+  [e.Prompt]: "bg-violet-1"
+}, k = ["h1", "h2", "h3", "h4", "h5", "h6"], C = (t) => k[Math.min(6, Math.max(1, Math.round(t))) - 1], z = ({
+  item: t,
+  labels: i,
+  showVersion: x = !0,
+  hasFeaturedTag: h = !0,
+  iconSize: g = 48,
+  headingLevel: u = 3,
+  query: r,
+  footer: a,
+  statusBadge: o,
+  className: f,
+  nameClassName: v = "dial-h3-text",
+  typeClassName: T = "dial-caption-lead-semi-text",
+  versionClassName: y = "dial-tiny-text",
+  iconClassName: A,
+  featuredChipClassName: S
+}) => {
+  const N = C(u), c = h && !!t.isFeatured, b = o != null || c, m = x ? t.version : void 0;
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      className: n(
+        "flex items-start gap-2",
+        f,
+        E.entityIdentity
+      ),
+      children: [
+        /* @__PURE__ */ l(
+          w,
+          {
+            name: t.name,
+            src: t.iconUrl,
+            size: g,
+            shape: _.Square,
+            className: n("rounded-[14px]", A)
+          }
+        ),
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: n(
+              "flex min-w-0 flex-1 flex-col gap-1",
+              a != null && "self-stretch"
+            ),
+            children: [
+              /* @__PURE__ */ s("div", { className: "relative flex items-center justify-between", children: [
+                /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: n(
+                      "uppercase",
+                      T,
+                      p[t.type]
+                    ),
+                    children: i?.type ?? M[t.type]
+                  }
+                ),
+                b && /* @__PURE__ */ s("div", { className: "absolute end-0 top-[-6px] flex items-center gap-2", children: [
+                  o,
+                  c && /* @__PURE__ */ l(
+                    "span",
+                    {
+                      className: n(
+                        "flex h-6 items-center justify-center rounded-2xl px-2",
+                        "dial-caption-lead-semi-text",
+                        P[t.type],
+                        p[t.type],
+                        S
+                      ),
+                      children: i?.featured ?? "Featured"
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ s("div", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ l(
+                  N,
+                  {
+                    className: n(
+                      "min-w-0 shrink text-primary",
+                      v
+                    ),
+                    children: r ? /* @__PURE__ */ l(L, { text: t.name, query: r, maxLines: 1 }) : /* @__PURE__ */ l(d, { text: t.name })
+                  }
+                ),
+                m != null && /* Capped at 30% of the row so a long version truncates instead of
+                squeezing the name out. */
+                /* @__PURE__ */ l(
+                  d,
+                  {
+                    className: n(
+                      "max-w-[30%] shrink-0 text-secondary",
+                      y
+                    ),
+                    text: m
+                  }
+                )
+              ] }),
+              a != null && /* @__PURE__ */ l("div", { className: "mt-auto pt-1", children: a })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  z as EntityIdentity
+};

package/dist/components/New/FileDropzone/FileDropzone.js

@@ -6,48 +6,49 @@ import { Label as U } from "../Label/Label.js";
 import { DIAL_KIT_ICON_STROKE as Z } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as q } from "../../../constants/icon.js";
 import { resolveAccessibleName as B } from "../../../utils/accessible-name.js";
-import { matchesAccept as E } from "../../../utils/file-accept.js";
+import { matchesAccept as L } from "../../../utils/file-accept.js";
 import { mergeClasses as d } from "../../../utils/merge-classes.js";
-const er = ({
+import { DIAL_KIT_CLASS as H } from "../../../constants/public-class-names.js";
+const or = ({
   labelProps: g,
   label: h,
   description: y,
-  onChange: x,
-  onReject: v,
+  onChange: D,
+  onReject: x,
   accept: n,
   multiple: f = !1,
   disabled: r = !1,
   errorText: a,
-  icon: L,
+  icon: _,
   id: C,
-  ariaLabel: O,
-  className: _
+  ariaLabel: E,
+  className: O
 }) => {
-  const F = $(), s = C ?? `file-dropzone-${F}`, D = a ? `${s}-error` : void 0, [m, I] = w(!1), c = G(0), i = t(
+  const S = $(), s = C ?? `file-dropzone-${S}`, v = a ? `${s}-error` : void 0, [m, I] = w(!1), c = G(0), i = t(
     (e) => {
       if (e.length === 0) return;
-      const b = f ? e : e.slice(0, 1), N = b.filter((p) => E(p, n)), A = b.filter((p) => !E(p, n));
-      A.length > 0 && v?.(A), N.length > 0 && x(N);
+      const b = f ? e : e.slice(0, 1), A = b.filter((p) => L(p, n)), N = b.filter((p) => !L(p, n));
+      N.length > 0 && x?.(N), A.length > 0 && D(A);
     },
-    [n, f, x, v]
-  ), j = t(
+    [n, f, D, x]
+  ), z = t(
     (e) => {
       i(Array.from(e.target.files ?? [])), e.target.value = "";
     },
     [i]
   ), l = t(() => {
     c.current = 0, I(!1);
-  }, []), k = t(
+  }, []), F = t(
     (e) => {
       r || (e.preventDefault(), c.current += 1, I(!0));
     },
     [r]
-  ), z = t(
+  ), j = t(
     (e) => {
       r || (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
     },
     [r]
-  ), S = t(() => {
+  ), k = t(() => {
     r || (c.current -= 1, c.current <= 0 && l());
   }, [r, l]), K = t(
     (e) => {
@@ -65,11 +66,11 @@ const er = ({
         accept: n,
         multiple: f,
         disabled: r,
-        onChange: j,
+        onChange: z,
         "aria-label": B(
-          typeof h != "string" ? O : void 0
+          typeof h != "string" ? E : void 0
         ),
-        "aria-describedby": D,
+        "aria-describedby": v,
         "aria-invalid": a ? !0 : void 0,
         className: "peer sr-only"
       }
@@ -78,9 +79,9 @@ const er = ({
       "label",
       {
         htmlFor: s,
-        onDragEnter: k,
-        onDragOver: z,
-        onDragLeave: S,
+        onDragEnter: F,
+        onDragOver: j,
+        onDragLeave: k,
         onDrop: K,
         className: d(
           "flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed px-6 py-10 text-center",
@@ -90,10 +91,11 @@ const er = ({
           !r && m && "border-accent bg-control-accent-alpha",
           !r && !m && "border-secondary hover:border-accent",
           a && !m && "border-error hover:border-error",
-          _
+          O,
+          H.fileDropzone
         ),
         children: [
-          L ?? /* @__PURE__ */ o(
+          _ ?? /* @__PURE__ */ o(
             T,
             {
               size: q.LG,
@@ -127,9 +129,9 @@ const er = ({
         ]
       }
     ),
-    /* @__PURE__ */ o(R, { id: D, text: a })
+    /* @__PURE__ */ o(R, { id: v, text: a })
   ] });
 };
 export {
-  er as FileDropzone
+  or as FileDropzone
 };

package/dist/components/New/FileIcon/FileIcon.js

@@ -0,0 +1,55 @@
+import { jsxs as b, jsx as l } from "react/jsx-runtime";
+import { SharedEntityIndicator as x } from "../SharedEntityIndicator/SharedEntityIndicator.js";
+import { Spinner as g } from "../../Spinner/Spinner.js";
+import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as C } from "../../../constants/public-class-names.js";
+import { DialItemType as t } from "../../../types/item.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { getFileGlyphKind as D } from "./constants.js";
+import { FileGlyph as S } from "./icons/FileGlyph.js";
+import { FolderGlyph as G } from "./icons/FolderGlyph.js";
+const N = (e, r) => (r ?? (e.includes(".") ? e.split(".").pop() : "") ?? "").trim().replace(/^\./, "").toLowerCase(), _ = (e, r) => e === t.Folder ? "Folder" : r ? `${r.toUpperCase()} file` : "File", j = (e, r, o) => e === t.Folder ? /* @__PURE__ */ l(G, { size: o }) : /* @__PURE__ */ l(S, { size: o, kind: D(r) }), P = ({
+  type: e,
+  name: r,
+  fileExtension: o,
+  shared: i = !1,
+  loading: n = !1,
+  size: a = y.MD,
+  className: c,
+  decorative: p = !1,
+  label: d,
+  loadingLabel: u = "Loading",
+  sharedIndicatorClassName: F,
+  sharedIndicatorTooltip: I
+}) => {
+  if (e !== t.File && e !== t.Folder)
+    return null;
+  const s = e === t.File ? N(r, o) : "", m = _(e, s), h = d ?? (i ? `${m}, shared` : m), L = p ? { "aria-hidden": !0 } : n ? {} : { role: "img", "aria-label": h };
+  return /* @__PURE__ */ b(
+    "span",
+    {
+      className: f(
+        "relative inline-flex shrink-0 items-center justify-center text-secondary",
+        c,
+        C.fileIcon
+      ),
+      ...L,
+      children: [
+        n ? /* @__PURE__ */ l(g, { size: a, ariaLabel: u }) : j(e, s, a),
+        i && /* @__PURE__ */ l(
+          x,
+          {
+            tooltip: I,
+            className: f(
+              "absolute -bottom-0.5 -left-0.5",
+              F
+            )
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  P as FileIcon
+};

package/dist/components/New/FileIcon/constants.js

@@ -0,0 +1,134 @@
+var a = /* @__PURE__ */ ((s) => (s.Images = "images", s.Video = "video", s.Audio = "audio", s.Code = "code", s.Text = "text", s.Pdf = "pdf", s.Spreadsheet = "spreadsheet", s.Presentation = "presentation", s.Archive = "archive", s.Dial = "dial", s.Other = "other", s))(a || {});
+const o = {
+  images: [
+    "apng",
+    "avif",
+    "bmp",
+    "gif",
+    "heic",
+    "heif",
+    "ico",
+    "jpeg",
+    "jpg",
+    "png",
+    "svg",
+    "tif",
+    "tiff",
+    "webp"
+  ],
+  video: [
+    "avi",
+    "flv",
+    "m4v",
+    "mkv",
+    "mov",
+    "mp4",
+    "mpeg",
+    "mpg",
+    "ogv",
+    "webm",
+    "wmv"
+  ],
+  audio: [
+    "aac",
+    "aiff",
+    "flac",
+    "m4a",
+    "mid",
+    "midi",
+    "mp3",
+    "oga",
+    "ogg",
+    "opus",
+    "wav",
+    "wma"
+  ],
+  // Source files, markup, stylesheets, scripts and structured config.
+  code: [
+    "bash",
+    "c",
+    "cjs",
+    "cpp",
+    "cs",
+    "css",
+    "go",
+    "h",
+    "hpp",
+    "htm",
+    "html",
+    "ini",
+    "ipynb",
+    "java",
+    "js",
+    "json",
+    "jsx",
+    "kt",
+    "less",
+    "lua",
+    "mjs",
+    "php",
+    "ps1",
+    "py",
+    "r",
+    "rb",
+    "rs",
+    "sass",
+    "scala",
+    "scss",
+    "sh",
+    "sql",
+    "svelte",
+    "swift",
+    "toml",
+    "ts",
+    "tsx",
+    "vue",
+    "xml",
+    "yaml",
+    "yml",
+    "zsh"
+  ],
+  // Prose and documents.
+  text: [
+    "doc",
+    "docx",
+    "log",
+    "markdown",
+    "md",
+    "odt",
+    "rtf",
+    "text",
+    "txt"
+  ],
+  pdf: ["pdf"],
+  spreadsheet: [
+    "csv",
+    "numbers",
+    "ods",
+    "tsv",
+    "xls",
+    "xlsm",
+    "xlsx"
+  ],
+  presentation: ["key", "odp", "pps", "ppsx", "ppt", "pptx"],
+  archive: [
+    "7z",
+    "bz2",
+    "gz",
+    "rar",
+    "tar",
+    "tgz",
+    "xz",
+    "zip"
+  ],
+  // TODO: confirm with design which DIAL entities draw this glyph.
+  dial: ["dial"]
+}, p = new Map(
+  Object.entries(o).flatMap(
+    ([s, t]) => t.map((e) => [e, s])
+  )
+), m = (s) => p.get(s) ?? "other";
+export {
+  a as FileGlyphKind,
+  m as getFileGlyphKind
+};

package/dist/components/New/FileIcon/icons/FileGlyph.js

@@ -0,0 +1,150 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { FileGlyphKind as C } from "../constants.js";
+const n = "var(--text-control-permanent, #FCFCFC)", r = {
+  x1: "20.4167",
+  y1: "-3.33333",
+  x2: "2.5",
+  y2: "20",
+  from: "var(--bg-visual-blue, #D6EDF9)",
+  to: "var(--stroke-gradient-1, #5976E9)"
+}, l = "#1B212D", d = {
+  [C.Images]: {
+    path: "M11.0002 8.66667H11.0036M7.00024 11.3333L8.66691 9.66667C8.97624 9.369 9.35758 9.369 9.66691 9.66667L11.3336 11.3333M10.6669 10.6667L11.0002 10.3333C11.3096 10.0357 11.6909 10.0357 12.0002 10.3333L13.0002 11.3333M7.00024 8C7.00024 7.73478 7.1056 7.48043 7.29314 7.29289C7.48067 7.10536 7.73503 7 8.00024 7H12.0002C12.2655 7 12.5198 7.10536 12.7074 7.29289C12.8949 7.48043 13.0002 7.73478 13.0002 8V12C13.0002 12.2652 12.8949 12.5196 12.7074 12.7071C12.5198 12.8946 12.2655 13 12.0002 13H8.00024C7.73503 13 7.48067 12.8946 7.29314 12.7071C7.1056 12.5196 7.00024 12.2652 7.00024 12V8Z",
+    sheet: r
+  },
+  [C.Code]: {
+    path: "M8.33358 8.66665L7.00024 9.99998L8.33358 11.3333M11.6669 8.66665L13.0002 9.99998L11.6669 11.3333M10.6669 7.33331L9.33358 12.6666",
+    sheet: {
+      x1: "16.6667",
+      y1: "0",
+      x2: "2.08333",
+      y2: "20.4167",
+      from: "var(--bg-control-inverted, #57647A)",
+      to: l
+    }
+  },
+  [C.Text]: {
+    path: "M7.3335 8H12.6668M7.3335 10H12.6668M7.3335 12H11.3335",
+    sheet: {
+      x1: "25.8333",
+      y1: "-11.6667",
+      x2: "2.5",
+      y2: "20",
+      from: "var(--bg-visual-violet-1, #DDE3F9)",
+      to: "var(--bg-gradient-1, #1D4ED8)"
+    }
+  },
+  [C.Spreadsheet]: {
+    path: "M7.33325 10.1667H12.6666M9.99992 7.5V12.8333M7.33325 8.16667C7.33325 7.98986 7.40349 7.82029 7.52851 7.69526C7.65354 7.57024 7.82311 7.5 7.99992 7.5H11.9999C12.1767 7.5 12.3463 7.57024 12.4713 7.69526C12.5963 7.82029 12.6666 7.98986 12.6666 8.16667V12.1667C12.6666 12.3435 12.5963 12.513 12.4713 12.6381C12.3463 12.7631 12.1767 12.8333 11.9999 12.8333H7.99992C7.82311 12.8333 7.65354 12.7631 7.52851 12.6381C7.40349 12.513 7.33325 12.3435 7.33325 12.1667V8.16667Z",
+    sheet: {
+      x1: "20.4167",
+      y1: "-3.75",
+      x2: "2.91667",
+      y2: "20.4167",
+      from: "var(--bg-visual-green-1, #CDE8E5)",
+      to: "var(--text-visual-green-1, #059669)"
+    }
+  },
+  [C.Pdf]: {
+    fillPath: "M12.5373 10.3151C12.0382 10.3151 11.4137 10.4021 11.2094 10.4328C10.3637 9.54967 10.1231 9.04771 10.069 8.91388C10.1423 8.72544 10.3975 8.0096 10.4338 7.09022C10.4517 6.62991 10.3544 6.28596 10.1447 6.06792C9.93533 5.85024 9.68191 5.83331 9.60924 5.83331C9.35443 5.83331 8.92697 5.96216 8.92697 6.82503C8.92697 7.5737 9.27603 8.36813 9.37252 8.57339C8.86416 10.0536 8.31837 11.0669 8.20248 11.2753C6.15974 12.0444 6 12.788 6 12.9988C6 13.3775 6.26973 13.6036 6.72152 13.6036C7.8192 13.6036 8.8209 11.7607 8.98653 11.4407C9.76614 11.1301 10.8096 10.9377 11.0749 10.8918C11.8357 11.6166 12.7157 11.81 13.0811 11.81C13.3561 11.81 14 11.81 14 11.148C14 10.5332 13.2121 10.3151 12.5373 10.3151ZM12.4844 10.7497C13.0773 10.7497 13.234 10.9458 13.234 11.0494C13.234 11.1145 13.2093 11.3268 12.8915 11.3268C12.6065 11.3268 12.1145 11.1621 11.6303 10.8047C11.8322 10.7782 12.131 10.7497 12.4844 10.7497ZM9.57812 6.25458C9.63218 6.25458 9.66777 6.27195 9.69711 6.31264C9.86764 6.54926 9.73014 7.32242 9.56279 7.92745C9.40124 7.40867 9.28 6.61264 9.45058 6.33259C9.48392 6.27793 9.52204 6.25458 9.57812 6.25458ZM9.29017 10.8856C9.50483 10.452 9.74542 9.81997 9.87646 9.46253C10.1387 9.90147 10.4914 10.309 10.6954 10.53C10.0603 10.6639 9.57969 10.7976 9.29017 10.8856ZM6.4264 13.0566C6.41226 13.0399 6.41017 13.0045 6.42083 12.9621C6.44317 12.8731 6.61396 12.4322 7.84924 11.8796C7.67236 12.1582 7.39585 12.5563 7.09208 12.8537C6.87825 13.0538 6.71174 13.1553 6.59719 13.1553C6.55621 13.1553 6.49974 13.1442 6.4264 13.0566Z",
+    sheet: {
+      x1: "26.25",
+      y1: "-11.6667",
+      x2: "2.5",
+      y2: "20",
+      from: "var(--bg-visual-red, #FCE7F3)",
+      to: "var(--bg-control-error-active, #CC4545)"
+    }
+  },
+  [C.Audio]: {
+    path: "M9 11.5C9 11.7652 8.89464 12.0195 8.70711 12.2071C8.51957 12.3946 8.26522 12.5 8 12.5C7.73478 12.5 7.48043 12.3946 7.29289 12.2071C7.10536 12.0195 7 11.7652 7 11.5C7 11.2347 7.10536 10.9804 7.29289 10.7929C7.48043 10.6053 7.73478 10.5 8 10.5C8.26522 10.5 8.51957 10.6053 8.70711 10.7929C8.89464 10.9804 9 11.2347 9 11.5ZM9 11.5V7.16663H12.3333V11.5M12.3333 11.5C12.3333 11.7652 12.228 12.0195 12.0404 12.2071C11.8529 12.3946 11.5985 12.5 11.3333 12.5C11.0681 12.5 10.8138 12.3946 10.6262 12.2071C10.4387 12.0195 10.3333 11.7652 10.3333 11.5C10.3333 11.2347 10.4387 10.9804 10.6262 10.7929C10.8138 10.6053 11.0681 10.5 11.3333 10.5C11.5985 10.5 11.8529 10.6053 12.0404 10.7929C12.228 10.9804 12.3333 11.2347 12.3333 11.5ZM9 8.49996H12.3333",
+    sheet: r
+  },
+  [C.Video]: {
+    path: "M9.99996 13.1667C11.8409 13.1667 13.3333 11.6743 13.3333 9.83333C13.3333 7.99238 11.8409 6.5 9.99996 6.5C8.15901 6.5 6.66663 7.99238 6.66663 9.83333C6.66663 11.6743 8.15901 13.1667 9.99996 13.1667ZM9.33337 8.5L11.3334 9.83333L9.33337 11.1667V8.5Z",
+    sheet: r
+  },
+  [C.Presentation]: {
+    path: "M7 7.33331H13M7.33333 7.33331V10.6666C7.33333 10.8435 7.40357 11.013 7.5286 11.1381C7.65362 11.2631 7.82319 11.3333 8 11.3333H12C12.1768 11.3333 12.3464 11.2631 12.4714 11.1381C12.5964 11.013 12.6667 10.8435 12.6667 10.6666V7.33331M10 11.3333V12.6666M9 12.6666H11M8.66667 9.99998L9.66667 8.99998L10.3333 9.66665L11.3333 8.66665",
+    sheet: {
+      x1: "24.5",
+      y1: "-9.5",
+      x2: "2.5",
+      y2: "20",
+      from: "var(--bg-visual-brown, #FDE8D8)",
+      to: "var(--text-visual-brown-2, #B45309)"
+    }
+  },
+  [C.Archive]: {
+    path: "M10.0001 6.66669H9.58341M10.8334 7.451H10.4167M10.0001 8.23531H9.58341M10.8334 9.01963H10.4167M10.0001 9.80394H9.58341M10.8334 10.5883H10.4167M10.0001 11.3726C10.2211 11.3726 10.4331 11.4552 10.5893 11.6023C10.7456 11.7494 10.8334 11.9489 10.8334 12.1569V12.9412C10.8334 13.0452 10.7895 13.1449 10.7114 13.2185C10.6332 13.292 10.5273 13.3334 10.4167 13.3334H9.58341C9.47291 13.3334 9.36693 13.292 9.28879 13.2185C9.21065 13.1449 9.16675 13.0452 9.16675 12.9412V12.1569C9.16675 11.9489 9.25455 11.7494 9.41083 11.6023C9.56711 11.4552 9.77907 11.3726 10.0001 11.3726Z",
+    sheet: {
+      x1: "24.5",
+      y1: "-9.5",
+      x2: "2.5",
+      y2: "20",
+      from: "var(--bg-visual-green-1, #CDE8E5)",
+      to: "var(--text-visual-green-3, #065F46)"
+    }
+  },
+  [C.Dial]: {
+    path: "M8.26392 7.44049C8.80816 7.44049 9.28449 7.50578 9.69653 7.63092L9.69849 7.6319C10.1079 7.75343 10.4556 7.938 10.7463 8.1817L10.7483 8.18365C11.0312 8.41601 11.2537 8.72491 11.4104 9.12115V9.12213C11.5666 9.51456 11.6496 9.98403 11.6497 10.5381C11.6497 11.5957 11.3539 12.3492 10.8108 12.8565C10.2602 13.3708 9.47204 13.6504 8.39868 13.6505H6.71313V7.44049H8.26392Z",
+    fillPath: "M12.7167 12.1008L12.9558 12.3564L12.9558 12.3564L12.7167 12.1008ZM11.4504 6.20825L11.3486 6.54311L11.3507 6.54375L11.4504 6.20825ZM12.637 6.833L12.4119 7.10109L12.4147 7.10334L12.637 6.833ZM13.4108 7.9263L13.0853 8.05488L13.0856 8.05566L13.4108 7.9263ZM11.1666 12.8853L11.0909 12.5436V12.5436L11.1666 12.8853ZM10.4391 12.6553C10.2487 12.689 10.1217 12.8706 10.1553 13.0609C10.189 13.2513 10.3706 13.3783 10.5609 13.3447L10.5 13L10.4391 12.6553ZM13.6781 9.49291H13.3281C13.3281 10.5655 13.0283 11.33 12.4776 11.8451L12.7167 12.1008L12.9558 12.3564C13.687 11.6724 14.0281 10.6984 14.0281 9.49291H13.6781ZM7.9751 6.12805H8.3251C8.3251 6.24476 8.23053 6.35 8.1009 6.35V6V5.65C7.83231 5.65 7.6251 5.86989 7.6251 6.12805H7.9751ZM8.1009 6V6.35H9.89799V6V5.65H8.1009V6ZM9.89799 6V6.35C10.449 6.35 10.9312 6.41618 11.3486 6.54311L11.4504 6.20825L11.5522 5.87339C11.0566 5.72265 10.5039 5.65 9.89799 5.65V6ZM11.4504 6.20825L11.3507 6.54375C11.7654 6.66701 12.1173 6.85376 12.4119 7.10107L12.637 6.833L12.862 6.56492C12.4875 6.2506 12.0484 6.02084 11.5501 5.87275L11.4504 6.20825ZM12.637 6.833L12.4147 7.10334C12.7016 7.33926 12.9264 7.65273 13.0853 8.05488L13.4108 7.9263L13.7363 7.79772C13.5387 7.29746 13.2477 6.88206 12.8593 6.56265L12.637 6.833ZM13.4108 7.9263L13.0856 8.05566C13.2441 8.45409 13.3281 8.93071 13.3281 9.49291H13.6781H14.0281C14.0281 8.86239 13.934 8.29465 13.736 7.79694L13.4108 7.9263ZM7.9751 7.21882H8.3251V6.12805H7.9751H7.6251V7.21882H7.9751ZM12.7167 12.1008L12.4776 11.8451C12.117 12.1824 11.6591 12.4177 11.0909 12.5436L11.1666 12.8853L11.2423 13.227C11.9168 13.0776 12.4923 12.7898 12.9558 12.3564L12.7167 12.1008ZM11.1666 12.8853L11.0909 12.5436C11.091 12.5435 11.0826 12.5452 11.0606 12.5493C11.041 12.5528 11.0155 12.5573 10.9857 12.5625C10.926 12.5729 10.8511 12.5857 10.7756 12.5984C10.6269 12.6236 10.472 12.6495 10.4391 12.6553L10.5 13L10.5609 13.3447C10.6064 13.3366 11.1725 13.2425 11.2423 13.227L11.1666 12.8853Z",
+    sheet: "var(--bg-gradient-2, #885DF2)"
+  },
+  [C.Other]: {
+    path: "M6.80005 8H13.2M6.80005 10.2222H13.2M6.80005 12.4444H13.2",
+    sheet: r
+  }
+}, V = ({ size: o, kind: H }) => {
+  const a = `dial-kit-file-gradient-${h().replace(/[^\w-]/g, "")}`, { path: L, fillPath: M, sheet: t } = d[H], i = typeof t == "string";
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      width: o,
+      height: o,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ e(
+          "path",
+          {
+            d: "M17.4999 3.97859V16C17.4999 18.2091 15.709 20 13.4999 20H6.5C4.29086 20 2.5 18.2091 2.5 16V4C2.5 1.79086 4.29086 0 6.5 0H13.1683H13.5213C15.7186 0 17.4999 1.78128 17.4999 3.97859Z",
+            fill: i ? t : `url(#${a})`
+          }
+        ),
+        L && /* @__PURE__ */ e(
+          "path",
+          {
+            d: L,
+            stroke: n,
+            strokeWidth: "0.7",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        M && /* @__PURE__ */ e("path", { d: M, fill: n }),
+        !i && /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ s(
+          "linearGradient",
+          {
+            id: a,
+            x1: t.x1,
+            y1: t.y1,
+            x2: t.x2,
+            y2: t.y2,
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ e("stop", { stopColor: t.from }),
+              /* @__PURE__ */ e("stop", { offset: "1", stopColor: t.to })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  V as FileGlyph
+};

package/dist/components/New/FileIcon/icons/FolderGlyph.js

@@ -0,0 +1,50 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { useId as i } from "react";
+const n = ({ size: e }) => {
+  const t = `dial-kit-folder-gradient-${i().replace(/[^\w-]/g, "")}`;
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      width: e,
+      height: e,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M6.38992 3.75H4.66663C3.00977 3.75 1.66663 5.09315 1.66663 6.75V7.91667H7.16339L10.8333 5.79247L7.85075 4.1297C7.40412 3.8807 6.90127 3.75 6.38992 3.75Z",
+            fill: "var(--stroke-gradient-1, #5976E9)"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M14.3333 5.41669C16.5424 5.41669 18.3333 7.20755 18.3333 9.41669V12.25C18.3333 14.4592 16.5424 16.25 14.3333 16.25H5.66663C3.45749 16.25 1.66663 14.4592 1.66663 12.25V7.6708C1.66663 7.11851 2.11434 6.6708 2.66663 6.6708H6.89447C7.43998 6.6708 7.97973 6.55922 8.48053 6.34291L9.86582 5.74458C10.3666 5.52827 10.9064 5.41669 11.4519 5.41669H14.3333Z",
+            fill: `url(#${t})`
+          }
+        ),
+        /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ o(
+          "linearGradient",
+          {
+            id: t,
+            x1: "17.0833",
+            y1: "5.83335",
+            x2: "9.38489",
+            y2: "19.6653",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ r("stop", { stopColor: "var(--stroke-secondary, #D1DBEA)" }),
+              /* @__PURE__ */ r("stop", { offset: "0.91", stopColor: "var(--stroke-gradient-1, #5976E9)" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  n as FolderGlyph
+};