@juspay/blend-design-system 0.0.37-beta.7 → 0.0.37

package/dist/node-B3rrXW84.js

@@ -0,0 +1,1023 @@
+import { T as h } from "./breadcrumbV2.tokens-CovJEwot.js";
+const c = (r) => ({
+  sm: {
+    paddingTop: r.unit[16],
+    paddingRight: r.unit[16],
+    paddingBottom: r.unit[16],
+    paddingLeft: r.unit[16],
+    boxShadow: r.shadows.xs,
+    borderRadius: r.border.radius[16],
+    backgroundColor: r.colors.gray[0],
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      offset: r.unit[16]
+    },
+    skeleton: {
+      header: {
+        gap: r.unit[16],
+        paddingTop: r.unit[20],
+        paddingRight: r.unit[20],
+        paddingBottom: r.unit[20],
+        paddingLeft: r.unit[20],
+        borderBottom: `1px solid ${r.colors.gray[200]}`,
+        width: "60%",
+        height: 24,
+        borderRadius: r.border.radius[4]
+      },
+      body: {
+        gap: r.unit[12],
+        width: "100%",
+        height: 300,
+        borderRadius: r.border.radius[4]
+      }
+    },
+    divider: {
+      borderColor: r.colors.gray[200]
+    },
+    header: {
+      gap: r.unit[16],
+      paddingTop: r.unit[16],
+      paddingRight: r.unit[16],
+      paddingBottom: r.unit[16],
+      paddingLeft: r.unit[16],
+      maxHeight: "20vh",
+      borderBottom: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[0],
+      borderTopLeftRadius: r.border.radius[16],
+      borderTopRightRadius: r.border.radius[16],
+      slot: {
+        gap: r.unit[8]
+      },
+      text: {
+        title: {
+          color: r.colors.gray[700],
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[600],
+          lineHeight: r.font.lineHeight[20]
+        },
+        subtitle: {
+          color: r.colors.gray[600],
+          fontSize: r.font.size.body.sm.fontSize,
+          fontWeight: r.font.weight[400],
+          lineHeight: r.font.lineHeight[20]
+        }
+      }
+    },
+    body: {
+      paddingTop: r.unit[16],
+      paddingRight: r.unit[16],
+      paddingBottom: r.unit[16],
+      paddingLeft: r.unit[16],
+      backgroundColor: r.colors.gray[0]
+    },
+    footer: {
+      paddingTop: r.unit[16],
+      paddingRight: r.unit[16],
+      paddingBottom: r.unit[16],
+      paddingLeft: r.unit[16],
+      borderTop: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[0],
+      gap: r.unit[12]
+    },
+    closeButton: {
+      color: r.colors.gray[500],
+      width: r.unit[16],
+      height: r.unit[16]
+    }
+  },
+  lg: {
+    backgroundColor: r.colors.gray[0],
+    paddingTop: r.unit[16],
+    paddingRight: r.unit[16],
+    paddingBottom: r.unit[16],
+    paddingLeft: r.unit[16],
+    boxShadow: r.shadows.lg,
+    borderRadius: r.border.radius[16],
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      offset: r.unit[16]
+    },
+    divider: {
+      borderColor: r.colors.gray[200]
+    },
+    header: {
+      gap: r.unit[16],
+      paddingTop: r.unit[20],
+      paddingRight: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[20],
+      maxHeight: "20vh",
+      borderBottom: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[0],
+      borderTopLeftRadius: r.border.radius[16],
+      borderTopRightRadius: r.border.radius[16],
+      slot: {
+        gap: r.unit[8]
+      },
+      text: {
+        title: {
+          color: r.colors.gray[700],
+          fontSize: r.font.size.body.lg.fontSize,
+          fontWeight: r.font.weight[600],
+          lineHeight: r.font.lineHeight[20]
+        },
+        subtitle: {
+          color: r.colors.gray[600],
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[400],
+          lineHeight: r.font.lineHeight[20]
+        }
+      }
+    },
+    skeleton: {
+      header: {
+        gap: r.unit[16],
+        paddingTop: r.unit[20],
+        paddingRight: r.unit[20],
+        paddingBottom: r.unit[20],
+        paddingLeft: r.unit[20],
+        borderBottom: `1px solid ${r.colors.gray[200]}`,
+        width: "60%",
+        height: 24,
+        borderRadius: r.border.radius[4]
+      },
+      body: {
+        gap: r.unit[12],
+        width: "100%",
+        height: 300,
+        borderRadius: r.border.radius[4]
+      }
+    },
+    body: {
+      paddingTop: r.unit[20],
+      paddingRight: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[20],
+      backgroundColor: r.colors.gray[0]
+    },
+    footer: {
+      paddingTop: r.unit[20],
+      paddingRight: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[20],
+      borderTop: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[0],
+      gap: r.unit[16]
+    },
+    closeButton: {
+      color: r.colors.gray[500],
+      width: r.unit[16],
+      height: r.unit[16]
+    }
+  }
+}), i = (r) => ({
+  sm: {
+    backgroundColor: r.colors.gray[700],
+    paddingTop: r.unit[16],
+    paddingRight: r.unit[16],
+    paddingBottom: r.unit[16],
+    paddingLeft: r.unit[16],
+    boxShadow: r.shadows.xs,
+    borderRadius: r.border.radius[16],
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      offset: r.unit[16]
+    },
+    divider: {
+      borderColor: r.colors.gray[200]
+    },
+    skeleton: {
+      header: {
+        gap: r.unit[16],
+        paddingTop: r.unit[20],
+        paddingRight: r.unit[20],
+        paddingBottom: r.unit[20],
+        paddingLeft: r.unit[20],
+        borderBottom: `1px solid ${r.colors.gray[200]}`,
+        width: "60%",
+        height: 24,
+        borderRadius: r.border.radius[4]
+      },
+      body: {
+        gap: r.unit[12],
+        width: "100%",
+        height: 300,
+        borderRadius: r.border.radius[4]
+      }
+    },
+    header: {
+      slot: {
+        gap: r.unit[8]
+      },
+      gap: r.unit[16],
+      paddingTop: r.unit[16],
+      paddingRight: r.unit[16],
+      paddingBottom: r.unit[16],
+      paddingLeft: r.unit[16],
+      maxHeight: "20vh",
+      borderBottom: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[700],
+      borderTopLeftRadius: r.border.radius[16],
+      borderTopRightRadius: r.border.radius[16],
+      text: {
+        title: {
+          color: r.colors.gray[0],
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[600],
+          lineHeight: r.font.lineHeight[20]
+        },
+        subtitle: {
+          color: r.colors.gray[100],
+          fontSize: r.font.size.body.sm.fontSize,
+          fontWeight: r.font.weight[400],
+          lineHeight: r.font.lineHeight[20]
+        }
+      }
+    },
+    body: {
+      paddingTop: r.unit[16],
+      paddingRight: r.unit[16],
+      paddingBottom: r.unit[16],
+      paddingLeft: r.unit[16],
+      backgroundColor: r.colors.gray[700]
+    },
+    footer: {
+      paddingTop: r.unit[16],
+      paddingRight: r.unit[16],
+      paddingBottom: r.unit[16],
+      paddingLeft: r.unit[16],
+      borderTop: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[700],
+      gap: r.unit[12]
+    },
+    closeButton: {
+      color: r.colors.gray[100],
+      width: r.unit[16],
+      height: r.unit[16]
+    }
+  },
+  lg: {
+    backgroundColor: r.colors.gray[700],
+    paddingTop: r.unit[16],
+    paddingRight: r.unit[16],
+    paddingBottom: r.unit[16],
+    paddingLeft: r.unit[16],
+    boxShadow: r.shadows.lg,
+    borderRadius: r.border.radius[16],
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+      offset: r.unit[16]
+    },
+    divider: {
+      borderColor: r.colors.gray[200]
+    },
+    skeleton: {
+      header: {
+        gap: r.unit[16],
+        paddingTop: r.unit[20],
+        paddingRight: r.unit[20],
+        paddingBottom: r.unit[20],
+        paddingLeft: r.unit[20],
+        borderBottom: `1px solid ${r.colors.gray[200]}`,
+        width: "60%",
+        height: 24,
+        borderRadius: r.border.radius[4]
+      },
+      body: {
+        gap: r.unit[12],
+        width: "100%",
+        height: 300,
+        borderRadius: r.border.radius[4]
+      }
+    },
+    header: {
+      gap: r.unit[16],
+      paddingTop: r.unit[20],
+      paddingRight: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[20],
+      maxHeight: "20vh",
+      borderBottom: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[700],
+      borderTopLeftRadius: r.border.radius[16],
+      borderTopRightRadius: r.border.radius[16],
+      slot: {
+        gap: r.unit[8]
+      },
+      text: {
+        title: {
+          color: r.colors.gray[0],
+          fontSize: r.font.size.body.lg.fontSize,
+          fontWeight: r.font.weight[600],
+          lineHeight: r.font.lineHeight[20]
+        },
+        subtitle: {
+          color: r.colors.gray[100],
+          fontSize: r.font.size.body.md.fontSize,
+          fontWeight: r.font.weight[400],
+          lineHeight: r.font.lineHeight[20]
+        }
+      }
+    },
+    body: {
+      paddingTop: r.unit[20],
+      paddingRight: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[20],
+      backgroundColor: r.colors.gray[700]
+    },
+    footer: {
+      paddingTop: r.unit[20],
+      paddingRight: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[20],
+      borderTop: `1px solid ${r.colors.gray[200]}`,
+      backgroundColor: r.colors.gray[700],
+      gap: r.unit[16]
+    },
+    closeButton: {
+      color: r.colors.gray[100],
+      width: r.unit[16],
+      height: r.unit[16]
+    }
+  }
+}), m = (r, t = h.LIGHT) => t === h.DARK || t === "dark" ? i(r) : c(r);
+var g = /* @__PURE__ */ ((r) => (r.IDLE = "idle", r.UPLOADING = "uploading", r.SUCCESS = "success", r.ERROR = "error", r.DISABLED = "disabled", r))(g || {}), l = /* @__PURE__ */ ((r) => (r.DRAG_ENTER = "drag_enter", r.DRAG_LEAVE = "drag_leave", r.DRAG_OVER = "drag_over", r.DROP = "drop", r))(l || {});
+const b = {
+  OVERSIZED: "oversized",
+  MAX_FILES: "maxFiles",
+  INVALID_TYPE: "invalidType"
+}, p = (r) => ({
+  sm: {
+    gap: r.unit[8],
+    topContainer: {
+      label: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[500],
+          md: r.font.weight[500],
+          lg: r.font.weight[500]
+        },
+        color: {
+          default: r.colors.gray[700],
+          hover: r.colors.gray[700],
+          focus: r.colors.gray[700],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        }
+      },
+      subLabel: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[300],
+          error: r.colors.red[600]
+        }
+      },
+      helpIcon: {
+        width: {
+          sm: r.unit[14],
+          md: r.unit[14],
+          lg: r.unit[14]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        }
+      },
+      required: {
+        color: r.colors.red[600]
+      }
+    },
+    uploadContainer: {
+      gap: r.unit[20],
+      paddingTop: r.unit[40],
+      paddingBottom: r.unit[40],
+      paddingLeft: r.unit[40],
+      paddingRight: r.unit[40],
+      borderRadius: r.border.radius[12],
+      border: {
+        [g.IDLE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_ENTER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DRAG_LEAVE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_OVER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DROP]: `1px dashed ${r.colors.gray[200]}`,
+        [g.UPLOADING]: `1px dashed ${r.colors.gray[200]}`,
+        [g.SUCCESS]: `1px dashed ${r.colors.gray[200]}`,
+        [g.ERROR]: `1px dashed ${r.colors.red[200]}`,
+        [g.DISABLED]: `1px dashed ${r.colors.gray[200]}`
+      },
+      backgroundColor: {
+        [g.IDLE]: r.colors.gray[900],
+        [l.DRAG_ENTER]: r.colors.primary[50],
+        [l.DRAG_LEAVE]: r.colors.gray[900],
+        [l.DRAG_OVER]: r.colors.primary[50],
+        [l.DROP]: r.colors.gray[900],
+        [g.UPLOADING]: r.colors.gray[900],
+        [g.SUCCESS]: r.colors.gray[900],
+        [g.ERROR]: r.colors.gray[900],
+        [g.DISABLED]: r.colors.gray[900]
+      },
+      header: {
+        gap: r.unit[4],
+        title: {
+          fontSize: r.font.fontSize[16],
+          fontWeight: r.font.weight[600],
+          color: r.colors.gray[100]
+        },
+        description: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.gray[400]
+        },
+        errorText: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.red[600]
+        }
+      },
+      fileTag: {
+        maxWidth: r.unit[200],
+        gap: r.unit[4]
+      }
+    },
+    bottomContainer: {
+      hintText: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[500],
+          error: r.colors.gray[400]
+        }
+      },
+      errorMessage: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: r.colors.red[600]
+      }
+    }
+  },
+  lg: {
+    gap: r.unit[8],
+    topContainer: {
+      label: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[500],
+          md: r.font.weight[500],
+          lg: r.font.weight[500]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        },
+        color: {
+          default: r.colors.gray[700],
+          hover: r.colors.gray[700],
+          focus: r.colors.gray[700],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        }
+      },
+      subLabel: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[300],
+          error: r.colors.red[600]
+        }
+      },
+      helpIcon: {
+        width: {
+          sm: r.unit[14],
+          md: r.unit[14],
+          lg: r.unit[14]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        }
+      },
+      required: {
+        color: r.colors.red[600]
+      }
+    },
+    uploadContainer: {
+      gap: r.unit[20],
+      paddingTop: r.unit[40],
+      paddingBottom: r.unit[40],
+      paddingLeft: r.unit[40],
+      paddingRight: r.unit[40],
+      borderRadius: r.border.radius[12],
+      border: {
+        [g.IDLE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_ENTER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DRAG_LEAVE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_OVER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DROP]: `1px dashed ${r.colors.gray[200]}`,
+        [g.UPLOADING]: `1px dashed ${r.colors.gray[200]}`,
+        [g.SUCCESS]: `1px dashed ${r.colors.gray[200]}`,
+        [g.ERROR]: `1px dashed ${r.colors.red[200]}`,
+        [g.DISABLED]: `1px dashed ${r.colors.gray[200]}`
+      },
+      backgroundColor: {
+        [g.IDLE]: r.colors.gray[900],
+        [l.DRAG_ENTER]: r.colors.primary[50],
+        [l.DRAG_LEAVE]: r.colors.gray[900],
+        [l.DRAG_OVER]: r.colors.primary[50],
+        [l.DROP]: r.colors.gray[900],
+        [g.UPLOADING]: r.colors.gray[900],
+        [g.SUCCESS]: r.colors.gray[900],
+        [g.ERROR]: r.colors.gray[900],
+        [g.DISABLED]: r.colors.gray[900]
+      },
+      header: {
+        gap: r.unit[4],
+        title: {
+          fontSize: r.font.fontSize[16],
+          fontWeight: r.font.weight[600],
+          color: r.colors.gray[100]
+        },
+        description: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.gray[400]
+        },
+        errorText: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.red[600]
+        }
+      },
+      fileTag: {
+        maxWidth: r.unit[200],
+        gap: r.unit[4]
+      }
+    },
+    bottomContainer: {
+      hintText: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[500],
+          error: r.colors.gray[400]
+        }
+      },
+      errorMessage: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: r.colors.red[600]
+      }
+    }
+  }
+}), y = (r) => ({
+  sm: {
+    gap: r.unit[8],
+    topContainer: {
+      label: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[500],
+          md: r.font.weight[500],
+          lg: r.font.weight[500]
+        },
+        color: {
+          default: r.colors.gray[700],
+          hover: r.colors.gray[700],
+          focus: r.colors.gray[700],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        }
+      },
+      subLabel: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[300],
+          error: r.colors.red[600]
+        }
+      },
+      helpIcon: {
+        width: {
+          sm: r.unit[14],
+          md: r.unit[14],
+          lg: r.unit[14]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        }
+      },
+      required: {
+        color: r.colors.red[600]
+      }
+    },
+    uploadContainer: {
+      gap: r.unit[20],
+      paddingTop: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[40],
+      paddingRight: r.unit[40],
+      borderRadius: r.border.radius[12],
+      border: {
+        [g.IDLE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_ENTER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DRAG_LEAVE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_OVER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DROP]: `1px dashed ${r.colors.gray[200]}`,
+        [g.UPLOADING]: `1px dashed ${r.colors.gray[200]}`,
+        [g.SUCCESS]: `1px dashed ${r.colors.green[500]}`,
+        [g.ERROR]: `1px dashed ${r.colors.red[500]}`,
+        [g.DISABLED]: `1px dashed ${r.colors.gray[200]}`
+      },
+      backgroundColor: {
+        [g.IDLE]: r.colors.gray[0],
+        [l.DRAG_ENTER]: r.colors.primary[50],
+        [l.DRAG_LEAVE]: r.colors.gray[0],
+        [l.DRAG_OVER]: r.colors.primary[50],
+        [l.DROP]: r.colors.gray[0],
+        [g.UPLOADING]: r.colors.gray[0],
+        [g.SUCCESS]: r.colors.gray[0],
+        [g.ERROR]: r.colors.gray[0],
+        [g.DISABLED]: r.colors.gray[0]
+      },
+      header: {
+        gap: r.unit[4],
+        title: {
+          fontSize: r.font.fontSize[16],
+          fontWeight: r.font.weight[600],
+          color: r.colors.gray[700]
+        },
+        description: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.gray[400]
+        },
+        errorText: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.red[600]
+        }
+      },
+      fileTag: {
+        maxWidth: r.unit[200],
+        gap: r.unit[4]
+      }
+    },
+    bottomContainer: {
+      hintText: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[300],
+          error: r.colors.gray[400]
+        }
+      },
+      errorMessage: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: r.colors.red[600]
+      }
+    }
+  },
+  lg: {
+    gap: r.unit[8],
+    topContainer: {
+      label: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[500],
+          md: r.font.weight[500],
+          lg: r.font.weight[500]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        },
+        color: {
+          default: r.colors.gray[700],
+          hover: r.colors.gray[700],
+          focus: r.colors.gray[700],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        }
+      },
+      subLabel: {
+        fontSize: {
+          sm: r.font.fontSize[14],
+          md: r.font.fontSize[14],
+          lg: r.font.fontSize[14]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[20],
+          md: r.font.lineHeight[20],
+          lg: r.font.lineHeight[20]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[300],
+          error: r.colors.red[600]
+        }
+      },
+      helpIcon: {
+        width: {
+          sm: r.unit[14],
+          md: r.unit[14],
+          lg: r.unit[14]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[400],
+          error: r.colors.red[600]
+        }
+      },
+      required: {
+        color: r.colors.red[600]
+      }
+    },
+    uploadContainer: {
+      gap: r.unit[20],
+      paddingTop: r.unit[20],
+      paddingBottom: r.unit[20],
+      paddingLeft: r.unit[40],
+      paddingRight: r.unit[40],
+      borderRadius: r.border.radius[12],
+      border: {
+        [g.IDLE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_ENTER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DRAG_LEAVE]: `1px dashed ${r.colors.gray[200]}`,
+        [l.DRAG_OVER]: `1px dashed ${r.colors.primary[500]}`,
+        [l.DROP]: `1px dashed ${r.colors.gray[200]}`,
+        [g.UPLOADING]: `1px dashed ${r.colors.gray[200]}`,
+        [g.SUCCESS]: `1px dashed ${r.colors.green[500]}`,
+        [g.ERROR]: `1px dashed ${r.colors.red[500]}`,
+        [g.DISABLED]: `1px dashed ${r.colors.gray[200]}`
+      },
+      backgroundColor: {
+        [g.IDLE]: r.colors.gray[0],
+        [l.DRAG_ENTER]: r.colors.primary[50],
+        [l.DRAG_LEAVE]: r.colors.gray[0],
+        [l.DRAG_OVER]: r.colors.primary[50],
+        [l.DROP]: r.colors.gray[0],
+        [g.UPLOADING]: r.colors.gray[0],
+        [g.SUCCESS]: r.colors.gray[0],
+        [g.ERROR]: r.colors.gray[0],
+        [g.DISABLED]: r.colors.gray[0]
+      },
+      header: {
+        gap: r.unit[4],
+        title: {
+          fontSize: r.font.fontSize[16],
+          fontWeight: r.font.weight[600],
+          color: r.colors.gray[700]
+        },
+        description: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.gray[400]
+        },
+        errorText: {
+          fontSize: r.font.fontSize[14],
+          fontWeight: r.font.weight[400],
+          color: r.colors.red[600]
+        }
+      },
+      fileTag: {
+        maxWidth: r.unit[200],
+        gap: r.unit[4]
+      }
+    },
+    bottomContainer: {
+      hintText: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: {
+          default: r.colors.gray[400],
+          hover: r.colors.gray[400],
+          focus: r.colors.gray[400],
+          disabled: r.colors.gray[300],
+          error: r.colors.gray[400]
+        }
+      },
+      errorMessage: {
+        fontSize: {
+          sm: r.font.fontSize[12],
+          md: r.font.fontSize[12],
+          lg: r.font.fontSize[12]
+        },
+        fontWeight: {
+          sm: r.font.weight[400],
+          md: r.font.weight[400],
+          lg: r.font.weight[400]
+        },
+        lineHeight: {
+          sm: r.font.lineHeight[16],
+          md: r.font.lineHeight[16],
+          lg: r.font.lineHeight[16]
+        },
+        color: r.colors.red[600]
+      }
+    }
+  }
+}), S = (r, t = h.LIGHT) => t === h.DARK || t === "dark" ? p(r) : y(r);
+export {
+  g as U,
+  S as a,
+  l as b,
+  b as c,
+  m as g
+};