@clickhouse/click-ui 0.0.199 → 0.0.201

package/dist/click-ui.bundled.umd.js

@@ -16760,6 +16760,7 @@ var __publicField = (obj, key, value) => {
   dayjs.extend(advancedFormat);
   dayjs.extend(duration);
   dayjs.extend(localizedFormat);
+  dayjs.extend(timezone);
   dayjs.extend(updateLocale);
   dayjs.extend(utc);
   const thresholds = [{
@@ -16864,12 +16865,11 @@ var __publicField = (obj, key, value) => {
   const DateDetails = ({
     date,
     side = "top",
-    systemTimeZone = "America/New_York"
+    systemTimeZone
   }) => {
     const dayjsDate = dayjs(date);
     let systemTime;
     if (systemTimeZone) {
-      dayjs.extend(timezone);
       try {
         systemTime = dayjsDate.tz(systemTimeZone);
       } catch {
@@ -18034,6 +18034,287 @@ var __publicField = (obj, key, value) => {
   };
   DialogContent.displayName = "DialogContent";
   Dialog.Content = DialogContent;
+  const truncateFilename = (filename, maxLength = 40, delimiter2 = "~") => {
+    if (filename.length <= maxLength) {
+      return filename;
+    }
+    if (filename.startsWith(".")) {
+      return `${filename.slice(0, maxLength)}${delimiter2}`;
+    }
+    const extension = filename.lastIndexOf(".") !== -1 ? filename.slice(filename.lastIndexOf(".")) : "";
+    const nameWithoutExtension = extension ? filename.slice(0, filename.lastIndexOf(".")) : filename;
+    const truncatedName = nameWithoutExtension.slice(0, maxLength) + delimiter2;
+    return truncatedName + extension;
+  };
+  const UploadArea = pt.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 && ct(["border-style:dashed;border-color:", ";", ""], ({
+    theme: theme2
+  }) => theme2.click.fileUpload.color.stroke.default, props.$isDragging && ct(["background-color:", ";border-color:", ";"], ({
+    theme: theme2
+  }) => theme2.click.fileUpload.color.background.active, ({
+    theme: theme2
+  }) => theme2.click.fileUpload.color.stroke.active)), (props) => props.$isError && ct(["background-color:", ";border:none;"], ({
+    theme: theme2
+  }) => theme2.click.fileUpload.color.background.error));
+  const FileUploadTitle = pt(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 = pt(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 = pt(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 = pt(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 = pt.div.withConfig({
+    componentId: "sc-1rzizve-5"
+  })(["text-align:", ";", " ", ""], (props) => props.$hasFile || props.$size === "sm" ? "left" : "center", (props) => (props.$hasFile || props.$size === "sm") && ct(["flex:1;"]), (props) => !props.$hasFile && props.$size === "md" && ct(["display:flex;flex-direction:column;align-items:center;width:100%;"]));
+  const FileInfoHeader = pt.div.withConfig({
+    componentId: "sc-1rzizve-6"
+  })(["display:flex;align-items:center;gap:", ";width:100%;"], ({
+    theme: theme2
+  }) => theme2.click.fileUpload.sm.space.gap);
+  const FileInfo = pt.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 = pt.div.withConfig({
+    componentId: "sc-1rzizve-8"
+  })(["display:flex;gap:", ";border:none;"], ({
+    theme: theme2
+  }) => theme2.click.fileUpload.md.space.gap);
+  const FileActions = pt.div.withConfig({
+    componentId: "sc-1rzizve-9"
+  })(["display:flex;align-items:center;margin-left:auto;gap:0;"]);
+  const ProgressContainer$1 = pt.div.withConfig({
+    componentId: "sc-1rzizve-10"
+  })(["display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%;"]);
+  const ProgressBarContainer = pt.div.withConfig({
+    componentId: "sc-1rzizve-11"
+  })(["width:100%;flex:1;"]);
+  const ProgressPercentage = pt(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] = React.useState(false);
+    const [isNotSupported, setIsNotSupported] = React.useState(false);
+    const [file, setFile] = React.useState(null);
+    const fileInputRef = React.useRef(null);
+    const dragCounterRef = React.useRef(0);
+    React.useEffect(() => {
+      let timeoutId;
+      if (isNotSupported) {
+        timeoutId = setTimeout(() => {
+          setIsNotSupported(false);
+        }, 2e3);
+      }
+      return () => {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [isNotSupported]);
+    const handleDragEnter = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current += 1;
+      setIsDragging(true);
+    }, []);
+    const handleDragLeave = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounterRef.current -= 1;
+      if (dragCounterRef.current <= 0) {
+        setIsDragging(false);
+        dragCounterRef.current = 0;
+      }
+    }, []);
+    const handleDragOver = React.useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    }, []);
+    React.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 = React.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 = React.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 = React.useCallback((e) => {
+      if (e.target.files && e.target.files.length > 0) {
+        const file2 = e.target.files[0];
+        processFile(file2);
+      }
+    }, [processFile]);
+    const handleBrowseClick = React.useCallback(() => {
+      if (fileInputRef.current) {
+        fileInputRef.current.click();
+      }
+    }, []);
+    const handleRemoveFile = React.useCallback(() => {
+      setFile(null);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }, []);
+    const handleRetryUpload = React.useCallback(() => {
+      if (onRetry) {
+        onRetry();
+      }
+    }, [onRetry]);
+    const acceptedFileTypes = supportedFileTypes.join(",");
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(UploadIcon, { name: "upload" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(UploadText, { $size: size2, $hasFile: false, children: [
+          isNotSupported ? /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: true, type: "h1", children: "Unsupported file type" }) : /* @__PURE__ */ jsxRuntime.jsx(FileUploadTitle, { $isNotSupported: isNotSupported, type: "h1", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileUploadDescription, { children: [
+            "Files supported: ",
+            supportedFileTypes.join(", ")
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "secondary", onClick: (e) => {
+          e.stopPropagation();
+          handleBrowseClick();
+        }, children: "Browse file" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(FileInfo, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(FileInfoHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DocumentIcon, { name: "document" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileDetails, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", children: truncateFilename(file.name) }),
+            (showSuccess || showProgress) && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", color: "muted", children: formatFileSize(file.size) }),
+            !showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: "md", color: "danger", children: failureMessage }),
+            showSuccess && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { size: "xs", state: "success", name: "check" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs(FileActions, { children: [
+            !showProgress && !showSuccess && /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { size: "sm", icon: "refresh", type: "ghost", onClick: handleRetryUpload }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { size: "sm", icon: "cross", type: "ghost", onClick: handleRemoveFile })
+          ] })
+        ] }),
+        showProgress && /* @__PURE__ */ jsxRuntime.jsxs(ProgressContainer$1, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ProgressBarContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { progress, type: "small" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ProgressPercentage, { size: "sm", color: "muted", children: [
+            progress,
+            "%"
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("input", { type: "file", ref: fileInputRef, accept: acceptedFileTypes, onChange: handleFileSelect, style: {
+        display: "none"
+      } })
+    ] });
+  };
   const Flyout = ({
     modal = false,
     ...props
@@ -44190,6 +44471,126 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -44444,126 +44845,6 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
-    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: {
@@ -45605,6 +45886,57 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -45654,6 +45986,67 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -45728,6 +46121,88 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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"
@@ -46147,158 +46622,6 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
-    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: {
@@ -47375,6 +47698,57 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -47424,6 +47798,64 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -47497,6 +47929,88 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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"
@@ -47919,155 +48433,6 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
-    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: {
@@ -49661,6 +50026,138 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -49793,6 +50290,182 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -49961,6 +50634,149 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -49998,10 +50814,36 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           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"
@@ -50866,388 +51708,6 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
-    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: {
@@ -52218,6 +52678,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.EllipsisContent = EllipsisContent;
   exports2.FileTabElement = FileTabElement;
   exports2.FileTabs = FileTabs;
+  exports2.FileUpload = FileUpload;
   exports2.Flags = Flags;
   exports2.Flyout = Flyout;
   exports2.FormContainer = FormContainer;