@clickhouse/click-ui 0.0.200 → 0.0.201

package/dist/click-ui.es.js

@@ -5,7 +5,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
-import { keyframes, styled, useTheme, css as css$1, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from "styled-components";
+import styled$1, { keyframes, styled, useTheme, css as css$1, createGlobalStyle, ThemeProvider as ThemeProvider$1 } from "styled-components";
 import * as React from "react";
 import React__default, { forwardRef, useCallback, createContext, useMemo, createElement as createElement$1, useContext, useRef, useEffect, useState, Children, isValidElement, cloneElement, Fragment, useLayoutEffect, useReducer, useId, PureComponent, Component, memo } from "react";
 import * as ReactDOM from "react-dom";
@@ -16782,6 +16782,287 @@ const DialogContent = ({
 };
 DialogContent.displayName = "DialogContent";
 Dialog.Content = DialogContent;
+const truncateFilename = (filename, maxLength = 40, delimiter = "~") => {
+  if (filename.length <= maxLength) {
+    return filename;
+  }
+  if (filename.startsWith(".")) {
+    return `${filename.slice(0, maxLength)}${delimiter}`;
+  }
+  const extension = filename.lastIndexOf(".") !== -1 ? filename.slice(filename.lastIndexOf(".")) : "";
+  const nameWithoutExtension = extension ? filename.slice(0, filename.lastIndexOf(".")) : filename;
+  const truncatedName = nameWithoutExtension.slice(0, maxLength) + delimiter;
+  return truncatedName + extension;
+};
+const UploadArea = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-0"
+})(["background-color:", ";border:", ";border-radius:", ";padding:", ";display:flex;flex-direction:", ";align-items:center;justify-content:", ";gap:", ";cursor:", ";transition:", ";", " ", ""], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.background.default, ({
+  theme: theme2
+}) => `1px solid ${theme2.click.fileUpload.color.stroke.default}`, ({
+  theme: theme2,
+  $hasFile
+}) => $hasFile ? `${theme2.click.fileUpload.sm.radii.all}` : `${theme2.click.fileUpload.md.radii.all}`, ({
+  theme: theme2,
+  $hasFile,
+  $size
+}) => $hasFile || $size === "sm" ? `${theme2.click.fileUpload.sm.space.y} ${theme2.click.fileUpload.sm.space.x}` : `${theme2.click.fileUpload.md.space.y} ${theme2.click.fileUpload.md.space.x}`, (props) => props.$hasFile ? "row" : props.$size === "sm" ? "row" : "column", (props) => props.$hasFile ? "space-between" : props.$size === "sm" ? "space-between" : "center", ({
+  theme: theme2,
+  $size
+}) => $size === "sm" ? theme2.click.fileUpload.sm.space.gap : theme2.click.fileUpload.md.space.gap, (props) => props.$hasFile ? "default" : "pointer", ({
+  theme: theme2
+}) => theme2.click.fileUpload.transitions.all, (props) => !props.$hasFile && css$1(["border-style:dashed;border-color:", ";", ""], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.stroke.default, props.$isDragging && css$1(["background-color:", ";border-color:", ";"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.background.active, ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.stroke.active)), (props) => props.$isError && css$1(["background-color:", ";border:none;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.background.error));
+const FileUploadTitle = styled$1(Title$2).withConfig({
+  componentId: "sc-1rzizve-1"
+})(["font:", ";color:", ";"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.typography.title.default, ({
+  theme: theme2,
+  $isNotSupported
+}) => $isNotSupported ? theme2.click.fileUpload.color.title.error : theme2.click.fileUpload.color.title.default);
+const FileUploadDescription = styled$1(Text).withConfig({
+  componentId: "sc-1rzizve-2"
+})(["font:", ";color:", ";"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.typography.description.default, ({
+  theme: theme2
+}) => theme2.click.fileUpload.color.description.default);
+const DocumentIcon = styled$1(SvgImage).withConfig({
+  componentId: "sc-1rzizve-3"
+})(["svg{width:", ";height:", ";color:", ";}"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.icon.size.width, ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.icon.size.height, ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.color.icon.default);
+const UploadIcon = styled$1(SvgImage).withConfig({
+  componentId: "sc-1rzizve-4"
+})(["svg{width:", ";height:", ";color:", ";}"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.icon.size.width, ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.icon.size.height, ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.color.icon.default);
+const UploadText = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-5"
+})(["text-align:", ";", " ", ""], (props) => props.$hasFile || props.$size === "sm" ? "left" : "center", (props) => (props.$hasFile || props.$size === "sm") && css$1(["flex:1;"]), (props) => !props.$hasFile && props.$size === "md" && css$1(["display:flex;flex-direction:column;align-items:center;width:100%;"]));
+const FileInfoHeader = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-6"
+})(["display:flex;align-items:center;gap:", ";width:100%;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.sm.space.gap);
+const FileInfo = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-7"
+})(["display:flex;flex-direction:column;gap:", ";flex:1;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.hasFile.header.space.gap);
+const FileDetails = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-8"
+})(["display:flex;gap:", ";border:none;"], ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.space.gap);
+const FileActions = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-9"
+})(["display:flex;align-items:center;margin-left:auto;gap:0;"]);
+const ProgressContainer$1 = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-10"
+})(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;"]);
+const ProgressBarContainer = styled$1.div.withConfig({
+  componentId: "sc-1rzizve-11"
+})(["width:100%;flex:1;"]);
+const ProgressPercentage = styled$1(Text).withConfig({
+  componentId: "sc-1rzizve-12"
+})(["min-width:", ";text-align:right;padding-right:", ";"], ({
+  theme: theme2
+}) => theme2.sizes[10], ({
+  theme: theme2
+}) => theme2.click.fileUpload.md.space.gap);
+const formatFileSize = (sizeInBytes) => {
+  if (sizeInBytes < 1024) {
+    return `${sizeInBytes.toFixed(1)} B`;
+  } else if (sizeInBytes < 1024 * 1024) {
+    return `${(sizeInBytes / 1024).toFixed(1)} KB`;
+  } else if (sizeInBytes < 1024 * 1024 * 1024) {
+    return `${(sizeInBytes / (1024 * 1024)).toFixed(1)} MB`;
+  } else {
+    return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+  }
+};
+const isFiletypeSupported = (filename, supportedTypes) => {
+  if (!supportedTypes.length)
+    return true;
+  const extension = filename.toLowerCase().slice(filename.lastIndexOf("."));
+  return supportedTypes.some((type) => type.toLowerCase() === extension.toLowerCase());
+};
+const FileUpload = ({
+  title,
+  supportedFileTypes = [".txt", ".sql"],
+  size: size2 = "sm",
+  onFileSelect,
+  onRetry,
+  progress = 0,
+  failureMessage = "Upload failed",
+  showProgress = false,
+  showSuccess = false,
+  onFileSelectFailure
+}) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const [isNotSupported, setIsNotSupported] = useState(false);
+  const [file, setFile] = useState(null);
+  const fileInputRef = useRef(null);
+  const dragCounterRef = useRef(0);
+  useEffect(() => {
+    let timeoutId;
+    if (isNotSupported) {
+      timeoutId = setTimeout(() => {
+        setIsNotSupported(false);
+      }, 2e3);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [isNotSupported]);
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current += 1;
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragCounterRef.current -= 1;
+    if (dragCounterRef.current <= 0) {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    }
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  useEffect(() => {
+    const handleDragEnd = () => {
+      setIsDragging(false);
+      dragCounterRef.current = 0;
+    };
+    window.addEventListener("dragend", handleDragEnd);
+    document.addEventListener("drop", handleDragEnd);
+    document.addEventListener("mouseleave", handleDragEnd);
+    return () => {
+      window.removeEventListener("dragend", handleDragEnd);
+      document.removeEventListener("drop", handleDragEnd);
+      document.removeEventListener("mouseleave", handleDragEnd);
+    };
+  }, []);
+  const processFile = useCallback((file2) => {
+    if (!isFiletypeSupported(file2.name, supportedFileTypes)) {
+      if (onFileSelectFailure) {
+        onFileSelectFailure();
+        console.log("File type not supported");
+        setIsNotSupported(true);
+      } else {
+        console.warn(`File type not supported: ${file2.name}`);
+      }
+      return;
+    }
+    const newFile = {
+      name: file2.name,
+      size: file2.size
+    };
+    setFile(newFile);
+    if (onFileSelect) {
+      onFileSelect(file2);
+      setIsNotSupported(false);
+    }
+  }, [onFileSelect, supportedFileTypes, onFileSelectFailure]);
+  const handleDrop = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    dragCounterRef.current = 0;
+    if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+      const file2 = e.dataTransfer.files[0];
+      processFile(file2);
+    }
+  }, [processFile]);
+  const handleFileSelect = useCallback((e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const file2 = e.target.files[0];
+      processFile(file2);
+    }
+  }, [processFile]);
+  const handleBrowseClick = useCallback(() => {
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, []);
+  const handleRemoveFile = useCallback(() => {
+    setFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  }, []);
+  const handleRetryUpload = useCallback(() => {
+    if (onRetry) {
+      onRetry();
+    }
+  }, [onRetry]);
+  const acceptedFileTypes = supportedFileTypes.join(",");
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(UploadArea, { $isDragging: isDragging, $size: size2, $hasFile: !!file, $isError: !!file && !showSuccess && !showProgress, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: !file ? handleBrowseClick : void 0, children: !file ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(UploadIcon, { name: "upload" }),
+      /* @__PURE__ */ jsxs(UploadText, { $size: size2, $hasFile: false, children: [
+        isNotSupported ? /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsx(FileUploadTitle, { $isNotSupported: isNotSupported, type: "h1", children: title }),
+        /* @__PURE__ */ jsxs(FileUploadDescription, { children: [
+          "Files supported: ",
+          supportedFileTypes.join(", ")
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { type: "secondary", onClick: (e) => {
+        e.stopPropagation();
+        handleBrowseClick();
+      }, children: "Browse file" })
+    ] }) : /* @__PURE__ */ jsxs(FileInfo, { children: [
+      /* @__PURE__ */ jsxs(FileInfoHeader, { children: [
+        /* @__PURE__ */ jsx(DocumentIcon, { name: "document" }),
+        /* @__PURE__ */ jsxs(FileDetails, { children: [
+          /* @__PURE__ */ jsx(Text, { size: "md", children: truncateFilename(file.name) }),
+          (showSuccess || showProgress) && /* @__PURE__ */ jsx(Text, { size: "md", color: "muted", children: formatFileSize(file.size) }),
+          !showProgress && !showSuccess && /* @__PURE__ */ jsx(Text, { size: "md", color: "danger", children: failureMessage }),
+          showSuccess && /* @__PURE__ */ jsx(SvgImage, { size: "xs", state: "success", name: "check" })
+        ] }),
+        /* @__PURE__ */ jsxs(FileActions, { children: [
+          !showProgress && !showSuccess && /* @__PURE__ */ jsx(IconButton$1, { size: "sm", icon: "refresh", type: "ghost", onClick: handleRetryUpload }),
+          /* @__PURE__ */ jsx(IconButton$1, { size: "sm", icon: "cross", type: "ghost", onClick: handleRemoveFile })
+        ] })
+      ] }),
+      showProgress && /* @__PURE__ */ jsxs(ProgressContainer$1, { children: [
+        /* @__PURE__ */ jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsx(ProgressBar, { progress, type: "small" }) }),
+        /* @__PURE__ */ jsxs(ProgressPercentage, { size: "sm", color: "muted", children: [
+          progress,
+          "%"
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, style: {
+      display: "none"
+    } })
+  ] });
+};
 const Flyout = ({
   modal = false,
   ...props
@@ -42938,6 +43219,126 @@ const click$3 = {
       }
     }
   },
+  datePicker: {
+    dateOption: {
+      color: {
+        label: {
+          "default": "#161517",
+          hover: "#161517",
+          active: "#ffffff",
+          disabled: "#a0a0a0",
+          range: "#161517"
+        },
+        background: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        },
+        stroke: {
+          "default": "#ffffff",
+          hover: "#151515",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        }
+      }
+    },
+    color: {
+      title: {
+        "default": "lch(10.2 1.39 305)"
+      },
+      daytitle: {
+        "default": "#696e79"
+      }
+    }
+  },
+  dialog: {
+    typography: {
+      title: {
+        "default": `600 1rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      }
+    }
+  },
+  flyout: {
+    typography: {
+      title: {
+        "default": `600 1rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      }
+    },
+    color: {
+      background: {
+        "default": "#ffffff"
+      },
+      title: {
+        "default": "lch(10.2 1.39 305)"
+      },
+      description: {
+        "default": "#696e79"
+      },
+      opaqueBackground: {
+        "default": "lch(6.77 0 0 / 0.45)"
+      },
+      stroke: {
+        "default": "#e6e7e9"
+      }
+    }
+  },
+  grid: {
+    header: {
+      cell: {
+        color: {
+          background: {
+            "default": "#f6f7fa",
+            selectIndirect: "lch(99.6 3.76 101)",
+            selectDirect: "lch(97.5 12 97.4)"
+          },
+          title: {
+            "default": "#696e79",
+            selectIndirect: "#161517",
+            selectDirect: "#161517"
+          },
+          stroke: {
+            "default": "lch(89.3 1.07 266)",
+            selectIndirect: "lch(92.8 31.1 85.9)",
+            selectDirect: "lch(90.9 28.1 85.9)"
+          }
+        }
+      }
+    },
+    body: {
+      cell: {
+        color: {
+          background: {
+            "default": "#ffffff",
+            selectIndirect: "lch(99.4 8.48 102 / 0.2)",
+            selectDirect: "lch(99.4 8.48 102 / 0.2)"
+          },
+          stroke: {
+            "default": "#e6e7e9",
+            selectIndirect: "lch(74.1 25.6 85.9)",
+            selectDirect: "#FFC029"
+          },
+          text: {
+            "default": "lch(7.17 1.44 305)",
+            selectIndirect: "#161517",
+            selectDirect: "#161517"
+          }
+        }
+      }
+    },
+    global: {
+      color: {
+        stroke: {
+          "default": "#e6e7e9"
+        },
+        background: {
+          "default": "#ffffff"
+        }
+      }
+    }
+  },
   sidebar: {
     main: {
       color: {
@@ -43192,126 +43593,6 @@ const click$3 = {
       }
     }
   },
-  dialog: {
-    typography: {
-      title: {
-        "default": `600 1rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-      }
-    }
-  },
-  flyout: {
-    typography: {
-      title: {
-        "default": `600 1rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-      }
-    },
-    color: {
-      background: {
-        "default": "#ffffff"
-      },
-      title: {
-        "default": "lch(10.2 1.39 305)"
-      },
-      description: {
-        "default": "#696e79"
-      },
-      opaqueBackground: {
-        "default": "lch(6.77 0 0 / 0.45)"
-      },
-      stroke: {
-        "default": "#e6e7e9"
-      }
-    }
-  },
-  grid: {
-    header: {
-      cell: {
-        color: {
-          background: {
-            "default": "#f6f7fa",
-            selectIndirect: "lch(99.6 3.76 101)",
-            selectDirect: "lch(97.5 12 97.4)"
-          },
-          title: {
-            "default": "#696e79",
-            selectIndirect: "#161517",
-            selectDirect: "#161517"
-          },
-          stroke: {
-            "default": "lch(89.3 1.07 266)",
-            selectIndirect: "lch(92.8 31.1 85.9)",
-            selectDirect: "lch(90.9 28.1 85.9)"
-          }
-        }
-      }
-    },
-    body: {
-      cell: {
-        color: {
-          background: {
-            "default": "#ffffff",
-            selectIndirect: "lch(99.4 8.48 102 / 0.2)",
-            selectDirect: "lch(99.4 8.48 102 / 0.2)"
-          },
-          stroke: {
-            "default": "#e6e7e9",
-            selectIndirect: "lch(74.1 25.6 85.9)",
-            selectDirect: "#FFC029"
-          },
-          text: {
-            "default": "lch(7.17 1.44 305)",
-            selectIndirect: "#161517",
-            selectDirect: "#161517"
-          }
-        }
-      }
-    },
-    global: {
-      color: {
-        stroke: {
-          "default": "#e6e7e9"
-        },
-        background: {
-          "default": "#ffffff"
-        }
-      }
-    }
-  },
-  datePicker: {
-    dateOption: {
-      color: {
-        label: {
-          "default": "#161517",
-          hover: "#161517",
-          active: "#ffffff",
-          disabled: "#a0a0a0",
-          range: "#161517"
-        },
-        background: {
-          "default": "#ffffff",
-          hover: "#ffffff",
-          active: "#151515",
-          disabled: "#ffffff",
-          range: "#e6e7e9"
-        },
-        stroke: {
-          "default": "#ffffff",
-          hover: "#151515",
-          active: "#151515",
-          disabled: "#ffffff",
-          range: "#e6e7e9"
-        }
-      }
-    },
-    color: {
-      title: {
-        "default": "lch(10.2 1.39 305)"
-      },
-      daytitle: {
-        "default": "#696e79"
-      }
-    }
-  },
   global: {
     color: {
       text: {
@@ -44353,6 +44634,57 @@ const click$2 = {
       }
     }
   },
+  datePicker: {
+    dateOption: {
+      color: {
+        label: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#1F1F1C",
+          disabled: "#a0a0a0",
+          range: "#ffffff"
+        },
+        background: {
+          "default": "#1F1F1C",
+          hover: "#1F1F1C",
+          active: "#FAFF69",
+          disabled: "#1F1F1C",
+          range: "#323232"
+        },
+        stroke: {
+          "default": "#1F1F1C",
+          hover: "#FAFF69",
+          active: "#FAFF69",
+          disabled: "#1F1F1C",
+          range: "#323232"
+        }
+      }
+    },
+    color: {
+      title: {
+        "default": "rgb(97.5% 97.5% 97.5%)"
+      },
+      daytitle: {
+        "default": "#b3b6bd"
+      }
+    }
+  },
+  dialog: {
+    color: {
+      background: {
+        "default": "#1F1F1C"
+      },
+      title: {
+        "default": "rgb(97.5% 97.5% 97.5%)"
+      },
+      description: {
+        "default": "#b3b6bd"
+      },
+      opaqueBackground: {
+        "default": "lch(40.7 0 0 / 0.75)"
+      }
+    }
+  },
   field: {
     color: {
       background: {
@@ -44402,6 +44734,67 @@ const click$2 = {
       }
     }
   },
+  fileUpload: {
+    sm: {
+      color: {
+        icon: {
+          "default": "#b3b6bd"
+        }
+      }
+    },
+    md: {
+      color: {
+        icon: {
+          "default": "#ffffff"
+        }
+      }
+    },
+    color: {
+      background: {
+        "default": "#1F1F1C",
+        hover: "#1F1F1C",
+        active: "rgb(19.9% 19.9% 19.9%)",
+        error: "rgb(100% 13.7% 13.7% / 0.2)"
+      },
+      stroke: {
+        "default": "rgb(23.6% 23.6% 23.6%)",
+        hover: "rgb(23.6% 23.6% 23.6%)",
+        active: "#414141",
+        error: "rgba(0,0,0,0)"
+      },
+      title: {
+        "default": "#ffffff",
+        hover: "#ffffff",
+        active: "#ffffff",
+        error: "#ffbaba"
+      },
+      description: {
+        "default": "#b3b6bd",
+        hover: "#b3b6bd",
+        active: "#b3b6bd",
+        error: "#ffbaba"
+      }
+    }
+  },
+  flyout: {
+    color: {
+      background: {
+        "default": "#282828"
+      },
+      title: {
+        "default": "rgb(97.5% 97.5% 97.5%)"
+      },
+      description: {
+        "default": "#b3b6bd"
+      },
+      opaqueBackground: {
+        "default": "lch(6.77 0 0 / 0.45)"
+      },
+      stroke: {
+        "default": "#323232"
+      }
+    }
+  },
   genericMenu: {
     item: {
       color: {
@@ -44476,6 +44869,88 @@ const click$2 = {
       }
     }
   },
+  grid: {
+    header: {
+      cell: {
+        color: {
+          background: {
+            "default": "#282828",
+            selectIndirect: "lch(19.5 0 0)",
+            selectDirect: "lch(27.3 0 0)"
+          },
+          title: {
+            "default": "#b3b6bd",
+            selectIndirect: "#ffffff",
+            selectDirect: "#ffffff"
+          },
+          stroke: {
+            "default": "lch(20.3 0 0)",
+            selectIndirect: "lch(26.8 0 0)",
+            selectDirect: "lch(29.4 0 0)"
+          }
+        }
+      }
+    },
+    body: {
+      cell: {
+        color: {
+          background: {
+            "default": "#1F1F1C",
+            selectIndirect: "lch(15.8 0 0)",
+            selectDirect: "lch(15.8 0 0)"
+          },
+          stroke: {
+            "default": "#323232",
+            selectIndirect: "lch(22 0 0)",
+            selectDirect: "#FAFF69"
+          },
+          text: {
+            "default": "lch(100 0 0)",
+            selectIndirect: "#ffffff",
+            selectDirect: "#ffffff"
+          }
+        }
+      }
+    },
+    global: {
+      color: {
+        stroke: {
+          "default": "#323232"
+        },
+        background: {
+          "default": "#1F1F1C"
+        }
+      }
+    }
+  },
+  icon: {
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.2)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.2)",
+        info: "rgb(26.3% 49.4% 93.7% / 0.2)",
+        warning: "rgb(100% 46.7% 16.1% / 0.2)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#CCFFD0",
+        neutral: "#c0c0c0",
+        danger: "#ffbaba",
+        info: "#D0DFFB",
+        warning: "#FFB88F"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+        warning: "rgb(100% 46.7% 16.1% / 0.05)"
+      }
+    }
+  },
   image: {
     color: {
       stroke: "#ffffff"
@@ -44895,158 +45370,6 @@ const click$2 = {
       }
     }
   },
-  dialog: {
-    color: {
-      background: {
-        "default": "#1F1F1C"
-      },
-      title: {
-        "default": "rgb(97.5% 97.5% 97.5%)"
-      },
-      description: {
-        "default": "#b3b6bd"
-      },
-      opaqueBackground: {
-        "default": "lch(40.7 0 0 / 0.75)"
-      }
-    }
-  },
-  flyout: {
-    color: {
-      background: {
-        "default": "#282828"
-      },
-      title: {
-        "default": "rgb(97.5% 97.5% 97.5%)"
-      },
-      description: {
-        "default": "#b3b6bd"
-      },
-      opaqueBackground: {
-        "default": "lch(6.77 0 0 / 0.45)"
-      },
-      stroke: {
-        "default": "#323232"
-      }
-    }
-  },
-  grid: {
-    header: {
-      cell: {
-        color: {
-          background: {
-            "default": "#282828",
-            selectIndirect: "lch(19.5 0 0)",
-            selectDirect: "lch(27.3 0 0)"
-          },
-          title: {
-            "default": "#b3b6bd",
-            selectIndirect: "#ffffff",
-            selectDirect: "#ffffff"
-          },
-          stroke: {
-            "default": "lch(20.3 0 0)",
-            selectIndirect: "lch(26.8 0 0)",
-            selectDirect: "lch(29.4 0 0)"
-          }
-        }
-      }
-    },
-    body: {
-      cell: {
-        color: {
-          background: {
-            "default": "#1F1F1C",
-            selectIndirect: "lch(15.8 0 0)",
-            selectDirect: "lch(15.8 0 0)"
-          },
-          stroke: {
-            "default": "#323232",
-            selectIndirect: "lch(22 0 0)",
-            selectDirect: "#FAFF69"
-          },
-          text: {
-            "default": "lch(100 0 0)",
-            selectIndirect: "#ffffff",
-            selectDirect: "#ffffff"
-          }
-        }
-      }
-    },
-    global: {
-      color: {
-        stroke: {
-          "default": "#323232"
-        },
-        background: {
-          "default": "#1F1F1C"
-        }
-      }
-    }
-  },
-  icon: {
-    color: {
-      background: {
-        "default": "rgba(0,0,0,0)",
-        success: "rgb(20% 100% 26.7% / 0.2)",
-        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
-        danger: "rgb(100% 13.7% 13.7% / 0.2)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.2)",
-        warning: "rgb(100% 46.7% 16.1% / 0.2)"
-      },
-      text: {
-        "default": "rgba(0,0,0,0)",
-        success: "#CCFFD0",
-        neutral: "#c0c0c0",
-        danger: "#ffbaba",
-        info: "#D0DFFB",
-        warning: "#FFB88F"
-      },
-      stroke: {
-        "default": "rgba(0,0,0,0)",
-        success: "rgb(20% 100% 26.7% / 0.05)",
-        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
-        danger: "rgb(100% 13.7% 13.7% / 0.05)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-        warning: "rgb(100% 46.7% 16.1% / 0.05)"
-      }
-    }
-  },
-  datePicker: {
-    dateOption: {
-      color: {
-        label: {
-          "default": "#ffffff",
-          hover: "#ffffff",
-          active: "#1F1F1C",
-          disabled: "#a0a0a0",
-          range: "#ffffff"
-        },
-        background: {
-          "default": "#1F1F1C",
-          hover: "#1F1F1C",
-          active: "#FAFF69",
-          disabled: "#1F1F1C",
-          range: "#323232"
-        },
-        stroke: {
-          "default": "#1F1F1C",
-          hover: "#FAFF69",
-          active: "#FAFF69",
-          disabled: "#1F1F1C",
-          range: "#323232"
-        }
-      }
-    },
-    color: {
-      title: {
-        "default": "rgb(97.5% 97.5% 97.5%)"
-      },
-      daytitle: {
-        "default": "#b3b6bd"
-      }
-    }
-  },
   global: {
     color: {
       background: {
@@ -46123,6 +46446,57 @@ const click$1 = {
       }
     }
   },
+  datePicker: {
+    dateOption: {
+      color: {
+        label: {
+          "default": "#161517",
+          hover: "#161517",
+          active: "#ffffff",
+          disabled: "#a0a0a0",
+          range: "#161517"
+        },
+        background: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        },
+        stroke: {
+          "default": "#ffffff",
+          hover: "#151515",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        }
+      }
+    },
+    color: {
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      daytitle: {
+        "default": "#696e79"
+      }
+    }
+  },
+  dialog: {
+    color: {
+      background: {
+        "default": "#ffffff"
+      },
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      description: {
+        "default": "#696e79"
+      },
+      opaqueBackground: {
+        "default": "lch(6.77 0 0 / 0.75)"
+      }
+    }
+  },
   field: {
     color: {
       background: {
@@ -46172,6 +46546,64 @@ const click$1 = {
       }
     }
   },
+  fileUpload: {
+    sm: {
+      color: {
+        icon: {
+          "default": "#696e79"
+        }
+      }
+    },
+    md: {
+      color: {
+        icon: {
+          "default": "#161517"
+        }
+      }
+    },
+    color: {
+      background: {
+        "default": "#ffffff",
+        hover: "#ffffff",
+        active: "rgb(96.6% 96.9% 98.1%)",
+        error: "rgb(100% 13.7% 13.7% / 0.1)"
+      },
+      stroke: {
+        "default": "rgb(90.7% 91.1% 91.8%)",
+        hover: "rgb(90.7% 91.1% 91.8%)",
+        active: "#b3b6bd",
+        error: "rgba(0,0,0,0)"
+      },
+      title: {
+        "default": "#161517",
+        hover: "#161517",
+        active: "#161517",
+        error: "#c10000"
+      },
+      description: {
+        "default": "#696e79",
+        hover: "#696e79",
+        active: "#696e79",
+        error: "#c10000"
+      }
+    }
+  },
+  flyout: {
+    color: {
+      background: {
+        "default": "#ffffff"
+      },
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      description: {
+        "default": "#696e79"
+      },
+      stroke: {
+        "default": "#e6e7e9"
+      }
+    }
+  },
   genericMenu: {
     item: {
       color: {
@@ -46245,6 +46677,88 @@ const click$1 = {
       }
     }
   },
+  grid: {
+    header: {
+      cell: {
+        color: {
+          background: {
+            "default": "#f6f7fa",
+            selectIndirect: "lch(95.6 5.84 264)",
+            selectDirect: "lch(93.2 7.7 264)"
+          },
+          title: {
+            "default": "#696e79",
+            selectIndirect: "#161517",
+            selectDirect: "#161517"
+          },
+          stroke: {
+            "default": "lch(89.3 1.07 266)",
+            selectIndirect: "lch(91.8 7.59 264)",
+            selectDirect: "lch(86.1 15.1 266)"
+          }
+        }
+      }
+    },
+    body: {
+      cell: {
+        color: {
+          background: {
+            "default": "#ffffff",
+            selectIndirect: "lch(94.1 7.78 264 / 0.2)",
+            selectDirect: "lch(94.1 7.78 264 / 0.2)"
+          },
+          stroke: {
+            "default": "#e6e7e9",
+            selectIndirect: "lch(70.7 12.4 266)",
+            selectDirect: "#437EEF"
+          },
+          text: {
+            "default": "lch(7.17 1.44 305)",
+            selectIndirect: "#161517",
+            selectDirect: "#161517"
+          }
+        }
+      }
+    },
+    global: {
+      color: {
+        stroke: {
+          "default": "#e6e7e9"
+        },
+        background: {
+          "default": "#ffffff"
+        }
+      }
+    }
+  },
+  icon: {
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+        warning: "rgb(100% 46.7% 16.1% / 0.1)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#008A0B",
+        neutral: "#53575f",
+        danger: "#c10000",
+        info: "#437EEF",
+        warning: "#A33C00"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+        warning: "rgb(100% 46.7% 16.1% / 0.05)"
+      }
+    }
+  },
   image: {
     color: {
       stroke: "#161517"
@@ -46667,155 +47181,6 @@ const click$1 = {
       }
     }
   },
-  dialog: {
-    color: {
-      background: {
-        "default": "#ffffff"
-      },
-      title: {
-        "default": "lch(11.1 1.37 305)"
-      },
-      description: {
-        "default": "#696e79"
-      },
-      opaqueBackground: {
-        "default": "lch(6.77 0 0 / 0.75)"
-      }
-    }
-  },
-  flyout: {
-    color: {
-      background: {
-        "default": "#ffffff"
-      },
-      title: {
-        "default": "lch(11.1 1.37 305)"
-      },
-      description: {
-        "default": "#696e79"
-      },
-      stroke: {
-        "default": "#e6e7e9"
-      }
-    }
-  },
-  grid: {
-    header: {
-      cell: {
-        color: {
-          background: {
-            "default": "#f6f7fa",
-            selectIndirect: "lch(95.6 5.84 264)",
-            selectDirect: "lch(93.2 7.7 264)"
-          },
-          title: {
-            "default": "#696e79",
-            selectIndirect: "#161517",
-            selectDirect: "#161517"
-          },
-          stroke: {
-            "default": "lch(89.3 1.07 266)",
-            selectIndirect: "lch(91.8 7.59 264)",
-            selectDirect: "lch(86.1 15.1 266)"
-          }
-        }
-      }
-    },
-    body: {
-      cell: {
-        color: {
-          background: {
-            "default": "#ffffff",
-            selectIndirect: "lch(94.1 7.78 264 / 0.2)",
-            selectDirect: "lch(94.1 7.78 264 / 0.2)"
-          },
-          stroke: {
-            "default": "#e6e7e9",
-            selectIndirect: "lch(70.7 12.4 266)",
-            selectDirect: "#437EEF"
-          },
-          text: {
-            "default": "lch(7.17 1.44 305)",
-            selectIndirect: "#161517",
-            selectDirect: "#161517"
-          }
-        }
-      }
-    },
-    global: {
-      color: {
-        stroke: {
-          "default": "#e6e7e9"
-        },
-        background: {
-          "default": "#ffffff"
-        }
-      }
-    }
-  },
-  icon: {
-    color: {
-      background: {
-        "default": "rgba(0,0,0,0)",
-        success: "rgb(20% 100% 26.7% / 0.1)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.1)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
-      },
-      text: {
-        "default": "rgba(0,0,0,0)",
-        success: "#008A0B",
-        neutral: "#53575f",
-        danger: "#c10000",
-        info: "#437EEF",
-        warning: "#A33C00"
-      },
-      stroke: {
-        "default": "rgba(0,0,0,0)",
-        success: "rgb(20% 100% 26.7% / 0.05)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.05)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-        warning: "rgb(100% 46.7% 16.1% / 0.05)"
-      }
-    }
-  },
-  datePicker: {
-    dateOption: {
-      color: {
-        label: {
-          "default": "#161517",
-          hover: "#161517",
-          active: "#ffffff",
-          disabled: "#a0a0a0",
-          range: "#161517"
-        },
-        background: {
-          "default": "#ffffff",
-          hover: "#ffffff",
-          active: "#151515",
-          disabled: "#ffffff",
-          range: "#e6e7e9"
-        },
-        stroke: {
-          "default": "#ffffff",
-          hover: "#151515",
-          active: "#151515",
-          disabled: "#ffffff",
-          range: "#e6e7e9"
-        }
-      }
-    },
-    color: {
-      title: {
-        "default": "lch(11.1 1.37 305)"
-      },
-      daytitle: {
-        "default": "#696e79"
-      }
-    }
-  },
   global: {
     color: {
       background: {
@@ -48409,6 +48774,138 @@ const click = {
       }
     }
   },
+  container: {
+    space: {
+      none: "0",
+      xxs: "0.25rem",
+      xs: "0.5rem",
+      sm: "0.75rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem",
+      xxl: "4rem"
+    },
+    gap: {
+      none: "0",
+      xxs: "0.25rem",
+      xs: "0.5rem",
+      sm: "0.75rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem",
+      xxl: "4rem"
+    }
+  },
+  datePicker: {
+    dateOption: {
+      space: {
+        gap: "2px"
+      },
+      radii: {
+        "default": "0.25rem",
+        range: "0"
+      },
+      stroke: "1px",
+      size: {
+        height: "2rem",
+        width: "2rem"
+      },
+      typography: {
+        label: {
+          "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          hover: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          active: `600 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          disabled: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+          range: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        }
+      },
+      color: {
+        label: {
+          "default": "#161517",
+          hover: "#161517",
+          active: "#ffffff",
+          disabled: "#a0a0a0",
+          range: "#161517"
+        },
+        background: {
+          "default": "#ffffff",
+          hover: "#ffffff",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        },
+        stroke: {
+          "default": "#ffffff",
+          hover: "#151515",
+          active: "#151515",
+          disabled: "#ffffff",
+          range: "#e6e7e9"
+        }
+      }
+    },
+    space: {
+      gap: "0.25rem"
+    },
+    typography: {
+      daytitle: {
+        "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      },
+      title: {
+        "default": `600 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      }
+    },
+    color: {
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      daytitle: {
+        "default": "#696e79"
+      }
+    }
+  },
+  dialog: {
+    space: {
+      y: "1.5rem",
+      x: "2rem",
+      gap: "1rem"
+    },
+    title: {
+      space: {
+        gap: "0.25rem"
+      }
+    },
+    radii: {
+      all: "0.5rem"
+    },
+    shadow: {
+      "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)"
+    },
+    stroke: {
+      "default": "1px solid #e6e7e9"
+    },
+    typography: {
+      title: {
+        "default": `700 1.25rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      },
+      description: {
+        "default": `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      }
+    },
+    color: {
+      background: {
+        "default": "#ffffff"
+      },
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      description: {
+        "default": "#696e79"
+      },
+      opaqueBackground: {
+        "default": "lch(6.77 0 0 / 0.75)"
+      }
+    }
+  },
   docs: {
     typography: {
       titles: {
@@ -48541,6 +49038,182 @@ const click = {
       }
     }
   },
+  fileUpload: {
+    sm: {
+      icon: {
+        size: {
+          height: "1.5rem",
+          width: "1.5rem"
+        }
+      },
+      space: {
+        gap: "0.75rem",
+        x: "1rem",
+        y: "0.5rem"
+      },
+      radii: {
+        all: "0.25rem"
+      },
+      color: {
+        icon: {
+          "default": "#696e79"
+        }
+      }
+    },
+    md: {
+      icon: {
+        size: {
+          height: "2rem",
+          width: "2rem"
+        }
+      },
+      space: {
+        gap: "0.5rem",
+        x: "1rem",
+        y: "0.75rem"
+      },
+      radii: {
+        all: "0.5rem"
+      },
+      color: {
+        icon: {
+          "default": "#161517"
+        }
+      }
+    },
+    typography: {
+      title: {
+        "default": `500 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      },
+      description: {
+        "default": `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      }
+    },
+    hasFile: {
+      space: {
+        gap: "0.75rem"
+      },
+      header: {
+        space: {
+          gap: "0.5rem"
+        }
+      }
+    },
+    transitions: {
+      all: "all 100ms ease-in 0ms"
+    },
+    color: {
+      background: {
+        "default": "#ffffff",
+        hover: "#ffffff",
+        active: "rgb(96.6% 96.9% 98.1%)",
+        error: "rgb(100% 13.7% 13.7% / 0.1)"
+      },
+      stroke: {
+        "default": "rgb(90.7% 91.1% 91.8%)",
+        hover: "rgb(90.7% 91.1% 91.8%)",
+        active: "#b3b6bd",
+        error: "rgba(0,0,0,0)"
+      },
+      title: {
+        "default": "#161517",
+        hover: "#161517",
+        active: "#161517",
+        error: "#c10000"
+      },
+      description: {
+        "default": "#696e79",
+        hover: "#696e79",
+        active: "#696e79",
+        error: "#c10000"
+      }
+    }
+  },
+  flyout: {
+    space: {
+      "default": {
+        x: "0",
+        y: "1.5rem",
+        gap: "1rem",
+        top: "0",
+        content: {
+          x: "1.5rem",
+          y: "1.5rem",
+          "row-gap": "0.25rem",
+          "column-gap": "1rem"
+        }
+      },
+      inline: {
+        x: "0",
+        y: "0.75rem",
+        gap: "0.75rem",
+        top: "3.5rem",
+        content: {
+          x: "0.75rem",
+          y: "0.75rem",
+          "row-gap": "0.25rem",
+          "column-gap": "0.75rem"
+        }
+      }
+    },
+    shadow: {
+      "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+      reverse: "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+    },
+    size: {
+      "default": {
+        width: "27.5rem",
+        height: "100%"
+      },
+      wide: {
+        width: "37.5rem",
+        height: "100vh"
+      },
+      narrow: {
+        width: "21rem",
+        height: "100%"
+      },
+      widest: {
+        width: "55rem",
+        height: "100vh"
+      }
+    },
+    typography: {
+      "default": {
+        description: {
+          "default": `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        },
+        title: {
+          "default": `700 1.25rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        }
+      },
+      inline: {
+        description: {
+          "default": `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        },
+        title: {
+          "default": `600 1rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        }
+      }
+    },
+    color: {
+      background: {
+        "default": "#ffffff"
+      },
+      title: {
+        "default": "lch(11.1 1.37 305)"
+      },
+      description: {
+        "default": "#696e79"
+      },
+      opaqueBackground: {
+        "default": "lch(6.77 0 0 / 0.45)"
+      },
+      stroke: {
+        "default": "#e6e7e9"
+      }
+    }
+  },
   genericMenu: {
     item: {
       space: {
@@ -48709,6 +49382,149 @@ const click = {
       }
     }
   },
+  grid: {
+    header: {
+      cell: {
+        space: {
+          y: "0.438rem",
+          x: "0.5rem"
+        },
+        size: {
+          height: "2rem"
+        },
+        color: {
+          background: {
+            "default": "#f6f7fa",
+            selectIndirect: "lch(95.6 5.84 264)",
+            selectDirect: "lch(93.2 7.7 264)"
+          },
+          title: {
+            "default": "#696e79",
+            selectIndirect: "#161517",
+            selectDirect: "#161517"
+          },
+          stroke: {
+            "default": "lch(89.3 1.07 266)",
+            selectIndirect: "lch(91.8 7.59 264)",
+            selectDirect: "lch(86.1 15.1 266)"
+          }
+        }
+      },
+      title: {
+        "default": `500 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+      }
+    },
+    body: {
+      cell: {
+        space: {
+          y: "5.5px",
+          x: "0.5rem"
+        },
+        size: {
+          height: "2rem"
+        },
+        color: {
+          background: {
+            "default": "#ffffff",
+            selectIndirect: "lch(94.1 7.78 264 / 0.2)",
+            selectDirect: "lch(94.1 7.78 264 / 0.2)"
+          },
+          stroke: {
+            "default": "#e6e7e9",
+            selectIndirect: "lch(70.7 12.4 266)",
+            selectDirect: "#437EEF"
+          },
+          text: {
+            "default": "lch(7.17 1.44 305)",
+            selectIndirect: "#161517",
+            selectDirect: "#161517"
+          }
+        }
+      }
+    },
+    cell: {
+      text: {
+        "default": `500 0.875rem/1.5 "Inconsolata", Consolas, '"SFMono Regular"', monospace`
+      }
+    },
+    radii: {
+      none: "0",
+      sm: "0.25rem",
+      md: "0.5rem",
+      lg: "0.75rem"
+    },
+    global: {
+      color: {
+        stroke: {
+          "default": "#e6e7e9"
+        },
+        background: {
+          "default": "#ffffff"
+        }
+      }
+    }
+  },
+  gridContainer: {
+    gap: {
+      none: "0",
+      xxs: "0.25rem",
+      xs: "0.5rem",
+      sm: "0.75rem",
+      md: "1rem",
+      lg: "1.5rem",
+      xl: "2rem",
+      xxl: "4rem",
+      unset: ""
+    }
+  },
+  icon: {
+    space: {
+      xs: {
+        all: "0.25rem"
+      },
+      sm: {
+        all: "0.25rem"
+      },
+      md: {
+        all: "0.365rem"
+      },
+      lg: {
+        all: "0.5rem"
+      },
+      xl: {
+        all: "0.75rem"
+      },
+      xxl: {
+        all: "1rem"
+      }
+    },
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
+        warning: "rgb(100% 46.7% 16.1% / 0.1)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#008A0B",
+        neutral: "#53575f",
+        danger: "#c10000",
+        info: "#437EEF",
+        warning: "#A33C00"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
+        warning: "rgb(100% 46.7% 16.1% / 0.05)"
+      }
+    }
+  },
   image: {
     sm: {
       size: {
@@ -48746,10 +49562,36 @@ const click = {
         width: "4rem"
       }
     },
+    borderWidth: {
+      "default": "1.5px",
+      thin: "1px"
+    },
     color: {
       stroke: "#161517"
     }
   },
+  link: {
+    space: {
+      md: {
+        gap: "0.25rem"
+      },
+      sm: {
+        gap: "2px"
+      }
+    },
+    icon: {
+      size: {
+        sm: {
+          height: "0.75rem",
+          width: "0.75rem"
+        },
+        md: {
+          height: "1rem",
+          width: "1rem"
+        }
+      }
+    }
+  },
   panel: {
     strokeWidth: {
       "default": "1px"
@@ -49614,388 +50456,6 @@ const click = {
       }
     }
   },
-  dialog: {
-    space: {
-      y: "1.5rem",
-      x: "2rem",
-      gap: "1rem"
-    },
-    title: {
-      space: {
-        gap: "0.25rem"
-      }
-    },
-    radii: {
-      all: "0.5rem"
-    },
-    shadow: {
-      "default": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)"
-    },
-    stroke: {
-      "default": "1px solid #e6e7e9"
-    },
-    typography: {
-      title: {
-        "default": `700 1.25rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-      },
-      description: {
-        "default": `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-      }
-    },
-    color: {
-      background: {
-        "default": "#ffffff"
-      },
-      title: {
-        "default": "lch(11.1 1.37 305)"
-      },
-      description: {
-        "default": "#696e79"
-      },
-      opaqueBackground: {
-        "default": "lch(6.77 0 0 / 0.75)"
-      }
-    }
-  },
-  link: {
-    space: {
-      md: {
-        gap: "0.25rem"
-      },
-      sm: {
-        gap: "2px"
-      }
-    },
-    icon: {
-      size: {
-        sm: {
-          height: "0.75rem",
-          width: "0.75rem"
-        },
-        md: {
-          height: "1rem",
-          width: "1rem"
-        }
-      }
-    }
-  },
-  flyout: {
-    space: {
-      "default": {
-        x: "0",
-        y: "1.5rem",
-        gap: "1rem",
-        top: "0",
-        content: {
-          x: "1.5rem",
-          y: "1.5rem",
-          "row-gap": "0.25rem",
-          "column-gap": "1rem"
-        }
-      },
-      inline: {
-        x: "0",
-        y: "0.75rem",
-        gap: "0.75rem",
-        top: "3.5rem",
-        content: {
-          x: "0.75rem",
-          y: "0.75rem",
-          "row-gap": "0.25rem",
-          "column-gap": "0.75rem"
-        }
-      }
-    },
-    shadow: {
-      "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
-      reverse: "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
-    },
-    size: {
-      "default": {
-        width: "27.5rem",
-        height: "100%"
-      },
-      wide: {
-        width: "37.5rem",
-        height: "100vh"
-      },
-      narrow: {
-        width: "21rem",
-        height: "100%"
-      },
-      widest: {
-        width: "55rem",
-        height: "100vh"
-      }
-    },
-    typography: {
-      "default": {
-        description: {
-          "default": `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-        },
-        title: {
-          "default": `700 1.25rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-        }
-      },
-      inline: {
-        description: {
-          "default": `400 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-        },
-        title: {
-          "default": `600 1rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-        }
-      }
-    },
-    color: {
-      background: {
-        "default": "#ffffff"
-      },
-      title: {
-        "default": "lch(11.1 1.37 305)"
-      },
-      description: {
-        "default": "#696e79"
-      },
-      opaqueBackground: {
-        "default": "lch(6.77 0 0 / 0.45)"
-      },
-      stroke: {
-        "default": "#e6e7e9"
-      }
-    }
-  },
-  grid: {
-    header: {
-      cell: {
-        space: {
-          y: "0.438rem",
-          x: "0.5rem"
-        },
-        size: {
-          height: "2rem"
-        },
-        color: {
-          background: {
-            "default": "#f6f7fa",
-            selectIndirect: "lch(95.6 5.84 264)",
-            selectDirect: "lch(93.2 7.7 264)"
-          },
-          title: {
-            "default": "#696e79",
-            selectIndirect: "#161517",
-            selectDirect: "#161517"
-          },
-          stroke: {
-            "default": "lch(89.3 1.07 266)",
-            selectIndirect: "lch(91.8 7.59 264)",
-            selectDirect: "lch(86.1 15.1 266)"
-          }
-        }
-      },
-      title: {
-        "default": `500 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-      }
-    },
-    body: {
-      cell: {
-        space: {
-          y: "5.5px",
-          x: "0.5rem"
-        },
-        size: {
-          height: "2rem"
-        },
-        color: {
-          background: {
-            "default": "#ffffff",
-            selectIndirect: "lch(94.1 7.78 264 / 0.2)",
-            selectDirect: "lch(94.1 7.78 264 / 0.2)"
-          },
-          stroke: {
-            "default": "#e6e7e9",
-            selectIndirect: "lch(70.7 12.4 266)",
-            selectDirect: "#437EEF"
-          },
-          text: {
-            "default": "lch(7.17 1.44 305)",
-            selectIndirect: "#161517",
-            selectDirect: "#161517"
-          }
-        }
-      }
-    },
-    cell: {
-      text: {
-        "default": `500 0.875rem/1.5 "Inconsolata", Consolas, '"SFMono Regular"', monospace`
-      }
-    },
-    radii: {
-      none: "0",
-      sm: "0.25rem",
-      md: "0.5rem",
-      lg: "0.75rem"
-    },
-    global: {
-      color: {
-        stroke: {
-          "default": "#e6e7e9"
-        },
-        background: {
-          "default": "#ffffff"
-        }
-      }
-    }
-  },
-  container: {
-    space: {
-      none: "0",
-      xxs: "0.25rem",
-      xs: "0.5rem",
-      sm: "0.75rem",
-      md: "1rem",
-      lg: "1.5rem",
-      xl: "2rem",
-      xxl: "4rem"
-    },
-    gap: {
-      none: "0",
-      xxs: "0.25rem",
-      xs: "0.5rem",
-      sm: "0.75rem",
-      md: "1rem",
-      lg: "1.5rem",
-      xl: "2rem",
-      xxl: "4rem"
-    }
-  },
-  gridContainer: {
-    gap: {
-      none: "0",
-      xxs: "0.25rem",
-      xs: "0.5rem",
-      sm: "0.75rem",
-      md: "1rem",
-      lg: "1.5rem",
-      xl: "2rem",
-      xxl: "4rem",
-      unset: ""
-    }
-  },
-  icon: {
-    space: {
-      xs: {
-        all: "0.25rem"
-      },
-      sm: {
-        all: "0.25rem"
-      },
-      md: {
-        all: "0.365rem"
-      },
-      lg: {
-        all: "0.5rem"
-      },
-      xl: {
-        all: "0.75rem"
-      },
-      xxl: {
-        all: "1rem"
-      }
-    },
-    color: {
-      background: {
-        "default": "rgba(0,0,0,0)",
-        success: "rgb(20% 100% 26.7% / 0.1)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.1)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.1)",
-        warning: "rgb(100% 46.7% 16.1% / 0.1)"
-      },
-      text: {
-        "default": "rgba(0,0,0,0)",
-        success: "#008A0B",
-        neutral: "#53575f",
-        danger: "#c10000",
-        info: "#437EEF",
-        warning: "#A33C00"
-      },
-      stroke: {
-        "default": "rgba(0,0,0,0)",
-        success: "rgb(20% 100% 26.7% / 0.05)",
-        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
-        danger: "rgb(100% 13.7% 13.7% / 0.05)",
-        info: "rgb(26.3% 49.4% 93.7% / 0.05)",
-        warning: "rgb(100% 46.7% 16.1% / 0.05)"
-      }
-    }
-  },
-  datePicker: {
-    dateOption: {
-      space: {
-        gap: "2px"
-      },
-      radii: {
-        "default": "0.25rem",
-        range: "0"
-      },
-      stroke: "1px",
-      size: {
-        height: "2rem",
-        width: "2rem"
-      },
-      typography: {
-        label: {
-          "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
-          hover: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
-          active: `600 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
-          disabled: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
-          range: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-        }
-      },
-      color: {
-        label: {
-          "default": "#161517",
-          hover: "#161517",
-          active: "#ffffff",
-          disabled: "#a0a0a0",
-          range: "#161517"
-        },
-        background: {
-          "default": "#ffffff",
-          hover: "#ffffff",
-          active: "#151515",
-          disabled: "#ffffff",
-          range: "#e6e7e9"
-        },
-        stroke: {
-          "default": "#ffffff",
-          hover: "#151515",
-          active: "#151515",
-          disabled: "#ffffff",
-          range: "#e6e7e9"
-        }
-      }
-    },
-    space: {
-      gap: "0.25rem"
-    },
-    typography: {
-      daytitle: {
-        "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-      },
-      title: {
-        "default": `600 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
-      }
-    },
-    color: {
-      title: {
-        "default": "lch(11.1 1.37 305)"
-      },
-      daytitle: {
-        "default": "#696e79"
-      }
-    }
-  },
   global: {
     color: {
       background: {
@@ -50967,6 +51427,7 @@ export {
   EllipsisContent,
   FileTabElement,
   FileTabs,
+  FileUpload,
   Flags,
   Flyout,
   FormContainer,